Bug 1467572 - Part 4: Move the device selector into the global toolbar. r=jryans draft
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 14 Aug 2018 17:54:53 -0400 (2018-08-14)
changeset 829209 04ab126f2756de1e3b799dc89ff1574bca3baf5b
parent 829208 b9a8ee126caf8f4ee327d5016e7eda0c47335e9a
child 829210 a3eed587c4e5e13585219f6ce90dfdfdc848618e
push id118750
push userbmo:gl@mozilla.com
push dateTue, 14 Aug 2018 21:55:43 +0000 (2018-08-14)
reviewersjryans
bugs1467572
milestone63.0a1
Bug 1467572 - Part 4: Move the device selector into the global toolbar. r=jryans MozReview-Commit-ID: 6YaopSdWgG4
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
@@ -189,21 +189,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;