Bug 1174821 - 3 - Consolidate and cleanup layoutview's css files; r=janx
authorPatrick Brosset <pbrosset@mozilla.com>
Tue, 16 Jun 2015 17:04:27 +0200
changeset 279954 588059d28c7036d95098a6f7de77bd0f96c236ad
parent 279953 95869bbbeaba495e6c60c7ad394689ec1a3c8d05
child 279955 22b8d6aa174ff20f25858cc226f9bed7681776b6
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-beta@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjanx
bugs1174821
milestone41.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 1174821 - 3 - Consolidate and cleanup layoutview's css files; r=janx The layout-view used 2 css files, one in /browser/devtools/layoutview and the other in /browser/themes. This makes it unnecessarily confusing for people looking for the right place to make css changes. This change re-unit all css rules in one file under /browser/themes and cleans up the code a bit (better structure, comments, simplifications).
browser/devtools/jar.mn
browser/devtools/layoutview/view.css
browser/devtools/layoutview/view.xhtml
browser/themes/shared/devtools/layoutview.css
--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@@ -26,17 +26,16 @@ browser.jar:
     content/browser/devtools/styleeditor.xul                           (styleeditor/styleeditor.xul)
     content/browser/devtools/styleeditor.css                           (styleeditor/styleeditor.css)
     content/browser/devtools/storage.xul                               (storage/storage.xul)
     content/browser/devtools/computedview.xhtml                        (styleinspector/computedview.xhtml)
     content/browser/devtools/cssruleview.xhtml                         (styleinspector/cssruleview.xhtml)
     content/browser/devtools/ruleview.css                              (styleinspector/ruleview.css)
     content/browser/devtools/layoutview/view.js                        (layoutview/view.js)
     content/browser/devtools/layoutview/view.xhtml                     (layoutview/view.xhtml)
-    content/browser/devtools/layoutview/view.css                       (layoutview/view.css)
     content/browser/devtools/fontinspector/font-inspector.js           (fontinspector/font-inspector.js)
     content/browser/devtools/fontinspector/font-inspector.xhtml        (fontinspector/font-inspector.xhtml)
     content/browser/devtools/fontinspector/font-inspector.css          (fontinspector/font-inspector.css)
     content/browser/devtools/animationinspector/animation-controller.js (animationinspector/animation-controller.js)
     content/browser/devtools/animationinspector/animation-panel.js     (animationinspector/animation-panel.js)
     content/browser/devtools/animationinspector/animation-inspector.xhtml (animationinspector/animation-inspector.xhtml)
     content/browser/devtools/codemirror/codemirror.js                  (sourceeditor/codemirror/codemirror.js)
     content/browser/devtools/codemirror/codemirror.css                 (sourceeditor/codemirror/codemirror.css)
deleted file mode 100644
--- a/browser/devtools/layoutview/view.css
+++ /dev/null
@@ -1,266 +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/. */
-
-body {
-  max-width: 320px;
-  position: relative;
-  margin: 0px auto;
-  padding: 0;
-}
-
-#header {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 4px 13px;
-  display: -moz-box;
-  vertical-align: top;
-}
-
-#header:-moz-dir(rtl) {
-  -moz-box-direction: reverse;
-}
-
-#header > span {
-  display: -moz-box;
-}
-
-#element-size {
-  -moz-box-flex: 1;
-}
-
-#element-size:-moz-dir(rtl) {
-  -moz-box-pack: end;
-}
-
-#main {
-  margin: 0 14px 10px 14px;
-  box-sizing: border-box;
-  width: calc(100% - 2 * 14px);
-  position: absolute;
-  border-width: 1px;
-}
-
-#content,
-#borders {
-  border-width: 1px;
-}
-
-#content {
-  height: 25px;
-}
-
-#margins,
-#padding {
-  border-style: solid;
-  border-width: 25px;
-}
-
-#borders {
-  padding: 25px;
-}
-
-.legend {
-  position: absolute;
-  margin: 5px 6px;
-  z-index: 1;
-}
-
-.legend[data-box="margin"] {
-  color: var(--theme-highlight-blue);
-}
-
-#main > p {
-  position: absolute;
-  pointer-events: none;
-}
-
-#main > p {
-  margin: 0;
-  text-align: center;
-}
-
-#main > p > span {
-  vertical-align: middle;
-  pointer-events: auto;
-}
-
-.size > span {
-  cursor: default;
-}
-
-.editable {
-  -moz-user-select: text;
-}
-
-.top,
-.bottom {
-  width: calc(100% - 2px);
-  text-align: center;
-}
-
-.padding.top {
-  top: 55px;
-}
-
-.padding.bottom {
-  bottom: 57px;
-}
-
-.border.top {
-  top: 30px;
-}
-
-.border.bottom {
-  bottom: 31px;
-}
-
-.margin.top {
-  top: 5px;
-}
-
-.margin.bottom {
-  bottom: 6px;
-}
-
-.size,
-.margin.left,
-.margin.right,
-.border.left,
-.border.right,
-.padding.left,
-.padding.right {
-  top: 22px;
-  line-height: 132px;
-}
-
-.size {
-  width: calc(100% - 2px);
-}
-
-.margin.right,
-.margin.left,
-.border.left,
-.border.right,
-.padding.right,
-.padding.left {
-  width: 25px;
-}
-
-.padding.left {
-  left: 52px;
-}
-
-.padding.right {
-  right: 51px;
-}
-
-.border.left {
-  left: 26px;
-}
-
-.border.right {
-  right: 26px;
-}
-
-.margin.right {
-  right: 0;
-}
-
-.margin.left {
-  left: 0;
-}
-
-.rotate.left:not(.editing) {
-  transform: rotate(-90deg);
-}
-
-.rotate.right:not(.editing) {
-  transform: rotate(90deg);
-}
-
-
-body.dim > #header > #element-position,
-body.dim > #main > p {
-  visibility: hidden;
-}
-
-@media (max-height: 228px) {
-  #header {
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-top: 10px;
-    margin-bottom: 8px;
-  }
-
-  #margins,
-  #padding {
-    border-width: 21px;
-  }
-  #borders {
-    padding: 21px;
-  }
-
-  #content {
-    height: 21px;
-  }
-
-  .padding.top {
-    top: 46px;
-  }
-
-  .padding.bottom {
-    bottom: 46px;
-  }
-
-  .border.top {
-    top: 25px;
-  }
-
-  .border.bottom {
-    bottom: 25px;
-  }
-
-  .margin.top {
-    top: 4px;
-  }
-
-  .margin.bottom {
-    bottom: 4px;
-  }
-
-  .size,
-  .margin.left,
-  .margin.right,
-  .border.left,
-  .border.right,
-  .padding.left,
-  .padding.right {
-    line-height: 106px;
-  }
-
-  .margin.right,
-  .margin.left,
-  .border.left,
-  .border.right,
-  .padding.right,
-  .padding.left {
-    width: 21px;
-  }
-
-  .padding.left {
-    left: 43px;
-  }
-
-  .padding.right {
-    right: 43px;
-  }
-
-  .border.left {
-    left: 22px;
-  }
-
-  .border.right {
-    right: 22px;
-  }
-}
--- a/browser/devtools/layoutview/view.xhtml
+++ b/browser/devtools/layoutview/view.xhtml
@@ -14,17 +14,16 @@
 
     <script type="application/javascript;version=1.8"
             src="chrome://browser/content/devtools/theme-switching.js"/>
 
     <script type="application/javascript;version=1.8" src="view.js"></script>
 
     <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/skin/devtools/layoutview.css" type="text/css"/>
-    <link rel="stylesheet" href="view.css" type="text/css"/>
 
   </head>
   <body class="theme-sidebar devtools-monospace">
 
     <p id="header">
       <span id="element-size"></span><span id="element-position"></span>
     </p>
 
--- a/browser/themes/shared/devtools/layoutview.css
+++ b/browser/themes/shared/devtools/layoutview.css
@@ -1,60 +1,331 @@
 /* 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/. */
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/ */
 
 .theme-sidebar {
   box-sizing: border-box;
 }
 
+body {
+  /* The view will grow bigger as the window gets resized, until 400px */
+  max-width: 400px;
+  margin: 0px auto;
+  padding: 0;
+  /* "Contain" the absolutely positioned #main element */
+  position: relative;
+}
+
+/* Header: contains the position and size of the element */
+
+#header {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 4px 14px;
+  display: -moz-box;
+  vertical-align: top;
+}
+
+#header:-moz-dir(rtl) {
+  -moz-box-direction: reverse;
+}
+
+#header > span {
+  display: -moz-box;
+}
+
+#element-size {
+  -moz-box-flex: 1;
+}
+
+#element-size:-moz-dir(rtl) {
+  -moz-box-pack: end;
+}
+
+@media (max-height: 228px) {
+  #header {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 10px;
+    margin-bottom: 8px;
+  }
+}
+
+/* Main: contains the box-model regions */
+
 #main {
+  position: absolute;
+  box-sizing: border-box;
+  /* The regions are semi-transparent, so the white background is partly
+     visible */
   background-color: white;
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted;
   color: var(--theme-selection-color);
+  /* Make sure there is some space between the window's edges and the regions */
+  margin: 0 14px 10px 14px;
+  width: calc(100% - 2 * 14px);
 }
 
 .margin,
 .size {
   color: var(--theme-highlight-blue);
 }
 
+/* Regions are 3 nested elements with wide borders and outlines */
+
 #content {
-  background-color: #87ceeb;
-  border-color: hsl(210,100%,85%);
-  border-style: dotted;
+  height: 25px;
 }
 
-#padding,
-#margins {
+#margins,
+#borders,
+#padding {
   border-color: hsla(210,100%,85%,0.2);
+  border-width: 25px;
+  border-style: solid;
   outline: dotted 1px hsl(210,100%,85%);
 }
 
-#padding {
-  background-color: #6a5acd;
+#margins {
+  /* This opacity applies to all of the regions, since they are nested */
+  opacity: .8;
+}
+
+/* Respond to window size change by changing the size of the regions */
+
+@media (max-height: 228px) {
+  #content {
+    height: 18px;
+  }
+
+  #margins,
+  #borders,
+  #padding {
+    border-width: 18px;
+  }
+}
+
+/* Regions colors */
+
+#margins {
+  border-color: #edff64;
 }
 
 #borders {
-  background-color: #444444;
-  border-style: dotted;
-  border-color: hsl(210,100%,85%);
+  border-color: #444444;
+}
+
+#padding {
+  border-color: #6a5acd;
+}
+
+#content {
+  background-color: #87ceeb;
+}
+
+/* Editable region sizes are contained in absolutely positioned <p> */
+
+#main > p {
+  position: absolute;
+  pointer-events: none;
+}
+
+#main > p {
+  margin: 0;
+  text-align: center;
+}
+
+#main > p > span {
+  vertical-align: middle;
+  pointer-events: auto;
+}
+
+/* Coordinates for the region sizes */
+
+.top,
+.bottom {
+  width: calc(100% - 2px);
+  text-align: center;
+}
+
+.padding.top {
+  top: 55px;
+}
+
+.padding.bottom {
+  bottom: 57px;
+}
+
+.border.top {
+  top: 30px;
+}
+
+.border.bottom {
+  bottom: 31px;
+}
+
+.margin.top {
+  top: 5px;
+}
+
+.margin.bottom {
+  bottom: 6px;
+}
+
+.size,
+.margin.left,
+.margin.right,
+.border.left,
+.border.right,
+.padding.left,
+.padding.right {
+  top: 22px;
+  line-height: 132px;
+}
+
+.size {
+  width: calc(100% - 2px);
+}
+
+.margin.right,
+.margin.left,
+.border.left,
+.border.right,
+.padding.right,
+.padding.left {
+  width: 25px;
+}
+
+.padding.left {
+  left: 52px;
+}
+
+.padding.right {
+  right: 51px;
+}
+
+.border.left {
+  left: 26px;
+}
+
+.border.right {
+  right: 26px;
 }
 
-#margins {
-  background-color: #edff64;
-  /* This opacity applies to all of the regions, since they are nested. */
-  opacity: .8;
+.margin.right {
+  right: 0;
+}
+
+.margin.left {
+  left: 0;
+}
+
+.rotate.left:not(.editing) {
+  transform: rotate(-90deg);
+}
+
+.rotate.right:not(.editing) {
+  transform: rotate(90deg);
 }
 
+/* Coordinates should be different when the window is small, because we make
+   the regions smaller then */
+
+@media (max-height: 228px) {
+  .padding.top {
+    top: 37px;
+  }
+
+  .padding.bottom {
+    bottom: 38px;
+  }
+
+  .border.top {
+    top: 19px;
+  }
+
+  .border.bottom {
+    bottom: 20px;
+  }
+
+  .margin.top {
+    top: 1px;
+  }
+
+  .margin.bottom {
+    bottom: 2px;
+  }
+
+  .size,
+  .margin.left,
+  .margin.right,
+  .border.left,
+  .border.right,
+  .padding.left,
+  .padding.right {
+    line-height: 80px;
+  }
+
+  .margin.right,
+  .margin.left,
+  .border.left,
+  .border.right,
+  .padding.right,
+  .padding.left {
+    width: 21px;
+  }
+
+  .padding.left {
+    left: 35px;
+  }
+
+  .padding.right {
+    right: 35px;
+  }
+
+  .border.left {
+    left: 16px;
+  }
+
+  .border.right {
+    right: 17px;
+  }
+}
+
+/* Legend, displayed inside regions */
+
+.legend {
+  position: absolute;
+  margin: 5px 6px;
+  z-index: 1;
+}
+
+.legend[data-box="margin"] {
+  color: var(--theme-highlight-blue);
+}
+
+@media (max-height: 228px) {
+  .legend {
+    margin: 2px 6px;
+  }
+}
+
+/* Editable fields */
+
 .editable {
   border: 1px dashed transparent;
+  -moz-user-select: text;
 }
 
 .editable:hover {
-  border-bottom-color: hsl(0,0%,50%);
+  border-bottom-color: hsl(0, 0%, 50%);
 }
 
 .styleinspector-propertyeditor {
-  border: 1px solid #CCC;
+  border: 1px solid #ccc;
   padding: 0;
 }
+
+/* Make sure the content size doesn't appear as editable like the other sizes */
+
+.size > span {
+  cursor: default;
+}