Bug 1467572 - Part 13: Removes the custom toolbar button styling and fixes the sizing of the device close button in RDM. r=rcaliman
☠☠ backed out by dc2c0b075c0e ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 15 Aug 2018 17:27:47 -0400
changeset 431827 36d459a2402089a49e901a8d5b393cb997c33af9
parent 431826 abb52c2c68ab5063ba4bcc83cdeeef8a83a1e643
child 431828 4e6b95a6c50619759eced56ee409a8bb1b63a212
push id34451
push userebalazs@mozilla.com
push dateThu, 16 Aug 2018 09:25:15 +0000
treeherdermozilla-central@161817e6d127 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1467572
milestone63.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 1467572 - Part 13: Removes the custom toolbar button styling and fixes the sizing of the device close button in RDM. r=rcaliman
devtools/client/responsive.html/components/DeviceModal.js
devtools/client/responsive.html/components/Toolbar.js
devtools/client/responsive.html/index.css
--- a/devtools/client/responsive.html/components/DeviceModal.js
+++ b/devtools/client/responsive.html/components/DeviceModal.js
@@ -154,17 +154,17 @@ class DeviceModal extends PureComponent 
         className: this.props.devices.isModalOpen ? "opened" : "closed",
       },
       dom.div(
         {
           className: "device-modal container",
         },
         dom.button({
           id: "device-close-button",
-          className: "toolbar-button devtools-button",
+          className: "devtools-button",
           onClick: () => onUpdateDeviceModal(false),
         }),
         dom.div(
           {
             className: "device-modal-content",
           },
           devices.types.map(type => {
             return dom.div(
@@ -182,17 +182,17 @@ class DeviceModal extends PureComponent 
                 const details = getFormatStr(
                   "responsive.deviceDetails", device.width, device.height,
                   device.pixelRatio, device.userAgent, device.touch
                 );
 
                 let removeDeviceButton;
                 if (type == "custom") {
                   removeDeviceButton = dom.button({
-                    className: "device-remove-button toolbar-button devtools-button",
+                    className: "device-remove-button devtools-button",
                     onClick: () => onRemoveCustomDevice(device),
                   });
                 }
 
                 return dom.label(
                   {
                     className: "device-label",
                     key: device.name,
--- a/devtools/client/responsive.html/components/Toolbar.js
+++ b/devtools/client/responsive.html/components/Toolbar.js
@@ -62,21 +62,16 @@ class Toolbar extends PureComponent {
       onExit,
       onRemoveDeviceAssociation,
       onResizeViewport,
       onRotateViewport,
       onScreenshot,
       onUpdateDeviceModal,
     } = this.props;
 
-    let touchButtonClass = "toolbar-button devtools-button";
-    if (touchSimulation.enabled) {
-      touchButtonClass += " checked";
-    }
-
     return dom.header(
       { id: "toolbar" },
       DeviceSelector({
         devices,
         selectedDevice,
         viewportId: viewport.id,
         onChangeDevice,
         onResizeViewport,
@@ -86,17 +81,17 @@ class Toolbar extends PureComponent {
         { id: "toolbar-center-controls" },
         ViewportDimension({
           viewport,
           onRemoveDeviceAssociation,
           onResizeViewport,
         }),
         dom.button({
           id: "rotate-button",
-          className: "toolbar-button devtools-button",
+          className: "devtools-button",
           onClick: () => onRotateViewport(viewport.id),
           title: getStr("responsive.rotate"),
         }),
         dom.div({ className: "devtools-separator" }),
         DevicePixelRatioMenu({
           devices,
           displayPixelRatio,
           selectedDevice,
@@ -107,39 +102,40 @@ class Toolbar extends PureComponent {
         NetworkThrottlingMenu({
           networkThrottling,
           onChangeNetworkThrottling,
           useTopLevelWindow: true,
         }),
         dom.div({ className: "devtools-separator" }),
         dom.button({
           id: "touch-simulation-button",
-          className: touchButtonClass,
+          className: "devtools-button" +
+                     (touchSimulation.enabled ? " checked" : ""),
           title: (touchSimulation.enabled ?
             getStr("responsive.disableTouch") : getStr("responsive.enableTouch")),
           onClick: () => onChangeTouchSimulation(!touchSimulation.enabled),
         })
       ),
       dom.div(
         { id: "toolbar-end-controls" },
         dom.button({
           id: "screenshot-button",
-          className: "toolbar-button devtools-button",
+          className: "devtools-button",
           title: getStr("responsive.screenshot"),
           onClick: onScreenshot,
           disabled: screenshot.isCapturing,
         }),
         SettingsMenu({
           reloadConditions,
           onChangeReloadCondition,
         }),
         dom.div({ className: "devtools-separator" }),
         dom.button({
           id: "exit-button",
-          className: "toolbar-button devtools-button",
+          className: "devtools-button",
           title: getStr("responsive.exit"),
           onClick: onExit,
         })
       )
     );
   }
 }
 
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -4,27 +4,23 @@
 /**
  * CSS Variables specific to the responsive design mode
  */
 
 :root {
   --rdm-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
   --submit-button-active-background-color: rgba(0,0,0,0.12);
   --submit-button-active-color: var(--theme-body-color);
-  --viewport-color: #999797;
-  --viewport-hover-color: var(--theme-body-color);
   --viewport-active-color: #3b3b3b;
 }
 
 :root.theme-dark {
   --rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
   --submit-button-active-background-color: var(--theme-toolbar-hover-active);
   --submit-button-active-color: var(--theme-selection-color);
-  --viewport-color: #c6ccd0;
-  --viewport-hover-color: #dde1e4;
   --viewport-active-color: #fcfcfc;
 }
 
 * {
   box-sizing: border-box;
 }
 
 :root,
@@ -56,67 +52,30 @@ body,
   border: 1px solid var(--theme-splitter-color);
 }
 
 .devtools-separator {
   height: 100%;
   margin: 0 1px;
 }
 
-.toolbar-button {
-  margin: 0;
-  padding: 0;
-  border: none;
-  color: var(--viewport-color);
-}
-
-.toolbar-button:empty:hover:not(:disabled),
-.toolbar-button:empty:-moz-any(:hover:active, .checked):not(:disabled),
-.toolbar-button:not(:empty),
-.toolbar-button:hover:not(:empty):not(:disabled):not(.checked) {
-  /* Reset background from .devtools-button */
-  background: none;
-}
-
-.toolbar-button:active::before {
-  filter: var(--theme-icon-checked-filter);
-}
-
-.toolbar-button.selected {
-  color: var(--viewport-active-color);
-}
-
-.toolbar-button:not(:disabled):hover {
-  color: var(--viewport-hover-color);
-}
-
 /**
  * Toolbar
  */
 
 #toolbar {
   background-color: var(--theme-toolbar-background);
   border-bottom: 1px solid var(--theme-splitter-color);
   display: grid;
   grid-template-columns: min-content auto min-content;
   width: 100%;
   min-height: 29px;
   -moz-user-select: none;
 }
 
-#toolbar > .toolbar-button:first-of-type {
-  margin-inline-start: 8px;
-}
-
-#toolbar > .toolbar-button::before {
-  width: 12px;
-  height: 12px;
-  background-size: cover;
-}
-
 #toolbar-center-controls,
 #toolbar-end-controls {
   display: flex;
   align-items: center;
 }
 
 #toolbar-center-controls {
   justify-self: center;
@@ -359,28 +318,24 @@ body,
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   overflow: auto;
   height: 515px;
   margin: 20px 20px 0;
 }
 
-#device-close-button,
-#device-close-button::before {
+#device-close-button {
   position: absolute;
   top: 5px;
   right: 2px;
-  width: 12px;
-  height: 12px;
 }
 
 #device-close-button::before {
   background-image: url("chrome://devtools/skin/images/close.svg");
-  margin: -6px 0 0 -6px;
 }
 
 .device-type {
   display: flex;
   flex-direction: column;
   padding: 10px;
 }
 
@@ -401,25 +356,18 @@ body,
 .device-input-checkbox {
   margin-right: 5px;
 }
 
 .device-name {
   flex: 1;
 }
 
-.device-remove-button,
-.device-remove-button:empty::before {
-  width: 12px;
-  height: 12px;
-}
-
 .device-remove-button:empty::before {
   background-image: url("chrome://devtools/skin/images/close.svg");
-  margin: -6px 0 0 -6px;
 }
 
 #device-submit-button {
   background-color: var(--theme-tab-toolbar-background);
   border-width: 1px 0 0 0;
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: var(--theme-splitter-color);