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

lib/aardvark.js

Index: lib/aardvark.js
===================================================================
--- a/lib/aardvark.js
+++ b/lib/aardvark.js
@@ -7,16 +7,44 @@
 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,
@@ -51,17 +79,26 @@ let Aardvark = exports.Aardvark =
     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);