Bug 1238133 - Part 1: Make only one instance of fonts.css and rules.css r=bgrins
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 13 Jan 2016 00:37:32 -0800
changeset 321230 06ea2bb32047389b95e3603286c54657fa1819a5
parent 321226 154482173e4021b606157b8b4e085e01dc75673f
child 321231 4107c88c8e3f1ed3321943e41d9737eac01946f6
push id9354
push userpbrosset@mozilla.com
push dateWed, 13 Jan 2016 09:58:41 +0000
reviewersbgrins
bugs1238133
milestone46.0a1
Bug 1238133 - Part 1: Make only one instance of fonts.css and rules.css r=bgrins
devtools/client/inspector/fonts/fonts.css
devtools/client/inspector/fonts/fonts.xhtml
devtools/client/inspector/rules/rules.css
devtools/client/inspector/rules/rules.xhtml
devtools/client/jar.mn
devtools/client/themes/fonts.css
devtools/client/themes/rules.css
deleted file mode 100644
--- a/devtools/client/inspector/fonts/fonts.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/* 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/. */
-
-.dim > #root,
-.font:not(.has-code) .font-css-code,
-.font-is-local,
-.font-is-remote,
-.font.is-local .font-format-url,
-#template {
-  display: none;
-}
-
-.font.is-remote .font-is-remote,
-.font.is-local .font-is-local {
-  display: inline;
-}
-
-.font-format::before {
-  content: "(";
-}
-
-.font-format::after {
-  content: ")";
-}
-
-.preview-input-toolbar {
-  display: flex;
-  width: 100%;
-}
-
-.font-preview-container {
-  overflow-x: auto;
-}
-
-#preview-text-input {
-  font: inherit;
-  margin-top: 1px;
-  margin-bottom: 1px;
-  padding-top: 0;
-  padding-bottom: 0;
-  flex: 1;
-}
-
-:root {
-  height: 100%;
-}
-
-#root {
-  overflow: auto;
-}
--- a/devtools/client/inspector/fonts/fonts.xhtml
+++ b/devtools/client/inspector/fonts/fonts.xhtml
@@ -6,17 +6,16 @@
 <!ENTITY % fontinspectorDTD SYSTEM "chrome://devtools/locale/font-inspector.dtd" >
  %fontinspectorDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>&title;</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <link rel="stylesheet" href="fonts.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/common.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/fonts.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
   </head>
   <body class="theme-sidebar devtools-monospace" role="application">
     <script type="application/javascript;version=1.8" src="fonts.js"></script>
     <div>
       <div class="devtools-toolbar preview-input-toolbar">
deleted file mode 100644
--- a/devtools/client/inspector/rules/rules.css
+++ /dev/null
@@ -1,118 +0,0 @@
-/* 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/. */
-
-* {
-  box-sizing: border-box;
-}
-
-:root {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-#ruleview-container {
-  -moz-user-select: text;
-  overflow: auto;
-  min-height: 0;
-  flex: 1;
-}
-
-#ruleview-container.non-interactive {
-  pointer-events: none;
-  visibility: collapse;
-  transition: visibility 0.25s;
-}
-
-.devtools-toolbar {
-  width: 100%;
-  display: flex;
-}
-
-#pseudo-class-panel {
-  position: relative;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  overflow-y: hidden;
-  max-height: 24px;
-  outline: 0 !important;
-  transition-property: max-height;
-  transition-duration: 150ms;
-  transition-timing-function: ease;
-}
-
-#pseudo-class-panel[hidden] {
-  max-height: 0px;
-}
-
-#pseudo-class-panel > label {
-  -moz-user-select: none;
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-}
-
-.ruleview {
-  overflow: auto;
-  -moz-user-select: text;
-}
-
-.ruleview-code {
-  direction: ltr;
-}
-
-.ruleview-property:not(:hover) > .ruleview-enableproperty {
-  pointer-events: none;
-}
-
-.ruleview-namecontainer {
-  cursor: text;
-}
-
-.ruleview-propertyvaluecontainer {
-  cursor: text;
-  padding-right: 5px;
-}
-
-.ruleview-propertyvaluecontainer a {
-  cursor: pointer;
-}
-
-.ruleview-computedlist,
-.ruleview-overridden-rule-filter[hidden],
-.ruleview-warning[hidden] {
-  display: none;
-}
-
-.ruleview-computedlist[user-open],
-.ruleview-computedlist[filter-open] {
-  display: block;
-}
-
-.ruleview-expandable-container {
-  display: none;
-}
-
-.show-expandable-container + .ruleview-expandable-container {
-  display: block;
-}
-
-.ruleview .ruleview-expander {
-  vertical-align: middle;
-}
-
-.ruleview-header {
-  vertical-align: middle;
-  min-height: 1.5em;
-  line-height: 1.5em;
-}
-
-.ruleview-header.ruleview-expandable-header {
-  cursor: pointer;
-}
--- a/devtools/client/inspector/rules/rules.xhtml
+++ b/devtools/client/inspector/rules/rules.xhtml
@@ -12,17 +12,16 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       class="theme-sidebar">
   <head>
     <title>&ruleViewTitle;</title>
     <link rel="stylesheet" href="chrome://global/skin/global.css"  type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/common.css"  type="text/css"/>
-    <link rel="stylesheet" href="chrome://devtools/content/inspector/rules/rules.css"  type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/rules.css"  type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
     <script type="application/javascript;version=1.8">
       window.setPanel = function(panel, iframe) {
         let {require} = Components.utils.import("resource://devtools/shared/Loader.jsm", {});
         let {RuleViewTool} = require("devtools/client/inspector/rules/rules");
         this.ruleview = new RuleViewTool(panel, window);
       }
@@ -47,12 +46,12 @@
       </div>
       <div id="pseudo-class-panel" class="devtools-toolbar" hidden="true" tabindex="-1">
         <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</label>
         <label><input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</label>
         <label><input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</label>
       </div>
     </div>
 
-    <div id="ruleview-container" class="ruleview devtools-monospace">
+    <div id="ruleview-container" class="devtools-monospace">
     </div>
   </body>
 </html>
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -22,24 +22,22 @@ devtools.jar:
     content/scratchpad/scratchpad.js (scratchpad/scratchpad.js)
     content/shared/splitview.css (shared/splitview.css)
     content/shared/theme-switching.js (shared/theme-switching.js)
     content/shared/frame-script-utils.js (shared/frame-script-utils.js)
     content/styleeditor/styleeditor.xul (styleeditor/styleeditor.xul)
     content/styleeditor/styleeditor.css (styleeditor/styleeditor.css)
     content/storage/storage.xul (storage/storage.xul)
     content/inspector/computed/computed.xhtml (inspector/computed/computed.xhtml)
-    content/inspector/fonts/fonts.css (inspector/fonts/fonts.css)
     content/inspector/fonts/fonts.js (inspector/fonts/fonts.js)
     content/inspector/fonts/fonts.xhtml (inspector/fonts/fonts.xhtml)
     content/inspector/layout/layout.js (inspector/layout/layout.js)
     content/inspector/layout/layout.xhtml (inspector/layout/layout.xhtml)
     content/inspector/markup/markup.css (inspector/markup/markup.css)
     content/inspector/markup/markup.xhtml (inspector/markup/markup.xhtml)
-    content/inspector/rules/rules.css (inspector/rules/rules.css)
     content/inspector/rules/rules.xhtml (inspector/rules/rules.xhtml)
     content/animationinspector/animation-controller.js (animationinspector/animation-controller.js)
     content/animationinspector/animation-panel.js (animationinspector/animation-panel.js)
     content/animationinspector/animation-inspector.xhtml (animationinspector/animation-inspector.xhtml)
     content/sourceeditor/codemirror/addon/comment/comment.js (sourceeditor/codemirror/addon/comment/comment.js)
     content/sourceeditor/codemirror/addon/edit/trailingspace.js (sourceeditor/codemirror/addon/edit/trailingspace.js)
     content/sourceeditor/codemirror/addon/edit/matchbrackets.js (sourceeditor/codemirror/addon/edit/matchbrackets.js)
     content/sourceeditor/codemirror/addon/edit/closebrackets.js (sourceeditor/codemirror/addon/edit/closebrackets.js)
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -1,35 +1,87 @@
+/* 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/. */
+
 * {
   box-sizing: border-box;
 }
 
+:root {
+  height: 100%;
+}
+
 body {
   display: flex;
   flex-direction: column;
   height: 100%;
   margin: 0;
   padding-bottom: 20px;
 }
 
+#root {
+  overflow: auto;
+}
+
 #all-fonts {
   padding: 0;
   margin: 0;
 }
 
 #showall {
   border-radius: 0;
   border: 1px solid black;
   margin: 3px;
   cursor: pointer;
   position: fixed;
   bottom: 0;
   right: 0;
 }
 
+.dim > #root,
+.font:not(.has-code) .font-css-code,
+.font-is-local,
+.font-is-remote,
+.font.is-local .font-format-url,
+#template {
+  display: none;
+}
+
+.font.is-remote .font-is-remote,
+.font.is-local .font-is-local {
+  display: inline;
+}
+
+.font-format::before {
+  content: "(";
+}
+
+.font-format::after {
+  content: ")";
+}
+
+.preview-input-toolbar {
+  display: flex;
+  width: 100%;
+}
+
+.font-preview-container {
+  overflow-x: auto;
+}
+
+#preview-text-input {
+  font: inherit;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  padding-top: 0;
+  padding-bottom: 0;
+  flex: 1;
+}
+
 .font {
   padding: 10px 10px;
 }
 
 .theme-dark .font {
   border-bottom: 1px solid #444;
 }
 
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -8,20 +8,113 @@
   --rule-filter-icon: url(images/magnifying-glass-light.png);
 }
 
 .theme-dark {
   --rule-highlight-background-color: #594724;
   --rule-filter-icon: url(images/magnifying-glass.png);
 }
 
-.ruleview {
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+#ruleview-container {
+  -moz-user-select: text;
+  overflow: auto;
+  min-height: 0;
+  flex: 1;
   height: 100%;
 }
 
+#ruleview-container.non-interactive {
+  pointer-events: none;
+  visibility: collapse;
+  transition: visibility 0.25s;
+}
+
+.devtools-toolbar {
+  width: 100%;
+  display: flex;
+}
+
+#pseudo-class-panel {
+  position: relative;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  overflow-y: hidden;
+  max-height: 24px;
+  outline: 0 !important;
+  transition-property: max-height;
+  transition-duration: 150ms;
+  transition-timing-function: ease;
+}
+
+#pseudo-class-panel[hidden] {
+  max-height: 0px;
+}
+
+#pseudo-class-panel > label {
+  -moz-user-select: none;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+}
+
+.ruleview-code {
+  direction: ltr;
+}
+
+.ruleview-property:not(:hover) > .ruleview-enableproperty {
+  pointer-events: none;
+}
+
+.ruleview-expandable-container {
+  display: none;
+}
+
+.show-expandable-container + .ruleview-expandable-container {
+  display: block;
+}
+
+.ruleview-namecontainer {
+  cursor: text;
+}
+
+.ruleview-propertyvaluecontainer {
+  cursor: text;
+  padding-right: 5px;
+}
+
+.ruleview-propertyvaluecontainer a {
+  cursor: pointer;
+}
+
+.ruleview-computedlist,
+.ruleview-overridden-rule-filter[hidden],
+.ruleview-warning[hidden] {
+  display: none;
+}
+
+.ruleview-computedlist[user-open],
+.ruleview-computedlist[filter-open] {
+  display: block;
+}
+
 .ruleview-rule-source {
   text-align: end;
   float: right;
   -moz-user-select: none;
   margin-bottom: 2px;
 }
 
 .ruleview-rule-source > label {
@@ -41,23 +134,30 @@
 .ruleview-header {
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-top-style: solid;
   border-bottom-style: solid;
   padding: 1px 4px;
   -moz-user-select: none;
   word-wrap: break-word;
+  vertical-align: middle;
+  min-height: 1.5em;
+  line-height: 1.5em;
 }
 
 :root[platform="win"] .ruleview-header,
 :root[platform="linux"] .ruleview-header {
   margin-top: 4px;
 }
 
+.ruleview-header.ruleview-expandable-header {
+  cursor: pointer;
+}
+
 .ruleview-rule-pseudo-element {
   padding-left:20px;
   border-left: solid 10px;
 }
 
 .ruleview-rule,
 #noResults {
   padding: 2px 4px;
@@ -143,16 +243,17 @@
   margin: 0;
 }
 
 .ruleview-rule:not(:hover) .ruleview-enableproperty {
   visibility: hidden;
 }
 
 .ruleview-expander {
+  vertical-align: middle;
   display: inline-block;
 }
 
 .ruleview-newproperty {
   /* (enable checkbox width: 12px) + (expander width: 15px) */
   -moz-margin-start: 27px;
 }