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)
+{
+  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));
+  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,
   selectedElem: null,
@@ skipping 24 matching lines @@
     this.browser.addEventListener("click", this.onMouseClick, true);
     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;
-    this.boxElem = doc.importNode(E("ehh-elementmarker").firstElementChild.cloneNode(true), true);
+    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.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 654 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);