Bug 1192421 - Part 2: Make the rule-view non-interactive while loading and hide it after a delay. r=pbrosset

browser/devtools/styleinspector/rule-view.js

@@ -1168,6 +1168,7 @@ function CssRuleView(inspector, document, store, pageStyle) {
 
   this._outputParser = new OutputParser(document);
 
+  this._onKeydown = this._onKeydown.bind(this);
   this._onKeypress = this._onKeypress.bind(this);
   this._onAddRule = this._onAddRule.bind(this);
   this._onContextMenu = this._onContextMenu.bind(this);
@@ -1193,6 +1194,7 @@ function CssRuleView(inspector, document, store, pageStyle) {
 
   this.searchClearButton.hidden = true;
 
+  this.styleDocument.addEventListener("keydown", this._onKeydown);
   this.styleDocument.addEventListener("keypress", this._onKeypress);
   this.element.addEventListener("copy", this._onCopy);
   this.element.addEventListener("contextmenu", this._onContextMenu);
@@ -1727,6 +1729,8 @@ CssRuleView.prototype = {
     this.highlighters.destroy();
 
     // Remove bound listeners
+    this.styleDocument.removeEventListener("keydown", this._onKeydown);
+    this.styleDocument.removeEventListener("keypress", this._onKeypress);
     this.element.removeEventListener("copy", this._onCopy);
     this.element.removeEventListener("contextmenu", this._onContextMenu);
     this.addRuleButton.removeEventListener("click", this._onAddRule);
@@ -1764,6 +1768,22 @@ CssRuleView.prototype = {
     this.popup.destroy();
   },
 
+  /**
+   * Mark the view as selecting an element, disabling all interaction, and
+   * visually clearing the view after a few milliseconds to avoid confusion
+   * about which element's styles the rule view shows.
+   */
+  _startSelectingElement: function() {
+    this.element.classList.add("non-interactive");
+  },
+
+  /**
+   * Mark the view as no longer selecting an element, re-enabling interaction.
+   */
+  _stopSelectingElement: function() {
+    this.element.classList.remove("non-interactive");
+  },
+
   /**
    * Update the view with a new selected element.
    *
@@ -1789,30 +1809,38 @@ CssRuleView.prototype = {
     this.refreshAddRuleButtonState();
 
     if (!this._viewedElement) {
+      this._stopSelectingElement();
       this._clearRules();
       this._showEmpty();
       this.refreshPseudoClassPanel();
       return promise.resolve(undefined);
     }
 
-    this._elementStyle = new ElementStyle(element, this.store,
+    let elementStyle = new ElementStyle(element, this.store,
       this.pageStyle, this.showUserAgentStyles);
+    this._elementStyle = elementStyle;
+
+    this._startSelectingElement();
 
     return this._elementStyle.init().then(() => {
-      if (this._viewedElement === element) {
+      if (this._elementStyle === elementStyle) {
         return this._populate();
       }
     }).then(() => {
-      if (this._viewedElement === element) {
+      if (this._elementStyle === elementStyle) {
         if (!refresh) {
           this.element.scrollTop = 0;
         }
+        this._stopSelectingElement();
         this._elementStyle.onChanged = () => {
           this._changed();
         };
       }
     }).then(null, e => {
+      if (this._elementStyle === elementStyle) {
+        this._stopSelectingElement();
         this._clearRules();
+      }
       console.error(e);
     });
   },
@@ -2406,6 +2434,16 @@ CssRuleView.prototype = {
     this.inspector.togglePseudoClass(target.value);
   },
 
+  /**
+   * Handle the keydown event in the rule view.
+   */
+  _onKeydown: function(event) {
+    if (this.element.classList.contains("non-interactive") &&
+        (event.code === "Enter" || event.code === " ")) {
+      event.preventDefault();
+    }
+  },
+
   /**
    * Handle the keypress event in the rule view.
    */

browser/devtools/styleinspector/ruleview.css

@@ -24,6 +24,12 @@ body {
   flex: 1;
 }
 
+#ruleview-container.non-interactive {
+  pointer-events: none;
+  visibility: collapse;
+  transition: visibility 0.25s;
+}
+
 .devtools-toolbar {
   width: 100%;
   display: flex;