Bug 1467572 - Part 13: Removes the custom toolbar button styling and fixes the sizing of the device close button in RDM. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 15 Aug 2018 17:27:47 -0400
changeset 486958 2eb675aaabacaed8fcb14a6defb40f59212e3dc6
parent 486957 06c72f105c508ef96f368ed2f180f94b192501c0
child 486959 8f34ca109aacc66918bb4e17a44cab8fd1acbbdf
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [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);