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 322369 2e7b31d1d24343dfd0e73df4478a2c0e6afb3d5a
parent 322368 a01303a5f2bef7deeaa3248ead8d353b5c0eb041
child 322370 7ed370dd32f5c20a5ce2f3e1c7fc4a124cf6646d
push id30945
push usercbook@mozilla.com
push dateMon, 14 Nov 2016 09:22:29 +0000
treeherdermozilla-central@1196bf3032e1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbackout
bugs1205371
milestone52.0a1
backs outa01303a5f2bef7deeaa3248ead8d353b5c0eb041
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
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,