Bug 886036 - Port pseudoclass lock to the inspector actor. r=harth

--HG--
extra : rebase_source : c515e1a85da5d484686e1ae8b55c4dbfd90f214f

browser/devtools/inspector/breadcrumbs.js

@@ -151,13 +151,8 @@ HTMLBreadcrumbs.prototype = {
       }
     }
 
-    // XXX: needs updating when pseudoclass-lock is remotable
-    let rawNode = aNode.rawNode();
-    for (let i = 0; i < PSEUDO_CLASSES.length; i++) {
-      let pseudo = PSEUDO_CLASSES[i];
-      if (DOMUtils.hasPseudoClassLock(rawNode, pseudo)) {
-        text += pseudo;
-      }
+    for (let pseudo of aNode.pseudoClassLocks) {
+      text += pseudo;
     }
 
     return text;
@@ -202,12 +197,11 @@ HTMLBreadcrumbs.prototype = {
     }
 
     // XXX: Until we have pseudoclass lock in the node.
-    let rawNode = aNode.rawNode();
+    for (let pseudo of aNode.pseudoClassLocks) {
 
-    let pseudos = PSEUDO_CLASSES.filter(function(pseudo) {
-      return DOMUtils.hasPseudoClassLock(rawNode, pseudo);
-    }, this);
-    pseudosLabel.textContent = pseudos.join("");
+    }
+
+    pseudosLabel.textContent = aNode.pseudoClassLocks.join("");
 
     fragment.appendChild(tagLabel);
     fragment.appendChild(idLabel);
@@ -353,18 +347,6 @@ HTMLBreadcrumbs.prototype = {
    */
   destroy: function BC_destroy()
   {
-    this.nodeHierarchy.forEach(function(crumb) {
-      // This node might have already been destroyed during
-      // shutdown.  Will clean this up when pseudo-class lock
-      // is ported to the walker.
-      if (crumb.node.actorID) {
-        let rawNode = crumb.node.rawNode();
-        if (LayoutHelpers.isNodeConnected(rawNode)) {
-          DOMUtils.clearPseudoClassLocks(rawNode);
-        }
-      }
-    });
-
     this.selection.off("new-node-front", this.update);
     this.selection.off("pseudoclass", this.updateSelectors);
     this.selection.off("attribute-changed", this.updateSelectors);

browser/devtools/inspector/inspector-panel.js

@@ -483,7 +483,7 @@ InspectorPanel.prototype = {
       let menu = this.panelDoc.getElementById("node-menu-pseudo-" + name);
 
       if (this.selection.isElementNode()) {
-        let checked = DOMUtils.hasPseudoClassLock(this.selection.node, ":" + name);
+        let checked = this.selection.nodeFront.hasPseudoClassLock(":" + name);
         menu.setAttribute("checked", checked);
         menu.removeAttribute("disabled");
       } else {
@@ -580,34 +580,24 @@ InspectorPanel.prototype = {
    */
   togglePseudoClass: function InspectorPanel_togglePseudoClass(aPseudo) {
     if (this.selection.isElementNode()) {
-      if (DOMUtils.hasPseudoClassLock(this.selection.node, aPseudo)) {
-        this.breadcrumbs.nodeHierarchy.forEach(function(crumb) {
-          DOMUtils.removePseudoClassLock(crumb.node.rawNode(), aPseudo);
-        });
-      } else {
-        let hierarchical = aPseudo == ":hover" || aPseudo == ":active";
-        let node = this.selection.node;
-        do {
-          DOMUtils.addPseudoClassLock(node, aPseudo);
-          node = node.parentNode;
-        } while (hierarchical && node.parentNode)
+      let node = this.selection.nodeFront;
+      if (node.hasPseudoClassLock(aPseudo)) {
+        return this.walker.removePseudoClassLock(node, aPseudo, { parents: true });
       }
+
+      let hierarchical = aPseudo == ":hover" || aPseudo == ":active";
+      return this.walker.addPseudoClassLock(node, aPseudo, { parents: hierarchical });
     }
-    this.selection.emit("pseudoclass");
-    this.breadcrumbs.scroll();
   },
 
   /**
    * Clear any pseudo-class locks applied to the current hierarchy.
    */
   clearPseudoClasses: function InspectorPanel_clearPseudoClasses() {
-    this.breadcrumbs.nodeHierarchy.forEach(function(crumb) {
-      try {
-        DOMUtils.clearPseudoClassLocks(crumb.node.rawNode());
-      } catch(e) {
-       // Ignore dead nodes after navigation.
-      }
-    });
+    if (!this.walker) {
+      return;
+    }
+    return this.walker.clearPseudoClassLocks().then(null, console.error);
   },
 
   /**

browser/devtools/inspector/selection.js

@@ -73,6 +73,7 @@ Selection.prototype = {
 
   _onMutations: function(mutations) {
     let attributeChange = false;
+    let pseudoChange = false;
     let detached = false;
     let parentNode = null;
     for (let m of mutations) {
@@ -85,10 +86,15 @@ Selection.prototype = {
           detached = true;
         }
       }
+      if (m.type == "pseudoClassLock"){
+        pseudoChange = true;
+      }
     }
 
     if (attributeChange)
       this.emit("attribute-changed");
+    if (pseudoChange)
+      this.emit("pseudoclass");
     if (detached) {
       this.emit("detached", parentNode ? parentNode.rawNode() : null);
       this.emit("detached-front", parentNode);

browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js

@@ -51,16 +51,24 @@ function test() {
   {
     menu.removeEventListener("popupshowing", testMenuItems, true);
 
-    for each (let pseudo in pseudos) {
+    var tryNext = () => {
+      if (pseudos.length === 0) {
+        finishUp();
+        return;
+      }
+      let pseudo = pseudos.shift();
+
       let menuitem = inspector.panelDoc.getElementById("node-menu-pseudo-" + pseudo);
       ok(menuitem, ":" + pseudo + " menuitem exists");
 
       menuitem.doCommand();
-
-      is(DOMUtils.hasPseudoClassLock(div, ":" + pseudo), true,
-        "pseudo-class lock has been applied");
+      inspector.selection.once("pseudoclass", () => {
+        is(DOMUtils.hasPseudoClassLock(div, ":" + pseudo), true,
+          "pseudo-class lock has been applied");
+        tryNext();
+      });
     }
-    finishUp();
+    tryNext();
   }
 
   function finishUp()

browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js

@@ -64,20 +64,32 @@ function performTests()
   // toggle the class
   inspector.togglePseudoClass(pseudo);
 
-  testAdded();
+  // Wait for the "pseudoclass" event so we know the
+  // inspector has been told of the pseudoclass lock change.
+  inspector.selection.once("pseudoclass", () => {
+    // Give the rule view time to update.
+    executeSoon(() => {
+      testAdded();
 
-  // toggle the lock off
-  inspector.togglePseudoClass(pseudo);
+      // toggle the lock off and wait for the pseudoclass event again.
+      inspector.togglePseudoClass(pseudo);
+      inspector.selection.once("pseudoclass", () => {
+        // Give the rule view time to update.
+        executeSoon(() => {
+          testRemoved();
+          testRemovedFromUI();
 
-  testRemoved();
-  testRemovedFromUI();
-
-  // toggle it back on
-  inspector.togglePseudoClass(pseudo);
-
-  testNavigate(() => {
-   // close the inspector
-    finishUp();
+          // toggle it back on
+          inspector.togglePseudoClass(pseudo);
+          inspector.selection.once("pseudoclass", () => {
+            testNavigate(() => {
+              // close the inspector
+              finishUp();
+            });
+          });
+        });
+      });
+    });
   });
 }
 
@@ -91,9 +103,7 @@ function testNavigate(callback)
          "pseudo-class lock is still applied after inspecting ancestor");
 
     inspector.selection.setNode(div2);
-
-    inspector.once("inspector-updated", () => {
-
+    inspector.selection.once("pseudoclass", () => {
       // make sure it's removed after naving to a non-hierarchy node
       is(DOMUtils.hasPseudoClassLock(div, pseudo), false,
            "pseudo-class lock is removed after inspecting sibling node");
@@ -102,7 +112,9 @@ function testNavigate(callback)
       inspector.selection.setNode(div);
       inspector.once("inspector-updated", () => {
         inspector.togglePseudoClass(pseudo);
-        callback();
+        inspector.selection.once("pseudoclass", () => {
+          callback();
+        });
       });
     });
   });