Bug 672748 - Style inspector UI refresh; r=dcamp,msucan,rcampbell,dao

browser/devtools/styleinspector/CssHtmlTree.jsm

@@ -140,13 +140,16 @@ CssHtmlTree.prototype = {
 
   // The search filter
   searchField: null,
-  
+
   // Reference to the "Only user Styles" checkbox.
   onlyUserStylesCheckbox: null,
 
   // Holds the ID of the panelRefresh timeout.
   _panelRefreshTimeout: null,
 
+  // Toggle for zebra striping
+  _darkStripe: true,
+
   get showOnlyUserStyles()
   {
     return this.onlyUserStylesCheckbox.checked;
@@ -185,8 +188,7 @@ CssHtmlTree.prototype = {
             let propView = new PropertyView(this, name);
             CssHtmlTree.processTemplate(this.templateProperty,
               this.propertyContainer, propView, true);
-            propView.refreshMatchedSelectors();
-            propView.refreshUnmatchedSelectors();
+            propView.refreshAllSelectors();
             this.propertyViews.push(propView);
           }
           if (i < max) {
@@ -210,6 +212,9 @@ CssHtmlTree.prototype = {
   {
     this.win.clearTimeout(this._panelRefreshTimeout);
 
+    // Reset zebra striping.
+    this._darkStripe = true;
+
     // We use a setTimeout loop to display the properties in batches of 15 at a
     // time. This results in a perceptibly more responsive UI.
     let i = 0;
@@ -253,7 +258,6 @@ CssHtmlTree.prototype = {
   filterChanged: function CssHtmlTree_filterChanged(aEvent)
   {
     let win = this.styleWin.contentWindow;
-
     if (this.filterChangedTimeout) {
       win.clearTimeout(this.filterChangedTimeout);
       this.filterChangeTimeout = null;
@@ -329,10 +333,14 @@ CssHtmlTree.prototype = {
   {
     delete this.viewedElement;
 
+    // Remove event listeners
+    this.onlyUserStylesCheckbox.removeEventListener("command",
+      this.onlyUserStylesChanged);
+    this.searchField.removeEventListener("command", this.filterChanged);
+
     // Nodes used in templating
     delete this.root;
     delete this.path;
-    delete this.templateRoot;
     delete this.templatePath;
     delete this.propertyContainer;
     delete this.templateProperty;
@@ -375,6 +383,9 @@ PropertyView.prototype = {
   // The parent element which contains the open attribute
   element: null,
 
+  // Property header node
+  propertyHeader: null,
+
   // Destination for property values
   valueNode: null,
 
@@ -384,29 +395,23 @@ PropertyView.prototype = {
   // Are unmatched rules expanded?
   unmatchedExpanded: false,
 
+  // Unmatched selector table
+  unmatchedSelectorTable: null,
+
   // Matched selector container
   matchedSelectorsContainer: null,
 
-  // Unmatched selector container
-  unmatchedSelectorsContainer: null,
-
   // Matched selector expando
   matchedExpander: null,
 
   // Unmatched selector expando
   unmatchedExpander: null,
 
-  // Container for X matched selectors
-  matchedSelectorsTitleNode: null,
+  // Unmatched selector container
+  unmatchedSelectorsContainer: null,
 
-  // Container for X unmatched selectors
-  unmatchedSelectorsTitleNode: null,
-
-  // Matched selectors table
-  matchedSelectorTable: null,
-
-  // Unmatched selectors table
-  unmatchedSelectorTable: null,
+  // Unmatched title block
+  unmatchedTitleBlock: null,
 
   // Cache for matched selector views
   _matchedSelectorViews: null,
@@ -472,10 +477,18 @@ PropertyView.prototype = {
 
   /**
    * Returns the className that should be assigned to the propertyView.
+   *
+   * @return string
    */
   get className()
   {
-    return this.visible ? "property-view" : "property-view-hidden";
+    if (this.visible) {
+      this.tree._darkStripe = !this.tree._darkStripe;
+      let darkValue = this.tree._darkStripe ?
+                      "property-view darkrow" : "property-view";
+      return darkValue;
+    }
+    return "property-view-hidden";
   },
 
   /**
@@ -495,17 +508,15 @@ PropertyView.prototype = {
       this.valueNode.innerHTML = "";
       this.matchedSelectorsContainer.hidden = true;
       this.unmatchedSelectorsContainer.hidden = true;
-      this.matchedSelectorTable.innerHTML = "";
       this.unmatchedSelectorTable.innerHTML = "";
+      this.matchedSelectorsContainer.innerHTML = "";
       this.matchedExpander.removeAttribute("open");
       this.unmatchedExpander.removeAttribute("open");
       return;
     }
 
     this.valueNode.innerHTML = this.propertyInfo.value;
-    
-    this.refreshMatchedSelectors();
-    this.refreshUnmatchedSelectors();
+    this.refreshAllSelectors();
   },
 
   /**
@@ -516,12 +527,18 @@ PropertyView.prototype = {
     let hasMatchedSelectors = this.hasMatchedSelectors;
     this.matchedSelectorsContainer.hidden = !hasMatchedSelectors;
 
+    if (hasMatchedSelectors || this.hasUnmatchedSelectors) {
+      this.propertyHeader.classList.add("expandable");
+    } else {
+      this.propertyHeader.classList.remove("expandable");
+    }
+
     if (this.matchedExpanded && hasMatchedSelectors) {
       CssHtmlTree.processTemplate(this.templateMatchedSelectors,
-        this.matchedSelectorTable, this);
+        this.matchedSelectorsContainer, this);
       this.matchedExpander.setAttribute("open", "");
     } else {
-      this.matchedSelectorTable.innerHTML = "";
+      this.matchedSelectorsContainer.innerHTML = "";
       this.matchedExpander.removeAttribute("open");
     }
   },
@@ -531,17 +548,45 @@ PropertyView.prototype = {
    */
   refreshUnmatchedSelectors: function PropertyView_refreshUnmatchedSelectors()
   {
-    let hasUnmatchedSelectors = this.hasUnmatchedSelectors;
-    this.unmatchedSelectorsContainer.hidden = !hasUnmatchedSelectors;
+    let hasMatchedSelectors = this.hasMatchedSelectors;
 
-    if (this.unmatchedExpanded && hasUnmatchedSelectors) {
-      CssHtmlTree.processTemplate(this.templateUnmatchedSelectors,
-          this.unmatchedSelectorTable, this);
-      this.unmatchedExpander.setAttribute("open", "");
+    this.unmatchedSelectorTable.hidden = !this.unmatchedExpanded;
+
+    if (hasMatchedSelectors) {
+      this.unmatchedSelectorsContainer.hidden = !this.matchedExpanded ||
+        !this.hasUnmatchedSelectors;
+      this.unmatchedTitleBlock.hidden = false;
     } else {
-      this.unmatchedSelectorTable.innerHTML = "";
-      this.unmatchedExpander.removeAttribute("open");
+      this.unmatchedSelectorsContainer.hidden = !this.unmatchedExpanded;
+      this.unmatchedTitleBlock.hidden = true;
     }
+
+    if (this.unmatchedExpanded && this.hasUnmatchedSelectors) {
+      CssHtmlTree.processTemplate(this.templateUnmatchedSelectors,
+        this.unmatchedSelectorTable, this);
+      if (!hasMatchedSelectors) {
+        this.matchedExpander.setAttribute("open", "");
+        this.unmatchedSelectorTable.classList.add("only-unmatched");
+      } else {
+        this.unmatchedExpander.setAttribute("open", "");
+        this.unmatchedSelectorTable.classList.remove("only-unmatched");
+      }
+    } else {
+      if (!hasMatchedSelectors) {
+        this.matchedExpander.removeAttribute("open");
+      }
+      this.unmatchedExpander.removeAttribute("open");
+      this.unmatchedSelectorTable.innerHTML = "";
+    }
+  },
+
+  /**
+   * Refresh the panel matched and unmatched rules
+   */
+  refreshAllSelectors: function PropertyView_refreshAllSelectors()
+  {
+    this.refreshMatchedSelectors();
+    this.refreshUnmatchedSelectors();
   },
 
   /**
@@ -580,12 +625,21 @@ PropertyView.prototype = {
 
   /**
    * The action when a user expands matched selectors.
+   *
+   * @param {Event} aEvent Used to determine the class name of the targets click
+   * event. If the class name is "helplink" then the event is allowed to bubble
+   * to the mdn link icon.
    */
-  matchedSelectorsClick: function PropertyView_matchedSelectorsClick(aEvent)
+  propertyHeaderClick: function PropertyView_propertyHeaderClick(aEvent)
   {
-    this.matchedExpanded = !this.matchedExpanded;
-    this.refreshMatchedSelectors();
-    aEvent.preventDefault();
+    if (aEvent.target.className != "helplink") {
+      this.matchedExpanded = !this.matchedExpanded;
+      if (!this.hasMatchedSelectors && this.hasUnmatchedSelectors) {
+        this.unmatchedExpanded = !this.unmatchedExpanded;
+      }
+      this.refreshAllSelectors();
+      aEvent.preventDefault();
+    }
   },
 
   /**
@@ -597,6 +651,15 @@ PropertyView.prototype = {
     this.refreshUnmatchedSelectors();
     aEvent.preventDefault();
   },
+
+  /**
+   * The action when a user clicks on the MDN help link for a property.
+   */
+  mdnLinkClick: function PropertyView_mdnLinkClick(aEvent)
+  {
+    this.tree.win.openUILinkIn(this.link, "tab");
+    aEvent.preventDefault();
+  },
 };
 
 /**

browser/devtools/styleinspector/StyleInspector.jsm

@@ -152,10 +152,6 @@ StyleInspector.prototype = {
     panel.setAttribute("width", 350);
     panel.setAttribute("height", this.window.screen.height / 2);
 
-    let vbox = this.document.createElement("vbox");
-    vbox.setAttribute("flex", "1");
-    panel.appendChild(vbox);
-
     let iframe = this.document.createElement("iframe");
     let boundIframeOnLoad = function loadedInitializeIframe()
     {
@@ -165,24 +161,12 @@ StyleInspector.prototype = {
         aCallback(this);
     }.bind(this);
 
-    iframe.setAttribute("flex", "1");
+    iframe.flex = 1;
     iframe.setAttribute("tooltip", "aHTMLTooltip");
     iframe.addEventListener("load", boundIframeOnLoad, true);
     iframe.setAttribute("src", "chrome://browser/content/csshtmltree.xhtml");
 
-    vbox.appendChild(iframe);
-
-    let hbox = this.document.createElement("hbox");
-    hbox.setAttribute("class", "resizerbox");
-    vbox.appendChild(hbox);
-
-    let spacer = this.document.createElement("spacer");
-    spacer.setAttribute("flex", "1");
-    hbox.appendChild(spacer);
-
-    let resizer = this.document.createElement("resizer");
-    resizer.setAttribute("dir", "bottomend");
-    hbox.appendChild(resizer);
+    panel.appendChild(iframe);
     popupSet.appendChild(panel);
 
     this._boundPopupShown = this.popupShown.bind(this);

browser/devtools/styleinspector/csshtmltree.xhtml

@@ -53,7 +53,7 @@
    -
    - ***** END LICENSE BLOCK ***** -->
 <html xmlns="http://www.w3.org/1999/xhtml"
-  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <head>
   <meta http-equiv="Content-Type"
     content="application/xhtml+xml; charset=UTF-8" />
@@ -63,8 +63,7 @@
 <body role="application">
 
 <!-- The output from #templateRoot (below) is inserted here. -->
-<div id="root">
-</div>
+<div id="root"></div>
 
 <!-- The output from #templatePath (below) is inserted here. -->
 <div id="path">
@@ -74,6 +73,14 @@
 <div id="propertyContainer">
 </div>
 
+<xul:hbox id="footer">
+  <xul:label class="legendKey bestmatch">&bestMatch;</xul:label>
+  <xul:label class="legendKey matched">&matched;</xul:label>
+  <xul:label class="legendKey parentmatch">&parentMatch;</xul:label>
+  <xul:label class="legendKey unmatched">&unmatched;</xul:label>
+  <xul:spacer flex="1"/>
+  <xul:resizer dir="bottomright"/>
+</xul:hbox>
 <!--
 To visually debug the templates without running firefox, alter the display:none
 -->
@@ -83,15 +90,16 @@ To visually debug the templates without running firefox, alter the display:none
   styles" checkbox. For data it needs an instance of CssHtmlTree.
   -->
   <div id="templateRoot">
-    <div class="filters">
+    <xul:hbox class="header" flex="1">
       <label class="userStylesLabel" dir="${getRTLAttr}">
+        <input class="onlyuserstyles" save="${onlyUserStylesCheckbox}"
+               type="checkbox" onchange="${onlyUserStylesChanged}" checked=""/>
         &userStylesLabel;
-        <input class="userStyles" save="${onlyUserStylesCheckbox}" type="checkbox"
-               onchange="${onlyUserStylesChanged}" checked=""/>
       </label>
-      <input save="${searchField}" class="searchfield" type="text"
-             oninput="${filterChanged}"/>
-    </div>
+      <xul:textbox class="searchfield" type="search" save="${searchField}"
+                    placeholder="&userStylesSearch;"
+                    oncommand="${filterChanged}"/>
+    </xul:hbox>
   </div>
 
   <!--
@@ -99,16 +107,17 @@ To visually debug the templates without running firefox, alter the display:none
   at. For data it needs an instance of CssHtmlTree.
   -->
   <div id="templatePath">
-    <p class="path">
-      <label dir="${getRTLAttr}">&lookingAtLabel;</label>
-      <ol>
-        <li foreach="item in ${pathElements}" dir="${getRTLAttr}">
-          <a href="#" onclick="${pathClick}" __pathElement="${item.element}">
-            ${__element.pathElement = item.element; item.display}
-          </a>
-        </li>
-      </ol>
-    </p>
+    <span class="selectedElementLabel" dir="${getRTLAttr}">
+      &selectedElementLabel;
+    </span>
+    <!-- following broken in RTL mode, see bug 699900 -->
+    <ol>
+      <li foreach="item in ${pathElements}" dir="${getRTLAttr}">
+        <a href="#" onclick="${pathClick}" __pathElement="${item.element}">
+          ${__element.pathElement = item.element; item.display}
+        </a>
+      </li>
+    </ol>
   </div>
 
   <!--
@@ -119,28 +128,28 @@ To visually debug the templates without running firefox, alter the display:none
   -->
   <div id="templateProperty">
     <div class="${className}" save="${element}" dir="${getRTLAttr}">
-      <div class="property-header">
-        <div class="property-name" dir="${getRTLAttr}">
-          <a class="link" target="_blank" title="&helpLinkTitle;"
-              href="${link}">${name}</a>
+      <div class="property-header" save="${propertyHeader}"
+           onclick="${propertyHeaderClick}">
+        <div save="${matchedExpander}" class="match expander" dir="${getRTLAttr}"></div>
+        <div class="property-name" dir="${getRTLAttr}">${name}</div>
+        <div class="helplink-container">
+          <a href="${link}" class="helplink" title="&helpLinkTitle;" onclick="${mdnLinkClick}">
+            &helpLinkTitle;
+          </a>
         </div>
         <div save="${valueNode}" class="property-value" dir="ltr">${value}</div>
       </div>
 
       <div save="${matchedSelectorsContainer}" class="rulelink" dir="${getRTLAttr}">
-        <div onclick="${matchedSelectorsClick}" class="rule-matched">
-          <div save="${matchedExpander}" class="expander"></div>
-          <div save="${matchedSelectorsTitleNode}">&matchedSelectors;</div>
-        </div>
-        <table save="${matchedSelectorTable}" dir="${getRTLAttr}"></table>
       </div>
-
       <div save="${unmatchedSelectorsContainer}" class="rulelink" dir="${getRTLAttr}">
-        <div onclick="${unmatchedSelectorsClick}" class="rule-unmatched">
-          <div save="${unmatchedExpander}" class="expander"></div>
+        <div save="${unmatchedTitleBlock}" onclick="${unmatchedSelectorsClick}"
+             class="rule-unmatched">
+          <div save="${unmatchedExpander}" class="expander" dir="${getRTLAttr}"></div>
           <div save="${unmatchedSelectorsTitleNode}">&unmatchedSelectors;</div>
         </div>
-        <table save="${unmatchedSelectorTable}" dir="${getRTLAttr}"></table>
+        <div save="${unmatchedSelectorTable}" class="unmatchedSelectorTable"
+             dir="${getRTLAttr}"></div>
       </div>
     </div>
   </div>
@@ -172,7 +181,7 @@ To visually debug the templates without running firefox, alter the display:none
 
   <!--
   A templateUnmatchedSelectors sits inside each templateProperties showing the
-  list of selectors that fail to affect that property. Each needs data like this:
+  list of selectors that do not affect that property. Each needs data like this:
   {
     unmatchedSelectorViews: ..., // from cssHtmlTree.propertyViews[name].unmatchedSelectorViews
   }
@@ -183,7 +192,7 @@ To visually debug the templates without running firefox, alter the display:none
     <table>
       <loop foreach="selector in ${unmatchedSelectorViews}">
         <tr>
-          <td dir="ltr" class="rule-text unmatched">
+          <td dir="ltr" class="rule-text ${selector.statusClass}">
             ${selector.humanReadableText(__element)}
           </td>
           <td class="rule-link">

browser/devtools/styleinspector/test/browser/browser_bug_692400_element_style.js

@@ -44,7 +44,7 @@ function SI_checkText()
   propertyView.matchedExpanded = true;
   propertyView.refreshMatchedSelectors();
 
-  let td = propertyView.matchedSelectorTable.querySelector("td.rule-text");
+  let td = propertyView.matchedSelectorsContainer.querySelector("td.rule-text");
   ok(td, "found the first table row");
 
   let selector = propertyView.matchedSelectorViews[0];

browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_672744_search_filter.js

@@ -52,8 +52,9 @@ function SI_toggleDefaultStyles()
   Services.obs.removeObserver(SI_toggleDefaultStyles, "StyleInspector-populated", false);
 
   info("clearing \"only user styles\" checkbox");
+
   let iframe = stylePanel.iframe;
-  let checkbox = iframe.contentDocument.querySelector(".userStyles");
+  let checkbox = iframe.contentDocument.querySelector(".onlyuserstyles");
   Services.obs.addObserver(SI_AddFilterText, "StyleInspector-populated", false);
   EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
 }
@@ -64,7 +65,6 @@ function SI_AddFilterText()
 
   let iframe = stylePanel.iframe;
   let searchbar = iframe.contentDocument.querySelector(".searchfield");
-
   Services.obs.addObserver(SI_checkFilter, "StyleInspector-populated", false);
   info("setting filter text to \"color\"");
   searchbar.focus();

browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_672746_default_styles.js

@@ -62,7 +62,7 @@ function SI_toggleDefaultStyles()
 {
   // Click on the checkbox.
   let iframe = stylePanel.iframe;
-  let checkbox = iframe.contentDocument.querySelector(".userStyles");
+  let checkbox = iframe.contentDocument.querySelector(".onlyuserstyles");
   Services.obs.addObserver(SI_checkDefaultStyles, "StyleInspector-populated", false);
   EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
 }
@@ -86,7 +86,7 @@ function propertyVisible(aName)
   let propertyViews = stylePanel.cssHtmlTree.propertyViews;
   for each (let propView in propertyViews) {
     if (propView.name == aName) {
-      return propView.className == "property-view";
+      return propView.visible;
     }
   }
 }

browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd

@@ -3,10 +3,14 @@
   -  should be displayed or not. -->
 <!ENTITY userStylesLabel    "Only user styles">
 
-<!-- LOCALIZATION NOTE (lookingAtLabel): This is the label for the path of
+<!-- LOCALIZATION NOTE (userStylesSearch): This is the placeholder that goes in
+  -  the search box when no search term has been entered. -->
+<!ENTITY userStylesSearch      "Search">
+
+<!-- LOCALIZATION NOTE (selectedElementLabel): This is the label for the path of
   -  the highlighted element in the web page. This path is based on the document
   -  tree. -->
-<!ENTITY lookingAtLabel        "Looking at:">
+<!ENTITY selectedElementLabel  "Selected element:">
 
 <!-- LOCALIZATION NOTE (helpLinkTitle): For each style property
   -  the user can hover it and get a help link button which allows one to
@@ -14,12 +18,17 @@
   -  This is the link title shown in the hover tooltip. -->
 <!ENTITY helpLinkTitle         "Read the documentation for this property">
 
-<!-- LOCALIZATION NOTE (matchedSelectors): For each style property the
-  -  panel shows whether there are any selectors that match the currently
-  -  selected element. -->
-<!ENTITY matchedSelectors      "Matched selectors">
-
 <!-- LOCALIZATION NOTE (unmatchedSelectors): For each style property
   -  the panel shows whether there are any selectors that do not match the
   -  currently selected element. -->
 <!ENTITY unmatchedSelectors    "Unmatched selectors">
+
+<!-- LOCALIZATION NOTE (bestMatch, matched, parentMatch & unmatched): For each
+  -  style property the panel shows the rules which hold that specific property.
+  -  For every rule, the rule status is also displayed: a rule can be the best
+  -  match, a match, a parent match, or a rule did not match the element the
+  -  user has highlighted. -->
+<!ENTITY bestMatch             "Best Match">
+<!ENTITY matched               "Matched">
+<!ENTITY parentMatch           "Parent Match">
+<!ENTITY unmatched             "Unmatched">

browser/themes/gnomestripe/browser/devtools/csshtmltree.css

@@ -37,77 +37,109 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+html {
+  height: 100%;
+}
+
 body {
   font-family: sans-serif;
   font-size: 11px;
-  background: #EEE;
+  background: -moz-Field;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  display: -moz-box;
+  -moz-box-orient: vertical;
 }
-.path,
-.filters {
+
+#root {
+  display: -moz-box;
+}
+
+#path {
   font-size: 11px;
   word-spacing: -1px;
+  margin-bottom: 0;
+  color: -moz-dialogtext;
+  background-color: -moz-dialog;
+  padding: 4px 5px 0;
 }
-.path ol {
+#path ol {
   list-style: none outside none;
   margin: 0;
   padding: 0;
 }
-.path li {
+#path li {
   border-radius: 3px;
   padding: 2px 3px;
-  text-shadow: #FFF 0 1px 0;
-  font-weight: bold;
   font-size: 11px;
-  background: -moz-linear-gradient(top, #F6F6FF, #E3E3FF);
   display: inline-block;
 }
-.path li:after {
+#path li:after {
   content: " > ";
 }
-.path li:last-child {
-  background: -moz-linear-gradient(top, #FFC, #DD8);
+#path li:last-child {
+  font-weight: bold;
+  color: #0091ff;
 }
-.path li:last-child:after {
-  color: red;
+#path li:last-child:after {
   content: "";
 }
 
 .property-header {
-  padding: 2px 5px;
-  background: -moz-linear-gradient(top, #F8F8F8, #E8E8E8);
-  color: #666;
+  padding: 4px;
+  -moz-padding-start: 0;
+  -moz-padding-end: 5px;
 }
 
-.property-name,
-.rule-matched,
-.rule-unmatched {
-  cursor: pointer;
-}
+ .rule-unmatched {
+   cursor: pointer;
+   padding: 2px;
+   -moz-padding-start: 4px;
+   -moz-padding-end: 0;
+   white-space: nowrap;
+ }
 
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
-.link {
-  color: #55A;
-}
+.link,
 .link:visited {
-  color: #55A;
+  color: #0091ff;
 }
-a.link {
-  text-decoration: none;
-  cursor: pointer;
-}
-a.link:visited {
+.link,
+.helplink,
+.link:visited,
+.helplink:visited {
   text-decoration: none;
 }
 
-.rule-matched,
-.rule-unmatched {
-  padding: 2px 0;
-  white-space: nowrap;
+.helplink-container {
+  position: relative;
+  top: 2px;
+  display: inline-block;
+  visibility: hidden;
+}
+
+.helplink {
+  display: block;
+  height: 0;
+  width: 14px;
+  overflow: hidden;
+  padding-top: 14px;
+  background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
+}
+
+.property-header:hover > .helplink-container {
+  visibility: visible;
+}
+
+.unmatchedSelectorTable {
+  -moz-margin-start: 15px;
 }
 
 .rulelink {
-  color: #55A;
+  color: -moz-dialogtext;
+  -moz-margin-start: 12px;
 }
 
 .expander {
@@ -117,34 +149,45 @@ a.link:visited {
   -moz-margin-start: 15px;
   -moz-margin-end: 5px;
   margin-top: 3px;
-  background: url("chrome://browser/skin/devtools/arrows.png");
-  background-position: 24px 0;
-}
-
-.searchfield {
-  background: url("chrome://browser/skin/devtools/search.png") no-repeat #FFF;
-  border-radius: 5px;
-  -moz-padding-start: 20px;
-  width: 135px;
-  float: right;
+  background: url("chrome://browser/skin/devtools/arrows.png") 48px 0;
 }
 
 .expander[dir="rtl"] {
-  background-position: 16px 0;
+  float: right;
+  background-position: 40px 0;
 }
+
 .expander[open] {
-  background-position: 8px 0;
+  background-position: 32px 0;
+}
+
+.expandable {
+  cursor: pointer;
+}
+
+.match {
+  visibility: hidden;
+}
+
+.expandable > .match {
+  margin-top: 5px;
+  visibility: visible;
+}
+
+.only-unmatched {
+  -moz-margin-start: 0;
 }
 
 .property-name {
   display: inline-block;
   font-size: 12px;
-  font-weight: bold;
-  color: #000;
+  color: -moz-FieldText;
+  width: 220px;
 }
 .property-value {
   display: inline-block;
   font-size: 10px;
+  color: grey;
 }
 
 .property-view-hidden {
@@ -159,11 +202,7 @@ a.link:visited {
 /* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
 .rule-text {
   direction: ltr;
-  -moz-padding-start: 10px;
-}
-
-.resizerbox {
-  background-color: window;
+  -moz-padding-start: 15px;
 }
 
 .bestmatch {
@@ -179,16 +218,62 @@ a.link:visited {
   color: brown;
 }
 
-.userStyles {
-  position: relative;
-  top: 3px;
+#propertyContainer {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+  overflow-y: auto;
 }
 
-.userStyles,
+.selectedElementLabel {
+  font-weight: bold;
+}
+
+.darkrow {
+  background-color: rgba(0,0,0,.022);
+}
+
+.header {
+  color: -moz-dialogtext;
+  background-color: -moz-dialog;
+  padding: 5px 0 0;
+}
+
+.onlyuserstyles,
 .userStylesLabel {
   cursor: pointer;
 }
 
+.userStylesLabel {
+  display: -moz-box;
+  white-space: nowrap;
+}
+
+.onlyuserstyles {
+  position: relative;
+  top: 3px;
+  font-family: sans-serif;
+  font-size: 11px;
+}
+
+.searchfield {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  margin-left: 10px;
+}
+
+.styleinspector-legend {
+  -moz-margin-start: 12px;
+}
+
+#footer {
+  border-top: 1px solid -moz-dialog;
+}
+
+.legendKey {
+  margin: 0 5px;
+}
+
 /**
  * CSS Rule View
  */

browser/themes/gnomestripe/browser/jar.mn

@@ -79,12 +79,12 @@ browser.jar:
   skin/classic/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/tabview/edit-light.png         (tabview/edit-light.png)
-  skin/classic/browser/tabview/search.png             (tabview/search.png)  
+  skin/classic/browser/tabview/search.png             (tabview/search.png)
   skin/classic/browser/tabview/stack-expander.png     (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png            (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css            (tabview/tabview.css)
   skin/classic/browser/devtools/arrows.png            (devtools/arrows.png)
-  skin/classic/browser/devtools/search.png            (devtools/search.png)
+  skin/classic/browser/devtools/goto-mdn.png          (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css       (devtools/csshtmltree.css)
   skin/classic/browser/devtools/gcli.css              (devtools/gcli.css)
   skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)

browser/themes/pinstripe/browser/devtools/csshtmltree.css

@@ -37,114 +37,155 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+html {
+  height: 100%;
+}
+
 body {
   font-family: sans-serif;
   font-size: 11px;
-  background: #EEE;
+  background: -moz-Field;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  display: -moz-box;
+  -moz-box-orient: vertical;
 }
-.path,
-.filters {
+
+#root {
+  display: -moz-box;
+}
+
+#path {
   font-size: 11px;
   word-spacing: -1px;
+  margin-bottom: 0;
+  color: -moz-dialogtext;
+  background-color: -moz-dialog;
+  padding: 4px 5px 0;
 }
-.path ol {
+#path ol {
   list-style: none outside none;
   margin: 0;
   padding: 0;
 }
-.path li {
+#path li {
   border-radius: 3px;
   padding: 2px 3px;
-  text-shadow: #FFF 0 1px 0;
-  font-weight: bold;
   font-size: 11px;
-  background: -moz-linear-gradient(top, #F6F6FF, #E3E3FF);
   display: inline-block;
 }
-.path li:after {
+#path li:after {
   content: " > ";
 }
-.path li:last-child {
-  background: -moz-linear-gradient(top, #FFC, #DD8);
+#path li:last-child {
+  font-weight: bold;
+  color: #0091ff;
 }
-.path li:last-child:after {
-  color: red;
+#path li:last-child:after {
   content: "";
 }
 
 .property-header {
-  padding: 2px 5px;
-  background: -moz-linear-gradient(top, #F8F8F8, #E8E8E8);
-  color: #666;
+  padding: 4px;
+  -moz-padding-start: 0;
+  -moz-padding-end: 5px;
 }
 
-.property-name,
-.rule-matched,
-.rule-unmatched {
-  cursor: pointer;
-}
+ .rule-unmatched {
+   cursor: pointer;
+   padding: 2px;
+   -moz-padding-start: 4px;
+   -moz-padding-end: 0;
+   white-space: nowrap;
+ }
 
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
-.link {
-  color: #55A;
-}
+.link,
 .link:visited {
-  color: #55A;
+  color: #0091ff;
 }
-a.link {
-  text-decoration: none;
-  cursor: pointer;
-}
-a.link:visited {
+.link,
+.helplink,
+.link:visited,
+.helplink:visited {
   text-decoration: none;
 }
 
-.rule-matched,
-.rule-unmatched {
-  padding: 2px 0;
-  white-space: nowrap;
+.helplink-container {
+  position: relative;
+  top: 2px;
+  display: inline-block;
+  visibility: hidden;
+}
+
+.helplink {
+  display: block;
+  height: 0;
+  width: 14px;
+  overflow: hidden;
+  padding-top: 14px;
+  background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
+}
+
+.property-header:hover > .helplink-container {
+  visibility: visible;
+}
+
+.unmatchedSelectorTable {
+  -moz-margin-start: 15px;
 }
 
 .rulelink {
-  color: #55A;
+  color: -moz-dialogtext;
+  -moz-margin-start: 12px;
 }
 
 .expander {
-  width: 8px;
-  height: 8px;
+  -moz-appearance: treetwisty;
+  width: 12px;
+  height: 12px;
   float: left;
-  -moz-margin-start: 15px;
+  -moz-margin-start: 5px;
   -moz-margin-end: 5px;
-  margin-top: 3px;
-  background: url("chrome://browser/skin/devtools/arrows.png");
-  background-position: 24px 0;
-}
-
-.searchfield {
-  background: url("chrome://browser/skin/devtools/search.png") no-repeat #FFF;
-  border-radius: 5px;
-  -moz-padding-start: 20px;
-  width: 135px;
-  float: right;
 }
 
 .expander[dir="rtl"] {
-  background-position: 16px 0;
+  float: right;
 }
+
 .expander[open] {
-  background-position: 8px 0;
+  -moz-appearance: treetwistyopen;
+}
+
+.expandable {
+  cursor: pointer;
+}
+
+.match {
+  visibility: hidden;
+}
+
+.expandable > .match {
+  margin-top: 5px;
+  visibility: visible;
+}
+
+.only-unmatched {
+  -moz-margin-start: 0;
 }
 
 .property-name {
   display: inline-block;
   font-size: 12px;
-  font-weight: bold;
-  color: #000;
+  color: -moz-FieldText;
+  width: 220px;
 }
 .property-value {
   display: inline-block;
   font-size: 10px;
+  color: grey;
 }
 
 .property-view-hidden {
@@ -159,11 +200,7 @@ a.link:visited {
 /* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
 .rule-text {
   direction: ltr;
-  -moz-padding-start: 10px;
-}
-
-.resizerbox {
-  background-color: window;
+  -moz-padding-start: 15px;
 }
 
 .bestmatch {
@@ -179,16 +216,62 @@ a.link:visited {
   color: brown;
 }
 
-.userStyles {
-  position: relative;
-  top: 3px;
+#propertyContainer {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+  overflow-y: auto;
 }
 
-.userStyles,
+.selectedElementLabel {
+  font-weight: bold;
+}
+
+.darkrow {
+  background-color: rgba(0,0,0,.022);
+}
+
+.header {
+  color: -moz-dialogtext;
+  background-color: -moz-dialog;
+  padding: 5px 0 0;
+}
+
+.onlyuserstyles,
 .userStylesLabel {
   cursor: pointer;
 }
 
+.userStylesLabel {
+  display: -moz-box;
+  white-space: nowrap;
+}
+
+.onlyuserstyles {
+  position: relative;
+  top: 3px;
+  font-family: sans-serif;
+  font-size: 11px;
+}
+
+.searchfield {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  margin-left: 10px;
+}
+
+.styleinspector-legend {
+  -moz-margin-start: 12px;
+}
+
+#footer {
+  border-top: 1px solid -moz-dialog;
+}
+
+.legendKey {
+  margin: 0 5px;
+}
+
 /**
  * CSS Rule View
  */

browser/themes/pinstripe/browser/jar.mn

@@ -123,7 +123,7 @@ browser.jar:
   skin/classic/browser/tabview/tabview.png                  (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css                  (tabview/tabview.css)
   skin/classic/browser/devtools/arrows.png                  (devtools/arrows.png)
-  skin/classic/browser/devtools/search.png                  (devtools/search.png)
+  skin/classic/browser/devtools/goto-mdn.png                (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css             (devtools/csshtmltree.css)
   skin/classic/browser/devtools/gcli.css                    (devtools/gcli.css)
   skin/classic/browser/devtools/toolbarbutton-close.png     (devtools/toolbarbutton-close.png)

browser/themes/winstripe/browser/devtools/csshtmltree.css

@@ -37,114 +37,156 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+html {
+  height: 100%;
+}
+
 body {
   font-family: sans-serif;
   font-size: 11px;
-  background: #EEE;
+  background: -moz-Field;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  display: -moz-box;
+  -moz-box-orient: vertical;
 }
-.path,
-.filters {
+
+#root {
+  display: -moz-box;
+}
+
+#path {
   font-size: 11px;
   word-spacing: -1px;
+  margin-bottom: 0;
+  color: -moz-dialogtext;
+  background-color: -moz-dialog;
+  padding: 4px 5px 0;
 }
-.path ol {
+#path ol {
   list-style: none outside none;
   margin: 0;
   padding: 0;
 }
-.path li {
+#path li {
   border-radius: 3px;
   padding: 2px 3px;
-  text-shadow: #FFF 0 1px 0;
-  font-weight: bold;
   font-size: 11px;
-  background: -moz-linear-gradient(top, #F6F6FF, #E3E3FF);
   display: inline-block;
 }
-.path li:after {
+#path li:after {
   content: " > ";
 }
-.path li:last-child {
-  background: -moz-linear-gradient(top, #FFC, #DD8);
+#path li:last-child {
+  font-weight: bold;
+  color: #0091ff;
 }
-.path li:last-child:after {
-  color: red;
+#path li:last-child:after {
   content: "";
 }
 
 .property-header {
-  padding: 2px 5px;
-  background: -moz-linear-gradient(top, #F8F8F8, #E8E8E8);
-  color: #666;
+  padding: 4px;
+  -moz-padding-start: 0;
+  -moz-padding-end: 5px;
 }
 
-.property-name,
-.rule-matched,
-.rule-unmatched {
-  cursor: pointer;
-}
+ .rule-unmatched {
+   cursor: pointer;
+   padding: 2px;
+   -moz-padding-start: 4px;
+   -moz-padding-end: 0;
+   white-space: nowrap;
+ }
 
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
-.link {
-  color: #55A;
-}
+.link,
 .link:visited {
-  color: #55A;
+  color: #0091ff;
 }
-a.link {
-  text-decoration: none;
-  cursor: pointer;
-}
-a.link:visited {
+.link,
+.helplink,
+.link:visited,
+.helplink:visited {
   text-decoration: none;
 }
 
-.rule-matched,
-.rule-unmatched {
-  padding: 2px 0;
-  white-space: nowrap;
+.helplink-container {
+  position: relative;
+  top: 2px;
+  display: inline-block;
+  visibility: hidden;
+}
+
+.helplink {
+  display: block;
+  height: 0;
+  width: 14px;
+  overflow: hidden;
+  padding-top: 14px;
+  background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
+}
+
+.property-header:hover > .helplink-container {
+  visibility: visible;
+}
+
+.unmatchedSelectorTable {
+  -moz-margin-start: 15px;
 }
 
 .rulelink {
-  color: #55A;
+  color: -moz-dialogtext;
+  -moz-margin-start: 12px;
 }
 
 .expander {
-  width: 8px;
-  height: 8px;
+  width: 9px;
+  height: 9px;
   float: left;
-  -moz-margin-start: 15px;
+  margin-top: 1px;
+  -moz-margin-start: 5px;
   -moz-margin-end: 5px;
-  margin-top: 3px;
-  background: url("chrome://browser/skin/devtools/arrows.png");
-  background-position: 24px 0;
-}
-
-.searchfield {
-  background: url("chrome://browser/skin/devtools/search.png") no-repeat #FFF;
-  border-radius: 5px;
-  -moz-padding-start: 20px;
-  width: 135px;
-  float: right;
+  background-image: url("chrome://global/skin/tree/twisty-clsd.png");
 }
 
 .expander[dir="rtl"] {
-  background-position: 16px 0;
+  float: right;
 }
+
 .expander[open] {
-  background-position: 8px 0;
+  background-image: url("chrome://global/skin/tree/twisty-open.png");
+}
+
+.expandable {
+  cursor: pointer;
+}
+
+.match {
+  visibility: hidden;
+}
+
+.expandable > .match {
+  margin-top: 5px;
+  visibility: visible;
+}
+
+.only-unmatched {
+  -moz-margin-start: 0;
 }
 
 .property-name {
   display: inline-block;
   font-size: 12px;
-  font-weight: bold;
-  color: #000;
+  color: -moz-FieldText;
+  width: 220px;
 }
 .property-value {
   display: inline-block;
   font-size: 10px;
+  color: grey;
 }
 
 .property-view-hidden {
@@ -159,11 +201,7 @@ a.link:visited {
 /* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
 .rule-text {
   direction: ltr;
-  -moz-padding-start: 10px;
-}
-
-.resizerbox {
-  background-color: window;
+  -moz-padding-start: 15px;
 }
 
 .bestmatch {
@@ -179,16 +217,62 @@ a.link:visited {
   color: brown;
 }
 
-.userStyles {
-  position: relative;
-  top: 3px;
+#propertyContainer {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+  overflow-y: auto;
 }
 
-.userStyles,
+.selectedElementLabel {
+  font-weight: bold;
+}
+
+.darkrow {
+  background-color: rgba(0,0,0,.022);
+}
+
+.header {
+  color: -moz-dialogtext;
+  background-color: -moz-dialog;
+  padding: 5px 0 0;
+}
+
+.onlyuserstyles,
 .userStylesLabel {
   cursor: pointer;
 }
 
+.userStylesLabel {
+  display: -moz-box;
+  white-space: nowrap;
+}
+
+.onlyuserstyles {
+  position: relative;
+  top: 3px;
+  font-family: sans-serif;
+  font-size: 11px;
+}
+
+.searchfield {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  margin-left: 10px;
+}
+
+.styleinspector-legend {
+  -moz-margin-start: 12px;
+}
+
+#footer {
+  border-top: 1px solid -moz-dialog;
+}
+
+.legendKey {
+  margin: 0 5px;
+}
+
 /**
  * CSS Rule View
  */

browser/themes/winstripe/browser/jar.mn

@@ -107,7 +107,7 @@ browser.jar:
         skin/classic/browser/tabview/tabview-inverted.png           (tabview/tabview-inverted.png)
         skin/classic/browser/tabview/tabview.css                    (tabview/tabview.css)
         skin/classic/browser/devtools/arrows.png                    (devtools/arrows.png)
-        skin/classic/browser/devtools/search.png                    (devtools/search.png)
+        skin/classic/browser/devtools/goto-mdn.png                  (devtools/goto-mdn.png)
         skin/classic/browser/devtools/csshtmltree.css               (devtools/csshtmltree.css)
         skin/classic/browser/devtools/gcli.css                      (devtools/gcli.css)
         skin/classic/browser/devtools/toolbarbutton-close.png       (devtools/toolbarbutton-close.png)
@@ -259,7 +259,7 @@ browser.jar:
         skin/classic/aero/browser/tabview/tabview-inverted.png       (tabview/tabview-inverted.png)
         skin/classic/aero/browser/tabview/tabview.css                (tabview/tabview.css)
         skin/classic/aero/browser/devtools/arrows.png                (devtools/arrows.png)
-        skin/classic/aero/browser/devtools/search.png                (devtools/search.png)
+        skin/classic/aero/browser/devtools/goto-mdn.png              (devtools/goto-mdn.png)
         skin/classic/aero/browser/devtools/csshtmltree.css           (devtools/csshtmltree.css)
         skin/classic/aero/browser/devtools/gcli.css                  (devtools/gcli.css)
         skin/classic/aero/browser/devtools/toolbarbutton-close.png   (devtools/toolbarbutton-close.png)