Bug 1467572 - Part 4: Move the device selector into the global toolbar. r=jryans

devtools/client/locales/en-US/responsive.properties

@@ -36,10 +36,6 @@ responsive.done=Done
 # 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

devtools/client/responsive.html/components/App.js

@@ -183,6 +183,7 @@ class App extends Component {
     const {
       onAddCustomDevice,
       onBrowserMounted,
+      onChangeDevice,
       onChangeNetworkThrottling,
       onChangePixelRatio,
       onChangeReloadCondition,
@@ -224,12 +225,15 @@ class App extends Component {
         selectedDevice,
         selectedPixelRatio,
         touchSimulation,
+        onChangeDevice,
         onChangeNetworkThrottling,
         onChangePixelRatio,
         onChangeReloadCondition,
         onChangeTouchSimulation,
         onExit,
+        onResizeViewport,
         onScreenshot,
+        onUpdateDeviceModal,
       }),
       Viewports({
         screenshot,

devtools/client/responsive.html/components/DeviceSelector.js

@@ -45,8 +45,8 @@ class DeviceSelector extends PureComponent {
     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;
         }
       }

devtools/client/responsive.html/components/GlobalToolbar.js

@@ -11,6 +11,7 @@ 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"));
 
@@ -25,12 +26,15 @@ class GlobalToolbar extends PureComponent {
       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,
     };
   }
 
@@ -44,12 +48,15 @@ class GlobalToolbar extends PureComponent {
       selectedDevice,
       selectedPixelRatio,
       touchSimulation,
+      onChangeDevice,
       onChangeNetworkThrottling,
       onChangePixelRatio,
       onChangeReloadCondition,
       onChangeTouchSimulation,
       onExit,
+      onResizeViewport,
       onScreenshot,
+      onUpdateDeviceModal,
     } = this.props;
 
     let touchButtonClass = "toolbar-button devtools-button";
@@ -62,12 +69,14 @@ class GlobalToolbar extends PureComponent {
         id: "global-toolbar",
         className: "container",
       },
-      dom.span(
-        {
-          className: "title",
-        },
-        getStr("responsive.title")
-      ),
+      DeviceSelector({
+        devices,
+        selectedDevice,
+        viewportId: 0,
+        onChangeDevice,
+        onResizeViewport,
+        onUpdateDeviceModal,
+      }),
       NetworkThrottlingSelector({
         networkThrottling,
         onChangeNetworkThrottling,

devtools/client/responsive.html/index.css

@@ -192,11 +192,6 @@ select > option.divider {
   -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;
 }