Backed out changeset a01303a5f2be (bug 1205371) for failing devtools test browser_markup_void_elements_html.js. r=backout
authorSebastian Hengst <archaeopteryx@coole-files.de>
Sun, 13 Nov 2016 14:05:39 +0100
changeset 352414 2e7b31d1d24343dfd0e73df4478a2c0e6afb3d5a
parent 352413 a01303a5f2bef7deeaa3248ead8d353b5c0eb041
child 352415 7ed370dd32f5c20a5ce2f3e1c7fc4a124cf6646d
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-esr52@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbackout
bugs1205371
milestone52.0a1
backs outa01303a5f2bef7deeaa3248ead8d353b5c0eb041
Backed out changeset a01303a5f2be (bug 1205371) for failing devtools test browser_markup_void_elements_html.js. r=backout
devtools/client/animationinspector/test/browser_animation_pseudo_elements.js
devtools/client/inspector/markup/markup.xhtml
devtools/client/inspector/markup/test/browser_markup_dragdrop_invalidNodes.js
devtools/client/inspector/markup/views/markup-container.js
devtools/client/themes/markup.css
--- a/devtools/client/animationinspector/test/browser_animation_pseudo_elements.js
+++ b/devtools/client/animationinspector/test/browser_animation_pseudo_elements.js
@@ -23,17 +23,17 @@ add_task(function* () {
 
   is(getTargetNodeText(0), "body", "The first animated node is <body>");
   is(getTargetNodeText(1), "::before", "The second animated node is ::before");
   is(getTargetNodeText(2), "::after", "The third animated node is ::after");
 
   info("Getting the before and after nodeFronts");
   let bodyContainer = yield getContainerForSelector("body", inspector);
   let getBodyChildNodeFront = index => {
-    return bodyContainer.elt.children[2].childNodes[index].container.node;
+    return bodyContainer.elt.children[1].childNodes[index].container.node;
   };
   let beforeNode = getBodyChildNodeFront(0);
   let afterNode = getBodyChildNodeFront(1);
 
   info("Select the ::before pseudo-element in the inspector");
   yield selectNode(beforeNode, inspector);
   is(timeline.timeBlocks.length, 1, "There is 1 animation in the timeline");
   is(timeline.targetNodes[0].previewer.nodeFront,
--- a/devtools/client/inspector/markup/markup.xhtml
+++ b/devtools/client/inspector/markup/markup.xhtml
@@ -25,17 +25,16 @@
 
   <div id="root-wrapper" role="presentation">
     <div id="root" role="presentation"></div>
   </div>
   <div id="templates" style="display:none">
 
     <ul class="children">
       <li id="template-elementcontainer" save="${elt}" class="child collapsed" role="presentation">
-        <div class="pseudoclass-locked-container"></div>
         <div save="${tagLine}" id="${id}" class="tag-line" role="treeitem" aria-level="${level}" aria-grabbed="${isDragging}"><!--
         --><span save="${tagState}" class="tag-state" role="presentation"></span><!--
         --><span save="${expander}" class="theme-twisty expander" role="presentation"></span><!--
      --></div>
         <ul save="${children}" class="children" role="group"></ul>
       </li>
 
       <li id="template-textcontainer" save="${elt}" class="child collapsed" role="presentation">
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_invalidNodes.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_invalidNodes.js
@@ -16,33 +16,33 @@ add_task(function* () {
 
   info("Expanding nodes below #test");
   let parentFront = yield getNodeFront("#test", inspector);
   yield inspector.markup.expandNode(parentFront);
   yield waitForMultipleChildrenUpdates(inspector);
 
   info("Getting the ::before pseudo element and selecting it");
   let parentContainer = yield getContainerForNodeFront(parentFront, inspector);
-  let beforePseudo = parentContainer.elt.children[2].firstChild.container;
+  let beforePseudo = parentContainer.elt.children[1].firstChild.container;
   parentContainer.elt.scrollIntoView(true);
   yield selectNode(beforePseudo.node, inspector);
 
   info("Simulate dragging the ::before pseudo element");
   yield simulateNodeDrag(inspector, beforePseudo);
 
   ok(!beforePseudo.isDragging, "::before pseudo element isn't dragging");
 
   info("Expanding nodes below #anonymousParent");
   let inputFront = yield getNodeFront("#anonymousParent", inspector);
   yield inspector.markup.expandNode(inputFront);
   yield waitForMultipleChildrenUpdates(inspector);
 
   info("Getting the anonymous node and selecting it");
   let inputContainer = yield getContainerForNodeFront(inputFront, inspector);
-  let anonymousDiv = inputContainer.elt.children[2].firstChild.container;
+  let anonymousDiv = inputContainer.elt.children[1].firstChild.container;
   inputContainer.elt.scrollIntoView(true);
   yield selectNode(anonymousDiv.node, inspector);
 
   info("Simulate dragging the anonymous node");
   yield simulateNodeDrag(inspector, anonymousDiv);
 
   ok(!anonymousDiv.isDragging, "anonymous node isn't dragging");
 });
--- a/devtools/client/inspector/markup/views/markup-container.js
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -645,41 +645,20 @@ MarkupContainer.prototype = {
     }
   },
 
   /**
    * Update the container's editor to the current state of the
    * viewed node.
    */
   update: function () {
-    this.elt.classList.remove("pseudoclass-hover");
-    this.elt.classList.remove("pseudoclass-active");
-    this.elt.classList.remove("pseudoclass-focus");
-    this.elt.removeAttribute("pseudoclass-count");
-
-    let {pseudoClassLocks} = this.node;
-
-    if (pseudoClassLocks.length) {
-      for (let state of pseudoClassLocks) {
-        switch (state) {
-          case ":hover":
-            this.elt.classList.add("pseudoclass-hover");
-            break;
-          case ":active":
-            this.elt.classList.add("pseudoclass-active");
-            break;
-          case ":focus":
-            this.elt.classList.add("pseudoclass-focus");
-            break;
-        }
-      }
-      this.elt.setAttribute("pseudoclass-count", pseudoClassLocks.length);
+    if (this.node.pseudoClassLocks.length) {
+      this.elt.classList.add("pseudoclass-locked");
     } else {
       this.elt.classList.remove("pseudoclass-locked");
-      this.elt.removeAttribute("pseudoclass-count");
     }
 
     if (this.editor.update) {
       this.editor.update();
     }
   },
 
   /**
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -1,22 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   --markup-outline: var(--theme-splitter-color);
-
-  /* Pseudo-class lock indicators */
-  --hover-pseudo-background: var(--theme-highlight-red);
-  --active-pseudo-background: var(--theme-highlight-green);
-  --focus-pseudo-background: var(--theme-highlight-blue);
 }
 
-
 .theme-dark:root {
   --markup-outline: var(--theme-highlight-pink);
 }
 
 * {
   padding: 0;
   margin: 0;
 }
@@ -275,98 +269,30 @@ ul.children + .tag-line::before {
 .more-nodes {
   padding-left: 16px;
 }
 
 .styleinspector-propertyeditor {
   border: 1px solid #CCC;
 }
 
-/* Markup view elements with pseudo-class locks */
-
-.child:not([pseudoclass-count]) > .pseudoclass-locked-container {
-  display: none;
-}
-
 /* Draw a circle next to nodes that have a pseudo class lock.
    Center vertically with the 1.4em line height on .tag-line */
-.child[pseudoclass-count] > .pseudoclass-locked-container {
+.child.pseudoclass-locked::before {
+  content: "";
+  background: var(--theme-highlight-lightorange);
   border-radius: 50%;
   width: .8em;
   height: .8em;
-  margin-top: .2em;
+  margin-top: .3em;
   left: 1px;
-  overflow: hidden;
   position: absolute;
   z-index: 1;
 }
 
-/* 1 pseudo-class lock */
-.child[pseudoclass-count="1"].pseudoclass-hover > .pseudoclass-locked-container {
-  background: var(--hover-pseudo-background);
-}
-
-.child[pseudoclass-count="1"].pseudoclass-active > .pseudoclass-locked-container {
-  background: var(--active-pseudo-background);
-}
-
-.child[pseudoclass-count="1"].pseudoclass-focus > .pseudoclass-locked-container {
-  background: var(--focus-pseudo-background);
-}
-
-/* 2 pseudo-class locks */
-.child[pseudoclass-count="2"] > .pseudoclass-locked-container::before,
-.child[pseudoclass-count="2"] > .pseudoclass-locked-container::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: var(--active-pseudo-background);
-}
-
-.child[pseudoclass-count="2"] > .pseudoclass-locked-container::after {
-  transform: rotate(45deg) translate(50%);
-}
-
-/* Colors for active lock are already on before/after, now let hover/focus override appropriately */
-.child[pseudoclass-count="2"].pseudoclass-hover > .pseudoclass-locked-container::before {
-  background: var(--hover-pseudo-background);
-}
-
-.child[pseudoclass-count="2"].pseudoclass-focus > .pseudoclass-locked-container::after {
-  background: var(--focus-pseudo-background);
-}
-
-/* 3 pseudo-class locks */
-.child[pseudoclass-count="3"] > .pseudoclass-locked-container {
-  background: var(--hover-pseudo-background);
-}
-
-.child[pseudoclass-count="3"] > .pseudoclass-locked-container::before,
-.child[pseudoclass-count="3"] > .pseudoclass-locked-container::after {
-  content: "";
-  display: block;
-  width: 0.53333em;
-  height: 0.47059em;
-}
-
-.child[pseudoclass-count="3"] > .pseudoclass-locked-container::before {
-  transform: rotate(90deg) skew(30deg);
-  margin-left: -0.10429em;
-  margin-top: 0.05em;
-  background: var(--active-pseudo-background);
-}
-
-.child[pseudoclass-count="3"] > .pseudoclass-locked-container::after {
-  transform: rotate(30deg) skew(30deg);
-  margin-left: 0.35783em;
-  margin-top: -0.47em;
-  background: var(--focus-pseudo-background);
-}
-
 /* Firebug Theme */
 
 .theme-firebug .theme-fg-color3 {
   color: var(--theme-graphs-full-blue);
 }
 
 .theme-firebug .open,
 .theme-firebug .close,