Bug 1436549 - Implement the photon redesign of the box model. r=pbro
authorLawson Cofield <lawsoncofield@gmail.com>
Wed, 14 Mar 2018 00:27:15 -0400
changeset 408235 8b0581f0c879
parent 408234 bb405d71ba67
child 408236 85cf354960ce
push id33630
push usershindli@mozilla.com
push dateThu, 15 Mar 2018 10:14:59 +0000
treeherdermozilla-central@fcb11e93adf5 [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/inspector/boxmodel/test/browser_boxmodel_guides.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/inspector/boxmodel/test/browser_boxmodel_guides.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js
@@ -38,17 +38,17 @@ add_task(async function() {
   await testGuideOnLayoutHover(elt, "padding", inspector);
 
   elt = boxmodel.document.querySelector(".boxmodel-content");
   await testGuideOnLayoutHover(elt, "content", inspector);
 });
 
 async function testGuideOnLayoutHover(elt, expectedRegion, inspector) {
   info("Synthesizing mouseover on the boxmodel-view");
-  EventUtils.synthesizeMouse(elt, 2, 2, {type: "mouseover"},
+  EventUtils.synthesizeMouse(elt, 50, 2, {type: "mouseover"},
     elt.ownerDocument.defaultView);
 
   info("Waiting for the node-highlight event from the toolbox");
   await inspector.toolbox.once("node-highlight");
 
   // Wait for the next event tick to make sure the remaining part of the
   // test is executed after finishing synthesizing mouse event.
   await new Promise(executeSoon);
--- 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: 5px;
+  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: 17px;
 }
 
 .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: 39px;
 }
 
 .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;
 }