Issue 1091 - Implement a better templating approach for Element Hiding Helper

lib/aardvark.js

 /*
  * This Source Code is subject to the terms of the Mozilla Public License
  * version 2.0 (the "License"). You can obtain a copy of the License at
  * http://mozilla.org/MPL/2.0/.
  */
 
 let {Prefs} = require("prefs");
 
 // Make sure to stop selection when we are uninstalled
 onShutdown.add(function() Aardvark.quit());
 
 // To be replaced when selection starts
 function E(id) {return null;}
 
 /*********************************
  * Minimal element creation code *
  *********************************/
 
-function Element(el)
-{
-  this._el = el;
-}
-Element.prototype =
-{
-  _el: null,
-  child: function(tagName, attrs, callback)
-  {
-    let child = Element.create(this._el.ownerDocument, tagName, attrs, callback);
-    this._el.appendChild(child);
-  }
-};
-Element.create = function(doc, tagName, attrs, callback)
+function createElement(doc, tagName, attrs, children)
 {
   let el = doc.createElement(tagName);
   if (attrs)
     for (let key in attrs)
       el.setAttribute(key, attrs[key]);
-  if (typeof callback == "function")
-    callback(new Element(el));
+  if (children)
+    for (let child of children)
+      el.appendChild(child)
   return el;
 };

[Thomas Greiner, 2014/07/23 13:55:52]

What's the reason for introducing a custom type here instead of using DOM
objects? IMHO avoiding it makes the element creation simpler regarding both
definition and use.

e.g.

function createElement(doc, tagName, attr, children)
{
  let el = doc.createElement(tagName);
  if (attr)
    for (let i in attr)
      el.setAttribute(i, attr[i]);
  if (children)
    for (let child of children)
      el.appendChild(child);
  return el;
}

...

let create = createElement.bind(null, doc);
this.boxElem = create("div", {"class": elementMarkerClass}, [
  create("div", {"class": "ehh-border"}),
  create("div", {"class": "ehh-label"}, [
    create("span", {"class": "ehh-labelTag"}),
    create("span", {"class": "ehh-labelAddition"})
  ])
]);

[Wladimir Palant, 2014/09/11 16:52:13]

This code went through several iteration, particularly because I considered too
many function parameters not obvious enough. However, since I decided to have
attributes as parameters not doing the same for child elements doesn't make any
sense.

 
 /**********************************
  * General element selection code *
  **********************************/
 
 let Aardvark = exports.Aardvark =
 {
   window: null,
   browser: null,
   anchorElem: null,
@@ skipping 26 matching lines @@
     this.browser.addEventListener("DOMMouseScroll", this.onMouseScroll, true);
     this.browser.addEventListener("keypress", this.onKeyPress, true);
     this.browser.addEventListener("mousemove", this.onMouseMove, true);
     this.browser.addEventListener("select", this.quit, false);
     this.browser.contentWindow.addEventListener("pagehide", this.onPageHide, true);
 
     this.browser.contentWindow.focus();
 
     let doc = this.browser.contentDocument;
     let {elementMarkerClass} = require("main");
-    this.boxElem = Element.create(doc, "div", {"class": elementMarkerClass}, function(el)
-    {
-      el.child("div", {"class": "ehh-border"});
-      el.child("div", {"class": "ehh-label"}, function(el)
-      {
-        el.child("span", {"class": "ehh-labelTag"})
-        el.child("span", {"class": "ehh-labelAddition"});
-      });
-    });
+    this.boxElem = createElement(doc, "div", {"class": elementMarkerClass}, [
+      createElement(doc, "div", {"class": "ehh-border"}),
+      createElement(doc, "div", {"class": "ehh-label"}, [
+        createElement(doc, "span", {"class": "ehh-labelTag"}),
+        createElement(doc, "span", {"class": "ehh-labelAddition"})
+      ])
+    ]);
 
     this.initHelpBox();
 
     if (Prefs.showhelp)
       this.showMenu();
 
     // Make sure to select some element immeditely (whichever is in the center of the browser window)
     let [wndWidth, wndHeight] = this.getWindowSize(doc.defaultView);
     this.isUserSelected = false;
     this.onMouseMove({clientX: wndWidth / 2, clientY: wndHeight / 2, screenX: -1, screenY: -1, target: null});
@@ skipping 304 matching lines @@
       this.boxElem.parentNode.removeChild(this.boxElem);
 
     if (this.paintNode)
       this.paintNode.removeEventListener("MozAfterPaint", this.onAfterPaint, false);
     this.paintNode = null;
     this.prevPos = null;
   },
 
   getWindowSize: function(wnd)
   {
-    return [wnd.innerWidth, wnd.innerHeight];
+    return [wnd.innerWidth, wnd.document.documentElement.clientHeight];
   },
 
   getElementPosition: function(element)
   {
     // Restrict rectangle coordinates by the boundaries of a window's client area
     function intersectRect(rect, wnd)
     {
       let [wndWidth, wndHeight] = this.getWindowSize(wnd);
       rect.left = Math.max(rect.left, 0);
       rect.top = Math.max(rect.top, 0);
@@ skipping 329 matching lines @@
     // Show help box
     helpBox.showPopup(this.browser, -1, -1, "tooltip", "topleft", "topleft");
     return true;
   }
 }
 
 // Makes sure event handlers like Aardvark.onKeyPress always have the correct
 // this pointer set.
 for each (let method in ["onMouseClick", "onMouseScroll", "onKeyPress", "onPageHide", "onMouseMove", "onAfterPaint", "quit"])
   Aardvark[method] = Aardvark[method].bind(Aardvark);