Bug 1467572 - Part 4: Move the device selector into the global toolbar. r=jryans
☠☠ backed out by dc2c0b075c0e ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 15 Aug 2018 17:27:32 -0400
changeset 431818 934fb24dad268b7552a27a7f2cba31277eda9e92
parent 431817 6102b9ef805b516ef0cc98fcfdb025c4d377081b
child 431819 c42448ca6e4a14c9f860bff8ebb4cb0087d188e1
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)
reviewersjryans
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 4: Move the device selector into the global toolbar. r=jryans
devtools/client/locales/en-US/responsive.properties
devtools/client/responsive.html/components/App.js
devtools/client/responsive.html/components/DeviceSelector.js
devtools/client/responsive.html/components/GlobalToolbar.js
devtools/client/responsive.html/index.css
--- a/devtools/client/locales/en-US/responsive.properties
+++ b/devtools/client/locales/en-US/responsive.properties
@@ -31,20 +31,16 @@ responsive.deviceListError=No list avail
 
 # LOCALIZATION NOTE (responsive.done): button text in the device list modal
 responsive.done=Done
 
 # LOCALIZATION NOTE (responsive.noDeviceSelected): placeholder text for the
 # device selector
 responsive.noDeviceSelected=no device selected
 
-# LOCALIZATION NOTE  (responsive.title): the title displayed in the global
-# toolbar
-responsive.title=Responsive Design Mode
-
 # LOCALIZATION NOTE (responsive.enableTouch): tooltip text for the touch
 # simulation button when it's disabled
 responsive.enableTouch=Enable touch simulation
 
 # LOCALIZATION NOTE (responsive.disableTouch): tooltip text for the touch
 # simulation button when it's enabled
 responsive.disableTouch=Disable touch simulation
 
--- a/devtools/client/responsive.html/components/App.js
+++ b/devtools/client/responsive.html/components/App.js
@@ -178,16 +178,17 @@ class App extends Component {
       screenshot,
       touchSimulation,
       viewports,
     } = this.props;
 
     const {
       onAddCustomDevice,
       onBrowserMounted,
+      onChangeDevice,
       onChangeNetworkThrottling,
       onChangePixelRatio,
       onChangeReloadCondition,
       onChangeTouchSimulation,
       onContentResize,
       onDeviceListUpdate,
       onExit,
       onRemoveCustomDevice,
@@ -219,22 +220,25 @@ class App extends Component {
         devices,
         displayPixelRatio,
         networkThrottling,
         reloadConditions,
         screenshot,
         selectedDevice,
         selectedPixelRatio,
         touchSimulation,
+        onChangeDevice,
         onChangeNetworkThrottling,
         onChangePixelRatio,
         onChangeReloadCondition,
         onChangeTouchSimulation,
         onExit,
+        onResizeViewport,
         onScreenshot,
+        onUpdateDeviceModal,
       }),
       Viewports({
         screenshot,
         viewports,
         onBrowserMounted,
         onContentResize,
         onRemoveDeviceAssociation,
         onResizeViewport,
--- a/devtools/client/responsive.html/components/DeviceSelector.js
+++ b/devtools/client/responsive.html/components/DeviceSelector.js
@@ -40,18 +40,18 @@ class DeviceSelector extends PureCompone
 
     if (target.value === OPEN_DEVICE_MODAL_VALUE) {
       onUpdateDeviceModal(true, viewportId);
       return;
     }
     for (const type of devices.types) {
       for (const device of devices[type]) {
         if (device.name === target.value) {
-          onResizeViewport(device.width, device.height);
-          onChangeDevice(device, type);
+          onResizeViewport(viewportId, device.width, device.height);
+          onChangeDevice(viewportId, device, type);
           return;
         }
       }
     }
   }
 
   render() {
     const {
--- a/devtools/client/responsive.html/components/GlobalToolbar.js
+++ b/devtools/client/responsive.html/components/GlobalToolbar.js
@@ -6,73 +6,82 @@
 
 const { PureComponent, createFactory } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 const { getStr } = require("../utils/l10n");
 const Types = require("../types");
 const DevicePixelRatioSelector = createFactory(require("./DevicePixelRatioSelector"));
+const DeviceSelector = createFactory(require("./DeviceSelector"));
 const NetworkThrottlingSelector = createFactory(require("devtools/client/shared/components/throttling/NetworkThrottlingSelector"));
 const ReloadConditions = createFactory(require("./ReloadConditions"));
 
 class GlobalToolbar extends PureComponent {
   static get propTypes() {
     return {
       devices: PropTypes.shape(Types.devices).isRequired,
       displayPixelRatio: Types.pixelRatio.value.isRequired,
       networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
       reloadConditions: PropTypes.shape(Types.reloadConditions).isRequired,
       screenshot: PropTypes.shape(Types.screenshot).isRequired,
       selectedDevice: PropTypes.string.isRequired,
       selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
       touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
+      onChangeDevice: PropTypes.func.isRequired,
       onChangeNetworkThrottling: PropTypes.func.isRequired,
       onChangePixelRatio: PropTypes.func.isRequired,
       onChangeReloadCondition: PropTypes.func.isRequired,
       onChangeTouchSimulation: PropTypes.func.isRequired,
       onExit: PropTypes.func.isRequired,
+      onResizeViewport: PropTypes.func.isRequired,
       onScreenshot: PropTypes.func.isRequired,
+      onUpdateDeviceModal: PropTypes.func.isRequired,
     };
   }
 
   render() {
     const {
       devices,
       displayPixelRatio,
       networkThrottling,
       reloadConditions,
       screenshot,
       selectedDevice,
       selectedPixelRatio,
       touchSimulation,
+      onChangeDevice,
       onChangeNetworkThrottling,
       onChangePixelRatio,
       onChangeReloadCondition,
       onChangeTouchSimulation,
       onExit,
+      onResizeViewport,
       onScreenshot,
+      onUpdateDeviceModal,
     } = this.props;
 
     let touchButtonClass = "toolbar-button devtools-button";
     if (touchSimulation.enabled) {
       touchButtonClass += " checked";
     }
 
     return dom.header(
       {
         id: "global-toolbar",
         className: "container",
       },
-      dom.span(
-        {
-          className: "title",
-        },
-        getStr("responsive.title")
-      ),
+      DeviceSelector({
+        devices,
+        selectedDevice,
+        viewportId: 0,
+        onChangeDevice,
+        onResizeViewport,
+        onUpdateDeviceModal,
+      }),
       NetworkThrottlingSelector({
         networkThrottling,
         onChangeNetworkThrottling,
       }),
       DevicePixelRatioSelector({
         devices,
         displayPixelRatio,
         selectedDevice,
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -187,21 +187,16 @@ select > option.divider {
   box-shadow: var(--rdm-box-shadow);
   margin: 0 0 15px 0;
   padding: 4px 5px;
   display: inline-flex;
   align-items: center;
   -moz-user-select: none;
 }
 
-#global-toolbar > .title {
-  border-right: 1px solid var(--theme-splitter-color);
-  padding: 1px 6px 0 2px;
-}
-
 #global-toolbar > .toolbar-button:first-of-type {
   margin-inline-start: 8px;
 }
 
 #global-toolbar > .toolbar-button::before {
   width: 12px;
   height: 12px;
   background-size: cover;