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 createElement(doc, tagName, attrs, children)
+{
+  let el = doc.createElement(tagName);
+  if (attrs)
+    for (let key in attrs)
+      el.setAttribute(key, attrs[key]);
+  if (children)
+    for (let child of children)
+      el.appendChild(child)
+  return el;
+};
+
 /**********************************
  * 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 = 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 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);