Bug 699832 - Style Inspector needs a way to display treetwisties that will work on all operating systems. r=dcamp
authorDão Gottwald <dao@mozilla.com>
Sun, 06 Nov 2011 10:26:00 -0800
changeset 79884 232756b8af4dabd1b5bd28449653fafc978ef2bf
parent 79883 100b93342d7cd287763871f4c8a810d8cfe4d600
child 79885 81523479576525e98ba63d1cfbb17c8ec87f4671
push id21436
push userrcampbell@mozilla.com
push dateMon, 07 Nov 2011 14:46:42 +0000
treeherdermozilla-central@42e8b5f1357c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdcamp
bugs699832
milestone10.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 699832 - Style Inspector needs a way to display treetwisties that will work on all operating systems. r=dcamp
browser/devtools/styleinspector/csshtmltree.xul
browser/themes/gnomestripe/browser/devtools/csshtmltree.css
browser/themes/pinstripe/browser/devtools/csshtmltree.css
browser/themes/winstripe/browser/devtools/csshtmltree.css
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -121,27 +121,27 @@ To visually debug the templates without 
   <!--
   TemplateProperty lists the properties themselves. Each needs data like this:
   {
     property: ... // PropertyView from CssHtmlTree.jsm
   }
   -->
   <div id="templateProperty">
     <div class="${className}" save="${element}">
-      <div class="property-header" save="${propertyHeader}"
-           onclick="${propertyHeaderClick}">
+      <xul:hbox class="property-header" save="${propertyHeader}"
+                onclick="${propertyHeaderClick}">
         <div save="${matchedExpander}" class="match expander"/>
         <div class="property-name">${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>
+      </xul:hbox>
 
       <div save="${matchedSelectorsContainer}" class="rulelink">
       </div>
     </div>
   </div>
 
   <!--
   A templateMatchedSelectors sits inside each templateProperties showing the
--- a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
@@ -78,23 +78,23 @@
 }
 
 .property-header {
   padding: 4px;
   -moz-padding-start: 0;
   -moz-padding-end: 5px;
 }
 
- .rule-unmatched {
-   cursor: pointer;
-   padding: 2px;
-   -moz-padding-start: 4px;
-   -moz-padding-end: 0;
-   white-space: nowrap;
- }
+.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,
 .link:visited {
   color: #0091ff;
 }
 .link,
@@ -102,86 +102,73 @@
 .link:visited,
 .helplink:visited {
   text-decoration: none;
 }
 
 .helplink-container {
   position: relative;
   top: 2px;
-  display: inline-block;
-  visibility: hidden;
 }
 
 .helplink {
   display: block;
-  height: 0;
-  width: 14px;
+  height: 14px;
+  width: 0;
   overflow: hidden;
-  padding-top: 14px;
+  -moz-padding-start: 14px;
   background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
+  -moz-margin-end: 2px;
 }
 
-.property-header:hover > .helplink-container {
-  visibility: visible;
+.property-header:not(:hover) > .helplink-container {
+  visibility: hidden;
 }
 
 .unmatchedSelectorTable {
   -moz-margin-start: 15px;
 }
 
 .rulelink {
   color: -moz-dialogtext;
   -moz-margin-start: 12px;
 }
 
 .expander {
-  width: 8px;
-  height: 8px;
-  float: left;
-  -moz-margin-start: 15px;
+  -moz-appearance: treetwisty;
+  -moz-margin-start: 10px;
   -moz-margin-end: 5px;
-  margin-top: 3px;
-  background: url("chrome://browser/skin/devtools/arrows.png") 48px 0;
-}
-
-.expander:-moz-locale-dir(rtl) {
-  float: right;
-  background-position: 40px 0;
 }
 
 .expander[open] {
-  background-position: 32px 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;
   color: -moz-FieldText;
   width: 220px;
 }
 .property-value {
-  display: inline-block;
   font-size: 10px;
   color: grey;
 }
 
 .property-view-hidden {
   display: none;
 }
 
--- a/browser/themes/pinstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
@@ -78,23 +78,23 @@
 }
 
 .property-header {
   padding: 4px;
   -moz-padding-start: 0;
   -moz-padding-end: 5px;
 }
 
- .rule-unmatched {
-   cursor: pointer;
-   padding: 2px;
-   -moz-padding-start: 4px;
-   -moz-padding-end: 0;
-   white-space: nowrap;
- }
+.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,
 .link:visited {
   color: #0091ff;
 }
 .link,
@@ -102,84 +102,75 @@
 .link:visited,
 .helplink:visited {
   text-decoration: none;
 }
 
 .helplink-container {
   position: relative;
   top: 2px;
-  display: inline-block;
-  visibility: hidden;
 }
 
 .helplink {
   display: block;
-  height: 0;
-  width: 14px;
+  height: 14px;
+  width: 0;
   overflow: hidden;
-  padding-top: 14px;
+  -moz-padding-start: 14px;
   background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
+  -moz-margin-end: 2px;
 }
 
-.property-header:hover > .helplink-container {
-  visibility: visible;
+.property-header:not(:hover) > .helplink-container {
+  visibility: hidden;
 }
 
 .unmatchedSelectorTable {
   -moz-margin-start: 15px;
 }
 
 .rulelink {
   color: -moz-dialogtext;
   -moz-margin-start: 12px;
 }
 
 .expander {
   -moz-appearance: treetwisty;
   width: 12px;
   height: 12px;
-  float: left;
   -moz-margin-start: 5px;
   -moz-margin-end: 5px;
 }
 
-.expander:-moz-locale-dir(rtl) {
-  float: right;
-}
-
 .expander[open] {
   -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;
   color: -moz-FieldText;
   width: 220px;
 }
 .property-value {
-  display: inline-block;
   font-size: 10px;
   color: grey;
 }
 
 .property-view-hidden {
   display: none;
 }
 
--- a/browser/themes/winstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/winstripe/browser/devtools/csshtmltree.css
@@ -78,23 +78,23 @@
 }
 
 .property-header {
   padding: 4px;
   -moz-padding-start: 0;
   -moz-padding-end: 5px;
 }
 
- .rule-unmatched {
-   cursor: pointer;
-   padding: 2px;
-   -moz-padding-start: 4px;
-   -moz-padding-end: 0;
-   white-space: nowrap;
- }
+.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,
 .link:visited {
   color: #0091ff;
 }
 .link,
@@ -102,85 +102,75 @@
 .link:visited,
 .helplink:visited {
   text-decoration: none;
 }
 
 .helplink-container {
   position: relative;
   top: 2px;
-  display: inline-block;
-  visibility: hidden;
 }
 
 .helplink {
   display: block;
-  height: 0;
-  width: 14px;
+  height: 14px;
+  width: 0;
   overflow: hidden;
-  padding-top: 14px;
+  -moz-padding-start: 14px;
   background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
+  -moz-margin-end: 2px;
 }
 
-.property-header:hover > .helplink-container {
-  visibility: visible;
+.property-header:not(:hover) > .helplink-container {
+  visibility: hidden;
 }
 
 .unmatchedSelectorTable {
   -moz-margin-start: 15px;
 }
 
 .rulelink {
   color: -moz-dialogtext;
   -moz-margin-start: 12px;
 }
 
 .expander {
   width: 9px;
   height: 9px;
-  float: left;
-  margin-top: 1px;
   -moz-margin-start: 5px;
   -moz-margin-end: 5px;
-  background-image: url("chrome://global/skin/tree/twisty-clsd.png");
-}
-
-.expander:-moz-locale-dir(rtl) {
-  float: right;
+  background: url("chrome://global/skin/tree/twisty-clsd.png") center center no-repeat;
 }
 
 .expander[open] {
   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;
   color: -moz-FieldText;
   width: 220px;
 }
 .property-value {
-  display: inline-block;
   font-size: 10px;
   color: grey;
 }
 
 .property-view-hidden {
   display: none;
 }