Simplify isolation of hints from page styles.

common/content/bindings.xml

@@ -13,9 +13,14 @@
         </content>
     </binding>
 
-    <binding id="magic" inheritstyle="false">
+    <binding id="hints" inheritstyle="false">
+        <implementation>
+            <field name="hints">
+                document.getAnonymousElementByAttribute(this, "anonid", "hints");
+            </field>
+        </implementation>
         <content>
-            <html:span xbl:inherits="dactyl:highlight=dactyl:highlight,number,style,text" />
+            <html:div anonid="hints"/>
         </content>
     </binding>
 

common/content/hints.js

@@ -287,49 +287,50 @@ const Hints = Module("hints", {
             return true;
         }
 
-        let baseNodeAbsolute = util.xmlToDom(<span highlight="Hint" dactyl:class="magic" xmlns:dactyl={NS}/>, doc);
-
-        let mode = this._hintMode;
-        let res = util.evaluateXPath(mode.xpath, doc, null, true);
-        if (mode.filter)
-            res = let (orig = res) (e for (e in orig) if (mode.filter(e)));
-
-        let fragment = util.xmlToDom(<div highlight="hints"/>, doc);
-        let start = this._pageHints.length;
-        for (let elem in res) {
-            let hint = { elem: elem, showText: false };
-
-            if (!isVisible(elem))
-                continue;
-
-            if (elem.hasAttributeNS(NS, "hint"))
-                [hint.text, hint.showText] = [elem.getAttributeNS(NS, "hint"), true];
-            else if (isinstance(elem, [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement]))
-                [hint.text, hint.showText] = this._getInputHint(elem, doc);
-            else if (elem.firstElementChild instanceof HTMLImageElement && /^\s*$/.test(elem.textContent))
-                [hint.text, hint.showText] = [elem.firstElementChild.alt || elem.firstElementChild.title, true];
-            else
-                hint.text = elem.textContent.toLowerCase();
-
-            hint.span = baseNodeAbsolute.cloneNode(true);
-
-            let rect = elem.getClientRects()[0] || elem.getBoundingClientRect();
-            let leftPos = Math.max((rect.left + offsetX), offsetX);
-            let topPos  = Math.max((rect.top + offsetY), offsetY);
-
-            if (elem instanceof HTMLAreaElement)
-                [leftPos, topPos] = this._getAreaOffset(elem, leftPos, topPos);
-
-            hint.span.style.left = leftPos + "px";
-            hint.span.style.top =  topPos + "px";
-            fragment.appendChild(hint.span);
-
-            this._pageHints.push(hint);
-        }
-
         let body = doc.body || util.evaluateXPath(["body"], doc).snapshotItem(0);
         if (body) {
+            let fragment = util.xmlToDom(<div highlight="hints"/>, doc);
             body.appendChild(fragment);
+
+            let baseNodeAbsolute = util.xmlToDom(<span highlight="Hint"/>, doc);
+
+            let mode = this._hintMode;
+            let res = util.evaluateXPath(mode.xpath, doc, null, true);
+            if (mode.filter)
+                res = let (orig = res) (e for (e in orig) if (mode.filter(e)));
+
+            let start = this._pageHints.length;
+            for (let elem in res) {
+                let hint = { elem: elem, showText: false };
+
+                if (!isVisible(elem))
+                    continue;
+
+                if (elem.hasAttributeNS(NS, "hint"))
+                    [hint.text, hint.showText] = [elem.getAttributeNS(NS, "hint"), true];
+                else if (isinstance(elem, [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement]))
+                    [hint.text, hint.showText] = this._getInputHint(elem, doc);
+                else if (elem.firstElementChild instanceof HTMLImageElement && /^\s*$/.test(elem.textContent))
+                    [hint.text, hint.showText] = [elem.firstElementChild.alt || elem.firstElementChild.title, true];
+                else
+                    hint.text = elem.textContent.toLowerCase();
+
+                hint.span = baseNodeAbsolute.cloneNode(true);
+
+                let rect = elem.getClientRects()[0] || elem.getBoundingClientRect();
+                let leftPos = Math.max((rect.left + offsetX), offsetX);
+                let topPos  = Math.max((rect.top + offsetY), offsetY);
+
+                if (elem instanceof HTMLAreaElement)
+                    [leftPos, topPos] = this._getAreaOffset(elem, leftPos, topPos);
+
+                hint.span.style.left = leftPos + "px";
+                hint.span.style.top =  topPos + "px";
+                fragment.wrappedJSObject.hints.appendChild(hint.span);
+
+                this._pageHints.push(hint);
+            }
+
             this._docs.push({ doc: doc, start: start, end: this._pageHints.length - 1 });
         }
 
@@ -420,7 +421,7 @@ const Hints = Module("hints", {
                         if (!rect)
                             continue;
 
-                        hint.imgSpan = util.xmlToDom(<span dactyl:class="magic" highlight="Hint" dactyl:hl="HintImage" xmlns:dactyl={NS}/>, doc);
+                        hint.imgSpan = util.xmlToDom(<span highlight="Hint" dactyl:hl="HintImage"/>, doc);
                         hint.imgSpan.style.left = (rect.left + offsetX) + "px";
                         hint.imgSpan.style.top = (rect.top + offsetY) + "px";
                         hint.imgSpan.style.width = (rect.right - rect.left) + "px";
@@ -453,12 +454,12 @@ const Hints = Module("hints", {
 
         if (options["usermode"]) {
             let css = [];
-            // FIXME: Broken for imgspans.
+            for (let hint in values(this._pageHints)) {
-            for (let { doc } in values(this._docs)) {
+                let selector = highlight.selector("Hint") + "[number=" + hint.span.getAttribute("number").quote() + "]";
-                for (let elem in util.evaluateXPath("//*[@dactyl:highlight and @number]", doc)) {
+                let imgSpan = "[dactyl|hl=HintImage]";
-                    let group = elem.getAttributeNS(NS, "highlight");
+                css.push(selector + ":not(" + imgSpan + ") { " + hint.span.style.cssText + " }");
-                    css.push(highlight.selector(group) + "[number=" + elem.getAttribute("number").quote() + "] { " + elem.style.cssText + " }");
+                if (hint.imgSpan)
-                }
+                    css.push(selector + imgSpan + " { " + hint.span.style.cssText + " }");
             }
             styles.addSheet(true, "hint-positions", "*", css.join("\n"));
         }

common/skin/dactyl.css

@@ -7,26 +7,15 @@
     -moz-binding: url(chrome://dactyl/content/bindings.xml#frame) !important;
 }
 
-[dactyl|class~=magic] > [dactyl|highlight=Hint] {
+[dactyl|highlight~=hints] {
-    visibility: visible !important;
+    -moz-binding: url(chrome://dactyl/content/bindings.xml#hints) !important;
-}
-[dactyl|class~=magic] {
-    -moz-binding: url(chrome://dactyl/content/bindings.xml#magic) !important;
-    visibility: hidden !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 4000px !important;
 }
 
 [dactyl|highlight~=HintImage],
 [dactyl|highlight~=Hint] {
-    z-index: 5000;
+    z-index: 50000;
     position: absolute !important;
 }
-[dactyl|highlight~=Search] {
-    display: inline !important;
-}
 
 /* Applied only to completion buffer and MOW */
 @-moz-document