Backed out changeset 2afa73fb650a (bug 1436549) for devtools failures on /boxmodel/test/browser_boxmodel_guides.js
authorGurzau Raul <rgurzau@mozilla.com>
Wed, 14 Mar 2018 07:46:03 +0200
changeset 408054 d4c2951dae43
parent 408053 c407e9656999
child 408055 b9370ab70cbf
child 408102 80b4777a6421
push id100840
push userrgurzau@mozilla.com
push dateWed, 14 Mar 2018 05:46:45 +0000
treeherdermozilla-inbound@d4c2951dae43 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1436549
milestone61.0a1
backs out2afa73fb650a
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
Backed out changeset 2afa73fb650a (bug 1436549) for devtools failures on /boxmodel/test/browser_boxmodel_guides.js
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,27 +465,16 @@ 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,20 +10,16 @@
 # 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,22 +2,16 @@
  * 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 */
 
@@ -42,72 +36,67 @@
   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-margin,
 .boxmodel-size {
-  color: var(--grey-90);
-}
-
-.boxmodel-position,
-.boxmodel-margin,
-.boxmodel-padding {
-  color: var(--grey-50);
+  color: var(--theme-highlight-blue);
 }
 
 .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;
-  outline: dashed 1px var(--contentbox-border-color);
+}
+
+.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%);
 }
 
 .boxmodel-margins {
-  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;
+  /* This opacity applies to all of the regions, since they are nested */
+  opacity: .8;
 }
 
 /* Regions colors */
 
 .boxmodel-margins {
-  border-color: var(--marginbox-color);
+  border-color: #edff64;
 }
 
 .boxmodel-borders {
-  border-color: var(--borderbox-color);
+  border-color: #444444;
 }
 
 .boxmodel-paddings {
-  border-color: var(--paddingbox-color);
+  border-color: #6a5acd;
 }
 
 .boxmodel-contents {
-  background-color: var(--contentbox-color);
+  background-color: #87ceeb;
 }
 
 .theme-firebug .boxmodel-main,
 .theme-firebug .boxmodel-header {
   font-family: var(--proportional-font-family);
 }
 
 .theme-firebug .boxmodel-main {
@@ -141,37 +130,37 @@
 
 .boxmodel-top,
 .boxmodel-bottom {
   width: calc(100% - 2px);
   text-align: center;
 }
 
 .boxmodel-padding.boxmodel-top {
-  top: 34px;
+  top: 37px;
 }
 
 .boxmodel-padding.boxmodel-bottom {
-  bottom: 35px;
+  bottom: 38px;
 }
 
 .boxmodel-border.boxmodel-top {
-  top: 16px;
+  top: 19px;
 }
 
 .boxmodel-border.boxmodel-bottom {
-  bottom: 17px;
+  bottom: 20px;
 }
 
 .boxmodel-margin.boxmodel-top {
-  top: 0px;
+  top: 1px;
 }
 
 .boxmodel-margin.boxmodel-bottom {
-  bottom: 1px;
+  bottom: 2px;
 }
 
 .boxmodel-size,
 .boxmodel-position.boxmodel-left,
 .boxmodel-position.boxmodel-right,
 .boxmodel-margin.boxmodel-left,
 .boxmodel-margin.boxmodel-right,
 .boxmodel-border.boxmodel-left,
@@ -195,37 +184,37 @@
 .boxmodel-border.boxmodel-right,
 .boxmodel-border.boxmodel-left,
 .boxmodel-padding.boxmodel-right,
 .boxmodel-padding.boxmodel-left {
   width: 21px;
 }
 
 .boxmodel-padding.boxmodel-left {
-  left: 56px;
+  left: 60px;
 }
 
 .boxmodel-padding.boxmodel-right {
-  right: 56px;
+  right: 60px;
 }
 
 .boxmodel-border.boxmodel-left {
-  left: 38px;
+  left: 41px;
 }
 
 .boxmodel-border.boxmodel-right {
-  right: 39px;
+  right: 42px;
 }
 
 .boxmodel-margin.boxmodel-right {
-  right: 24px;
+  right: 25px;
 }
 
 .boxmodel-margin.boxmodel-left {
-  left: 24px;
+  left: 25px;
 }
 
 .boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
   transform: rotate(-90deg);
 }
 
 .boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
   transform: rotate(90deg);
@@ -248,26 +237,30 @@
   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(--grey-50);
+  border-left: 1px solid var(--theme-highlight-purple);
   left: calc(50% - 2px);
   padding-left: 1px;
 }
 
 .boxmodel-position.boxmodel-right,
 .boxmodel-position.boxmodel-left {
-  border-top: 1px solid var(--grey-50);
+  border-top: 1px solid var(--theme-highlight-purple);
   line-height: 15px;
   top: calc(50% - 1px);
   width: 30px;
 }
 
 .boxmodel-position.boxmodel-top {
   top: -18px;
 }
@@ -283,61 +276,41 @@
 .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"] {
-  margin-left: 9px;
-  margin-top: 4px;
-  color: var(--grey-90);
+  color: var(--theme-highlight-blue);
+}
+
+.theme-dark .boxmodel-legend[data-box="margin"] {
+  color: var(--grey-60);
 }
 
 .boxmodel-legend[data-box="position"] {
-  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;
+  color: var(--theme-highlight-purple);
+  margin: -18px -9px;
 }
 
 /* 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;
 }