Bug 1127572 - Fade item in the markup view when that element is hidden with "H". r=jdescottes
authormoby <mvonbriesen@mozilla.com>
Wed, 25 May 2016 11:12:00 -0400
changeset 338088 4f75d0cc90d12974b5b2b487bd63f17626f9e20d
parent 338087 1a8b7c916dafe6c7c86759da2fa41c8040734224
child 338089 25566a14a7ac98674bfe9b6e73edc59fcc286c22
push id6249
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 13:59:36 +0000
treeherdermozilla-beta@bad9d4f5bf7e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1127572
milestone49.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1127572 - Fade item in the markup view when that element is hidden with "H". r=jdescottes
devtools/client/inspector/markup/markup.js
devtools/client/inspector/markup/test/browser_markup_node_not_displayed_01.js
devtools/client/inspector/markup/test/doc_markup_not_displayed.html
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -970,16 +970,20 @@ MarkupView.prototype = {
       }
 
       let container = this.getContainer(target);
       if (!container) {
         // Container might not exist if this came from a load event for a node
         // we're not viewing.
         continue;
       }
+
+      if (type === "attributes" && mutation.attributeName === "class") {
+        container.updateIsDisplayed();
+      }
       if (type === "attributes" || type === "characterData"
         || type === "events" || type === "pseudoClassLock") {
         container.update();
       } else if (type === "childList" || type === "nativeAnonymousChildList") {
         container.childrenDirty = true;
         // Update the children to take care of changes in the markup view DOM
         // and update container (and its subtree) DOM tree depth level for
         // accessibility where necessary.
@@ -1008,17 +1012,17 @@ MarkupView.prototype = {
    *
    * @param  {Array} nodes
    *         An array of nodeFronts
    */
   _onDisplayChange: function (nodes) {
     for (let node of nodes) {
       let container = this.getContainer(node);
       if (container) {
-        container.isDisplayed = node.isDisplayed;
+        container.updateIsDisplayed();
       }
     }
   },
 
   /**
    * Given a list of mutations returned by the mutation observer, flash the
    * corresponding containers to attract attention.
    */
@@ -1886,17 +1890,17 @@ MarkupContainer.prototype = {
     this.win.addEventListener("mouseup", this._onMouseUp, true);
     this.win.addEventListener("mousemove", this._onMouseMove, true);
     this.elt.addEventListener("dblclick", this._onToggle, false);
     if (this.expander) {
       this.expander.addEventListener("click", this._onToggle, false);
     }
 
     // Marking the node as shown or hidden
-    this.isDisplayed = this.node.isDisplayed;
+    this.updateIsDisplayed();
   },
 
   toString: function () {
     return "[MarkupContainer for " + this.node + "]";
   },
 
   isPreviewable: function () {
     if (this.node.tagName && !this.node.isPseudoElement) {
@@ -1907,21 +1911,24 @@ MarkupContainer.prototype = {
 
       return isImage || isCanvas;
     }
 
     return false;
   },
 
   /**
-   * Show the element has displayed or not.
+   * Show whether the element is displayed or not
+   * If an element has the attribute `display: none` or has been hidden with
+   * the H key, it is not displayed (faded in markup view).
+   * Otherwise, it is displayed.
    */
-  set isDisplayed(isDisplayed) {
+  updateIsDisplayed: function () {
     this.elt.classList.remove("not-displayed");
-    if (!isDisplayed) {
+    if (!this.node.isDisplayed || this.node.hidden) {
       this.elt.classList.add("not-displayed");
     }
   },
 
   /**
    * True if the current node has children. The MarkupView
    * will set this attribute for the MarkupContainer.
    */
--- a/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_01.js
@@ -13,17 +13,18 @@
 // testing children nodes.
 
 const TEST_URL = URL_ROOT + "doc_markup_not_displayed.html";
 const TEST_DATA = [
   {selector: "#normal-div", isDisplayed: true},
   {selector: "head", isDisplayed: false},
   {selector: "#display-none", isDisplayed: false},
   {selector: "#hidden-true", isDisplayed: false},
-  {selector: "#visibility-hidden", isDisplayed: true}
+  {selector: "#visibility-hidden", isDisplayed: true},
+  {selector: "#hidden-via-hide-shortcut", isDisplayed: false},
 ];
 
 add_task(function* () {
   let {inspector} = yield openInspectorForURL(TEST_URL);
 
   for (let {selector, isDisplayed} of TEST_DATA) {
     info("Getting node " + selector);
     let nodeFront = yield getNodeFront(selector, inspector);
--- a/devtools/client/inspector/markup/test/doc_markup_not_displayed.html
+++ b/devtools/client/inspector/markup/test/doc_markup_not_displayed.html
@@ -6,12 +6,13 @@
       display: none;
     }
   </style>
 </head>
 <body>
   <div id="normal-div"></div>
   <div id="display-none" style="display:none;"></div>
   <div id="hidden-true" hidden="true"></div>
+  <div id="hidden-via-hide-shortcut" class="__fx-devtools-hide-shortcut__"></div>
   <div id="visibility-hidden" style="visibility:hidden;"></div>
   <div id="hidden-via-stylesheet"></div>
 </body>
-</html>
\ No newline at end of file
+</html>