Bug 1467572 - Part 4: Move the device selector into the global toolbar. r=jryans
MozReview-Commit-ID: 6YaopSdWgG4
--- 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;