Backed out changeset 80fc4351eba3 (bug 1157293)

browser/devtools/styleinspector/rule-view.js

@@ -2136,7 +2136,7 @@ CssRuleView.prototype = {
       // Expand the computed list if a computed rule is highlighted and the
       // property rule is not highlighted
       if (!isPropertyHighlighted && isComputedHighlighted &&
-          !editor.computed.hasAttribute("user-open")) {
+          !editor.computed.classList.contains("user-open")) {
         editor.expandForFilter();
         this._editorsExpandedForFilter.push(editor);
       }
@@ -3048,19 +3048,19 @@ TextPropertyEditor.prototype = {
   /**
    * Handles clicks on the computed property expander. If the computed list is
    * open due to user expanding or style filtering, collapse the computed list
-   * and close the expander. Otherwise, add user-open attribute which is used to
+   * and close the expander. Otherwise, add .user-open class which is used to
    * expand the computed list and tracks whether or not the computed list is
    * expanded by manually by the user.
    */
   _onExpandClicked: function(aEvent) {
-    if (this.computed.hasAttribute("filter-open") ||
-        this.computed.hasAttribute("user-open")) {
+    if (this.computed.classList.contains("filter-open") ||
+        this.computed.classList.contains("user-open")) {
       this.expander.removeAttribute("open");
-      this.computed.removeAttribute("filter-open");
-      this.computed.removeAttribute("user-open");
+      this.computed.classList.remove("filter-open");
+      this.computed.classList.remove("user-open");
     } else {
       this.expander.setAttribute("open", "true");
-      this.computed.setAttribute("user-open", "");
+      this.computed.classList.add("user-open");
     }
 
     aEvent.stopPropagation();
@@ -3068,13 +3068,13 @@ TextPropertyEditor.prototype = {
 
   /**
    * Expands the computed list when a computed property is matched by the style
-   * filtering. The filter-open attribute is used to track whether or not the
+   * filtering. The .filter-open class is used to track whether or not the
    * computed list was toggled opened by the filter.
    */
   expandForFilter: function() {
-    if (!this.computed.hasAttribute("user-open")) {
+    if (!this.computed.classList.contains("user-open")) {
+      this.computed.classList.add("filter-open");
       this.expander.setAttribute("open", "true");
-      this.computed.setAttribute("filter-open", "");
     }
   },
 
@@ -3082,9 +3082,8 @@ TextPropertyEditor.prototype = {
    * Collapses the computed list that was expanded by style filtering.
    */
   collapseForFilter: function() {
-    this.computed.removeAttribute("filter-open");
-
-    if (!this.computed.hasAttribute("user-open")) {
+    this.computed.classList.remove("filter-open");
+    if (!this.computed.classList.contains("user-open")) {
       this.expander.removeAttribute("open");
     }
   },

browser/devtools/styleinspector/ruleview.css

@@ -56,13 +56,12 @@ body {
   cursor: pointer;
 }
 
-.ruleview-computedlist,
+.ruleview-computedlist:not(.user-open),
 .ruleview-warning[hidden] {
   display: none;
 }
 
-.ruleview-computedlist[user-open],
-.ruleview-computedlist[filter-open] {
+.ruleview-computedlist.filter-open {
   display: block;
 }
 

browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_01.js

@@ -52,7 +52,8 @@ function* testAddTextInFilter(inspector, ruleView) {
   ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
   ok(ruleEditor.container.classList.contains("ruleview-highlight"),
     "margin text property is correctly highlighted.");
-  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+  ok(!computed.classList.contains("filter-open"),
+    "margin computed list is closed.");
 
   ok(!computed.children[0].classList.contains("ruleview-highlight"),
     "margin-top computed property is not highlighted.");

browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_02.js

@@ -52,7 +52,8 @@ function* testAddTextInFilter(inspector, ruleView) {
   ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
   ok(ruleEditor.container.classList.contains("ruleview-highlight"),
     "margin text property is correctly highlighted.");
-  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+  ok(!computed.classList.contains("filter-open"),
+    "margin computed list is closed.");
 
   ok(computed.children[0].classList.contains("ruleview-highlight"),
     "margin-top computed property is correctly highlighted.");

browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_03.js

@@ -52,7 +52,8 @@ function* testAddTextInFilter(inspector, ruleView) {
   ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
   ok(!ruleEditor.container.classList.contains("ruleview-highlight"),
     "margin text property is not highlighted.");
-  ok(computed.hasAttribute("filter-open"), "margin computed list is open.");
+  ok(computed.classList.contains("filter-open"),
+    "margin computed list is open.");
 
   ok(computed.children[0].classList.contains("ruleview-highlight"),
     "margin-top computed property is not highlighted.");

browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_04.js

@@ -52,7 +52,8 @@ function* testAddTextInFilter(inspector, ruleView) {
   ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
   ok(ruleEditor.container.classList.contains("ruleview-highlight"),
     "margin text property is correctly highlighted.");
-  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+  ok(!computed.classList.contains("filter-open"),
+    "margin computed list is closed.");
 
   ok(computed.children[0].classList.contains("ruleview-highlight"),
     "margin-top computed property is correctly highlighted.");

browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_05.js

@@ -52,7 +52,8 @@ function* testAddTextInFilter(inspector, ruleView) {
   ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
   ok(!ruleEditor.container.classList.contains("ruleview-highlight"),
     "margin text property is not highlighted.");
-  ok(computed.hasAttribute("filter-open"), "margin computed list is open.");
+  ok(computed.classList.contains("filter-open"),
+    "margin computed list is open.");
 
   ok(computed.children[0].classList.contains("ruleview-highlight"),
     "margin-top computed property is correctly highlighted.");

browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_06.js

@@ -53,7 +53,8 @@ function* testAddTextInFilter(inspector, ruleView) {
   ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
   ok(!ruleEditor.container.classList.contains("ruleview-highlight"),
     "margin text property is not highlighted.");
-  ok(computed.hasAttribute("filter-open"), "margin computed list is open.");
+  ok(computed.classList.contains("filter-open"),
+    "margin computed list is open.");
 
   ok(computed.children[0].classList.contains("ruleview-highlight"),
     "margin-top computed property is correctly highlighted.");
@@ -89,7 +90,8 @@ function* testRemoveTextInFilter(inspector, ruleView) {
   ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
   ok(ruleEditor.container.classList.contains("ruleview-highlight"),
     "margin text property is correctly highlighted.");
-  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+  ok(!computed.classList.contains("filter-open"),
+    "margin computed list is closed.");
 
   ok(computed.children[0].classList.contains("ruleview-highlight"),
     "margin-top computed property is correctly highlighted.");

browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_clear.js

@@ -53,7 +53,8 @@ function* testAddTextInFilter(inspector, ruleView) {
   ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
   ok(ruleEditor.container.classList.contains("ruleview-highlight"),
     "margin text property is correctly highlighted.");
-  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+  ok(!computed.classList.contains("filter-open"),
+    "margin computed list is closed.");
 
   ok(!computed.children[0].classList.contains("ruleview-highlight"),
     "margin-top computed property is not highlighted.");
@@ -88,5 +89,6 @@ function* testClearSearchFilter(inspector, ruleView) {
   let computed = ruleEditor.computed;
 
   ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
-  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+  ok(!computed.classList.contains("filter-open"),
+    "margin computed list is closed.");
 }

browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_expander.js

@@ -54,10 +54,10 @@ function* testOpenExpanderAndAddTextInFilter(inspector, ruleView) {
   ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
   ok(ruleEditor.container.classList.contains("ruleview-highlight"),
     "margin text property is correctly highlighted.");
-  ok(!computed.hasAttribute("filter-open"),
+  ok(!computed.classList.contains("filter-open"),
     "margin computed list does not contain filter-open class.");
-  ok(computed.hasAttribute("user-open"),
-    "margin computed list contains user-open attribute.");
+  ok(computed.classList.contains("user-open"),
+    "margin computed list contains user-open class.");
 
   ok(!computed.children[0].classList.contains("ruleview-highlight"),
     "margin-top computed property is not highlighted.");
@@ -92,8 +92,8 @@ function* testClearSearchFilter(inspector, ruleView) {
   let computed = ruleEditor.computed;
 
   ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
-  ok(!computed.hasAttribute("filter-open"),
+  ok(!computed.classList.contains("filter-open"),
     "margin computed list does not contain filter-open class.");
-  ok(computed.hasAttribute("user-open"),
-    "margin computed list contains user-open attribute.");
+  ok(computed.classList.contains("user-open"),
+    "margin computed list contains user-open class.");
 }