Bug 1436549 - Implement the photon redesign of the box model. r=pbro
☠☠ backed out by d4c2951dae43 ☠ ☠
authorLawson Cofield <lawsoncofield@gmail.com>
Wed, 14 Mar 2018 00:27:15 -0400
changeset 408047 2afa73fb650a
parent 408046 04ed9a706cfc
child 408048 26dacf2a27a7
push id100838
push usergabriel.luong@gmail.com
push dateWed, 14 Mar 2018 04:31:01 +0000
treeherdermozilla-inbound@2afa73fb650a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1436549
milestone61.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 1436549 - Implement the photon redesign of the box model. r=pbro
devtools/client/inspector/boxmodel/components/BoxModelMain.js
devtools/client/locales/en-US/boxmodel.properties
devtools/client/themes/boxmodel.css
--- a/devtools/client/inspector/boxmodel/components/BoxModelMain.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
@@ -465,16 +465,27 @@ class BoxModelMain extends PureComponent
         ref: div => {
           this.positionLayout = div;
         },
         onClick: this.onLevelClick,
         onKeyDown: this.onKeyDown,
         onMouseOver: this.onHighlightMouseOver,
         onMouseOut: this.props.onHideBoxModelHighlighter,
       },
+      displayPosition ?
+        dom.span(
+          {
+            className: "boxmodel-legend",
+            "data-box": "position",
+            title: BOXMODEL_L10N.getStr("boxmodel.position"),
+          },
+          BOXMODEL_L10N.getStr("boxmodel.position")
+        )
+        :
+        null,
       dom.div(
         {
           className: "boxmodel-box"
         },
         dom.span(
           {
             className: "boxmodel-legend",
             "data-box": "margin",
--- a/devtools/client/locales/en-US/boxmodel.properties
+++ b/devtools/client/locales/en-US/boxmodel.properties
@@ -10,16 +10,20 @@
 # You want to make that choice consistent across the developer tools.
 # A good criteria is the language in which you'd find the best
 # documentation on web development on the web.
 
 # LOCALIZATION NOTE (boxmodel.title) This is the title of the box model panel and is
 # displayed as a label.
 boxmodel.title=Box Model
 
+# LOCALIZATION NOTE (boxmodel.position) This refers to the position in the box model and
+# might be displayed as a label or as a tooltip.
+boxmodel.position=position
+
 # LOCALIZATION NOTE (boxmodel.margin) This refers to the margin in the box model and
 # might be displayed as a label or as a tooltip.
 boxmodel.margin=margin
 
 # LOCALIZATION NOTE (boxmodel.border) This refers to the border in the box model and
 # might be displayed as a label or as a tooltip.
 boxmodel.border=border
 
--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -2,16 +2,22 @@
  * 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/ */
 
 /**
  * This is the stylesheet of the Box Model view implemented in the layout panel.
  */
 
 .boxmodel-container {
+  --marginbox-color: #fdffdf;
+  --borderbox-color: var(--grey-50);
+  --paddingbox-color: #e3dcff;
+  --contentbox-color: #cff0fb;
+  --marginbox-border-color: #d8e60a;
+  --contentbox-border-color: #54A9FF;
   overflow: auto;
   padding-bottom: 4px;
   max-width: 600px;
   margin: 0 auto;
 }
 
 /* Header */
 
@@ -36,67 +42,72 @@
   width: calc(100% - 2 * 14px);
   min-width: 240px;
   /* The view will grow bigger as the window gets resized, until 400px */
   max-width: 400px;
 }
 
 .boxmodel-box {
   margin: 25px;
-  /* The regions are semi-transparent, so the white background is partly
-     visible */
-  background-color: white;
 }
 
+.boxmodel-size {
+  color: var(--grey-90);
+}
+
+.boxmodel-position,
 .boxmodel-margin,
-.boxmodel-size {
-  color: var(--theme-highlight-blue);
+.boxmodel-padding {
+  color: var(--grey-50);
 }
 
 .theme-dark .boxmodel-margin,
 .theme-dark .boxmodel-size {
   color: var(--grey-60);
 }
 
 /* Regions are 3 nested elements with wide borders and outlines */
 
 .boxmodel-contents {
   height: 18px;
-}
-
-.boxmodel-margins,
-.boxmodel-borders,
-.boxmodel-paddings {
-  border-color: hsla(210,100%,85%,0.2);
-  border-width: 18px;
-  border-style: solid;
-  outline: dotted 1px hsl(210,100%,85%);
+  outline: dashed 1px var(--contentbox-border-color);
 }
 
 .boxmodel-margins {
-  /* This opacity applies to all of the regions, since they are nested */
-  opacity: .8;
+  border-width: 22px;
+  border-style: solid;
+  outline: dashed 1px var(--marginbox-border-color);
+}
+
+.boxmodel-borders {
+  border-width: 4px;
+  border-style: solid;
+}
+
+.boxmodel-paddings {
+  border-width: 27px;
+  border-style: solid;
 }
 
 /* Regions colors */
 
 .boxmodel-margins {
-  border-color: #edff64;
+  border-color: var(--marginbox-color);
 }
 
 .boxmodel-borders {
-  border-color: #444444;
+  border-color: var(--borderbox-color);
 }
 
 .boxmodel-paddings {
-  border-color: #6a5acd;
+  border-color: var(--paddingbox-color);
 }
 
 .boxmodel-contents {
-  background-color: #87ceeb;
+  background-color: var(--contentbox-color);
 }
 
 .theme-firebug .boxmodel-main,
 .theme-firebug .boxmodel-header {
   font-family: var(--proportional-font-family);
 }
 
 .theme-firebug .boxmodel-main {
@@ -130,37 +141,37 @@
 
 .boxmodel-top,
 .boxmodel-bottom {
   width: calc(100% - 2px);
   text-align: center;
 }
 
 .boxmodel-padding.boxmodel-top {
-  top: 37px;
+  top: 34px;
 }
 
 .boxmodel-padding.boxmodel-bottom {
-  bottom: 38px;
+  bottom: 35px;
 }
 
 .boxmodel-border.boxmodel-top {
-  top: 19px;
+  top: 16px;
 }
 
 .boxmodel-border.boxmodel-bottom {
-  bottom: 20px;
+  bottom: 17px;
 }
 
 .boxmodel-margin.boxmodel-top {
-  top: 1px;
+  top: 0px;
 }
 
 .boxmodel-margin.boxmodel-bottom {
-  bottom: 2px;
+  bottom: 1px;
 }
 
 .boxmodel-size,
 .boxmodel-position.boxmodel-left,
 .boxmodel-position.boxmodel-right,
 .boxmodel-margin.boxmodel-left,
 .boxmodel-margin.boxmodel-right,
 .boxmodel-border.boxmodel-left,
@@ -184,37 +195,37 @@
 .boxmodel-border.boxmodel-right,
 .boxmodel-border.boxmodel-left,
 .boxmodel-padding.boxmodel-right,
 .boxmodel-padding.boxmodel-left {
   width: 21px;
 }
 
 .boxmodel-padding.boxmodel-left {
-  left: 60px;
+  left: 56px;
 }
 
 .boxmodel-padding.boxmodel-right {
-  right: 60px;
+  right: 56px;
 }
 
 .boxmodel-border.boxmodel-left {
-  left: 41px;
+  left: 38px;
 }
 
 .boxmodel-border.boxmodel-right {
-  right: 42px;
+  right: 39px;
 }
 
 .boxmodel-margin.boxmodel-right {
-  right: 25px;
+  right: 24px;
 }
 
 .boxmodel-margin.boxmodel-left {
-  left: 25px;
+  left: 24px;
 }
 
 .boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
   transform: rotate(-90deg);
 }
 
 .boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
   transform: rotate(90deg);
@@ -237,30 +248,26 @@
   border-top: none;
   border-left: 1px solid var(--theme-highlight-purple);
   width: auto;
   height: 30px;
 }
 
 /* Box Model Positioning: contains top, right, bottom, left */
 
-.boxmodel-position {
-  color: var(--theme-highlight-purple);
-}
-
 .boxmodel-position.boxmodel-top,
 .boxmodel-position.boxmodel-bottom {
-  border-left: 1px solid var(--theme-highlight-purple);
+  border-left: 1px solid var(--grey-50);
   left: calc(50% - 2px);
   padding-left: 1px;
 }
 
 .boxmodel-position.boxmodel-right,
 .boxmodel-position.boxmodel-left {
-  border-top: 1px solid var(--theme-highlight-purple);
+  border-top: 1px solid var(--grey-50);
   line-height: 15px;
   top: calc(50% - 1px);
   width: 30px;
 }
 
 .boxmodel-position.boxmodel-top {
   top: -18px;
 }
@@ -276,41 +283,61 @@
 .boxmodel-position.boxmodel-left {
   left: -9px;
 }
 
 /* Legend: displayed inside regions */
 
 .boxmodel-legend {
   position: absolute;
-  margin: 2px 6px;
   z-index: 1;
 }
 
 .boxmodel-legend[data-box="margin"] {
-  color: var(--theme-highlight-blue);
-}
-
-.theme-dark .boxmodel-legend[data-box="margin"] {
-  color: var(--grey-60);
+  margin-left: 9px;
+  margin-top: 4px;
+  color: var(--grey-90);
 }
 
 .boxmodel-legend[data-box="position"] {
-  color: var(--theme-highlight-purple);
-  margin: -18px -9px;
+  color: var(--grey-90);
+  margin: -18px 13px;
+}
+
+.boxmodel-legend[data-box="padding"] {
+  margin-top: 12px;
+  margin-left: 12px;
+  color: var(--grey-90);
+}
+
+.boxmodel-legend[data-box="border"] {
+  background-color: var(--borderbox-color);
+  height: 15px;
+  padding-top: 1px;
+  padding-left: 4px;
+  padding-right: 4px;
+  border-radius: 3px;
+  margin: 0px 0px;
 }
 
 /* Editable fields */
 
 .boxmodel-editable {
+  position: relative;
   border: 1px dashed transparent;
   -moz-user-select: none;
   white-space: nowrap;
 }
 
+.boxmodel-editable[data-box="border"] {
+  background-color: var(--borderbox-color);
+  border-radius: 3px;
+  padding: 0 2px;
+}
+
 .boxmodel-editable:hover {
   border-bottom-color: hsl(0, 0%, 50%);
 }
 
 .boxmodel-size > span {
   cursor: default;
 }