--- a/devtools/client/responsive.html/components/App.js
+++ b/devtools/client/responsive.html/components/App.js
@@ -178,28 +178,26 @@ class App extends Component {
screenshot,
touchSimulation,
viewports,
} = this.props;
const {
onAddCustomDevice,
onBrowserMounted,
- onChangeDevice,
onChangeNetworkThrottling,
onChangePixelRatio,
onChangeReloadCondition,
onChangeTouchSimulation,
onContentResize,
onDeviceListUpdate,
onExit,
onRemoveCustomDevice,
onRemoveDeviceAssociation,
onResizeViewport,
- onRotateViewport,
onScreenshot,
onUpdateDeviceDisplayed,
onUpdateDeviceModal,
} = this;
let selectedDevice = "";
let selectedPixelRatio = { value: 0 };
@@ -229,26 +227,22 @@ class App extends Component {
onChangeNetworkThrottling,
onChangePixelRatio,
onChangeReloadCondition,
onChangeTouchSimulation,
onExit,
onScreenshot,
}),
Viewports({
- devices,
screenshot,
viewports,
onBrowserMounted,
- onChangeDevice,
onContentResize,
onRemoveDeviceAssociation,
- onRotateViewport,
onResizeViewport,
- onUpdateDeviceModal,
}),
DeviceModal({
deviceAdderViewportTemplate,
devices,
onAddCustomDevice,
onDeviceListUpdate,
onRemoveCustomDevice,
onUpdateDeviceDisplayed,--- a/devtools/client/responsive.html/components/ResizableViewport.js
+++ b/devtools/client/responsive.html/components/ResizableViewport.js
@@ -8,35 +8,30 @@
const { Component, 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 Constants = require("../constants");
const Types = require("../types");
const Browser = createFactory(require("./Browser"));
-const ViewportToolbar = createFactory(require("./ViewportToolbar"));
const VIEWPORT_MIN_WIDTH = Constants.MIN_VIEWPORT_DIMENSION;
const VIEWPORT_MIN_HEIGHT = Constants.MIN_VIEWPORT_DIMENSION;
class ResizableViewport extends Component {
static get propTypes() {
return {
- devices: PropTypes.shape(Types.devices).isRequired,
screenshot: PropTypes.shape(Types.screenshot).isRequired,
swapAfterMount: PropTypes.bool.isRequired,
viewport: PropTypes.shape(Types.viewport).isRequired,
onBrowserMounted: PropTypes.func.isRequired,
- onChangeDevice: PropTypes.func.isRequired,
onContentResize: PropTypes.func.isRequired,
onRemoveDeviceAssociation: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
- onRotateViewport: PropTypes.func.isRequired,
- onUpdateDeviceModal: PropTypes.func.isRequired,
};
}
constructor(props) {
super(props);
this.state = {
isResizing: false,
@@ -125,50 +120,37 @@ class ResizableViewport extends Componen
this.setState({
lastClientX,
lastClientY
});
}
render() {
const {
- devices,
screenshot,
swapAfterMount,
viewport,
onBrowserMounted,
- onChangeDevice,
onContentResize,
- onResizeViewport,
- onRotateViewport,
- onUpdateDeviceModal,
} = this.props;
let resizeHandleClass = "viewport-resize-handle";
if (screenshot.isCapturing) {
resizeHandleClass += " hidden";
}
let contentClass = "viewport-content";
if (this.state.isResizing) {
contentClass += " resizing";
}
return dom.div(
{
className: "resizable-viewport",
},
- ViewportToolbar({
- devices,
- viewport,
- onChangeDevice,
- onResizeViewport,
- onRotateViewport,
- onUpdateDeviceModal,
- }),
dom.div(
{
className: contentClass,
style: {
width: viewport.width + "px",
height: viewport.height + "px",
},
},--- a/devtools/client/responsive.html/components/Viewport.js
+++ b/devtools/client/responsive.html/components/Viewport.js
@@ -10,45 +10,31 @@ const dom = require("devtools/client/sha
const Types = require("../types");
const ResizableViewport = createFactory(require("./ResizableViewport"));
const ViewportDimension = createFactory(require("./ViewportDimension"));
class Viewport extends Component {
static get propTypes() {
return {
- devices: PropTypes.shape(Types.devices).isRequired,
screenshot: PropTypes.shape(Types.screenshot).isRequired,
swapAfterMount: PropTypes.bool.isRequired,
viewport: PropTypes.shape(Types.viewport).isRequired,
onBrowserMounted: PropTypes.func.isRequired,
- onChangeDevice: PropTypes.func.isRequired,
onContentResize: PropTypes.func.isRequired,
onRemoveDeviceAssociation: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
- onRotateViewport: PropTypes.func.isRequired,
- onUpdateDeviceModal: PropTypes.func.isRequired,
};
}
constructor(props) {
super(props);
- this.onChangeDevice = this.onChangeDevice.bind(this);
+
this.onRemoveDeviceAssociation = this.onRemoveDeviceAssociation.bind(this);
this.onResizeViewport = this.onResizeViewport.bind(this);
- this.onRotateViewport = this.onRotateViewport.bind(this);
- }
-
- onChangeDevice(device, deviceType) {
- const {
- viewport,
- onChangeDevice,
- } = this.props;
-
- onChangeDevice(viewport.id, device, deviceType);
}
onRemoveDeviceAssociation() {
const {
viewport,
onRemoveDeviceAssociation,
} = this.props;
@@ -59,62 +45,45 @@ class Viewport extends Component {
const {
viewport,
onResizeViewport,
} = this.props;
onResizeViewport(viewport.id, width, height);
}
- onRotateViewport() {
- const {
- viewport,
- onRotateViewport,
- } = this.props;
-
- onRotateViewport(viewport.id);
- }
-
render() {
const {
- devices,
screenshot,
swapAfterMount,
viewport,
onBrowserMounted,
onContentResize,
- onUpdateDeviceModal,
} = this.props;
const {
- onChangeDevice,
onRemoveDeviceAssociation,
- onRotateViewport,
onResizeViewport,
} = this;
return dom.div(
{
className: "viewport",
},
ViewportDimension({
viewport,
onChangeSize: onResizeViewport,
onRemoveDeviceAssociation,
}),
ResizableViewport({
- devices,
screenshot,
swapAfterMount,
viewport,
onBrowserMounted,
- onChangeDevice,
onContentResize,
onRemoveDeviceAssociation,
onResizeViewport,
- onRotateViewport,
- onUpdateDeviceModal,
})
);
}
}
module.exports = Viewport;deleted file mode 100644
--- a/devtools/client/responsive.html/components/ViewportToolbar.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-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 DeviceSelector = createFactory(require("./DeviceSelector"));
-
-class ViewportToolbar extends PureComponent {
- static get propTypes() {
- return {
- devices: PropTypes.shape(Types.devices).isRequired,
- viewport: PropTypes.shape(Types.viewport).isRequired,
- onChangeDevice: PropTypes.func.isRequired,
- onResizeViewport: PropTypes.func.isRequired,
- onRotateViewport: PropTypes.func.isRequired,
- onUpdateDeviceModal: PropTypes.func.isRequired,
- };
- }
-
- render() {
- const {
- devices,
- viewport,
- onChangeDevice,
- onResizeViewport,
- onRotateViewport,
- onUpdateDeviceModal,
- } = this.props;
-
- return dom.div(
- {
- className: "viewport-toolbar container",
- },
- DeviceSelector({
- devices,
- selectedDevice: viewport.device,
- viewportId: viewport.id,
- onChangeDevice,
- onResizeViewport,
- onUpdateDeviceModal,
- }),
- dom.button({
- className: "viewport-rotate-button toolbar-button devtools-button",
- onClick: onRotateViewport,
- title: getStr("responsive.rotate"),
- })
- );
- }
-}
-
-module.exports = ViewportToolbar;--- a/devtools/client/responsive.html/components/Viewports.js
+++ b/devtools/client/responsive.html/components/Viewports.js
@@ -9,60 +9,48 @@ const PropTypes = require("devtools/clie
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const Types = require("../types");
const Viewport = createFactory(require("./Viewport"));
class Viewports extends Component {
static get propTypes() {
return {
- devices: PropTypes.shape(Types.devices).isRequired,
screenshot: PropTypes.shape(Types.screenshot).isRequired,
viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
onBrowserMounted: PropTypes.func.isRequired,
- onChangeDevice: PropTypes.func.isRequired,
onContentResize: PropTypes.func.isRequired,
onRemoveDeviceAssociation: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
- onRotateViewport: PropTypes.func.isRequired,
- onUpdateDeviceModal: PropTypes.func.isRequired,
};
}
render() {
const {
- devices,
screenshot,
viewports,
onBrowserMounted,
- onChangeDevice,
onContentResize,
onRemoveDeviceAssociation,
onResizeViewport,
- onRotateViewport,
- onUpdateDeviceModal,
} = this.props;
return dom.div(
{
id: "viewports",
},
viewports.map((viewport, i) => {
return Viewport({
key: viewport.id,
- devices,
screenshot,
swapAfterMount: i == 0,
viewport,
onBrowserMounted,
- onChangeDevice,
onContentResize,
onRemoveDeviceAssociation,
onResizeViewport,
- onRotateViewport,
- onUpdateDeviceModal,
});
})
);
}
}
module.exports = Viewports;--- a/devtools/client/responsive.html/components/moz.build
+++ b/devtools/client/responsive.html/components/moz.build
@@ -13,10 +13,9 @@ DevToolsModules(
'DeviceSelector.js',
'GlobalToolbar.js',
'ReloadConditions.js',
'ResizableViewport.js',
'ToggleMenu.js',
'Viewport.js',
'ViewportDimension.js',
'Viewports.js',
- 'ViewportToolbar.js',
)--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -261,16 +261,25 @@ select > option.divider {
#global-device-pixel-ratio-selector.selected {
color: var(--viewport-active-color);
}
#global-device-pixel-ratio-selector > option {
padding: 5px;
}
+.viewport-rotate-button {
+ position: absolute;
+ right: 0;
+}
+
+.viewport-rotate-button::before {
+ background-image: url("./images/rotate-viewport.svg");
+}
+
#viewports {
/* Make sure left-most viewport is visible when there's horizontal overflow.
That is, when the horizontal space become smaller than the viewports and a
scrollbar appears, then the first viewport will still be visible */
position: sticky;
left: 0;
/* Individual viewports are inline elements, make sure they stay on a single
line */
@@ -289,38 +298,16 @@ select > option.divider {
.resizable-viewport {
border: 1px solid var(--theme-splitter-color);
box-shadow: var(--rdm-box-shadow);
position: relative;
}
/**
- * Viewport Toolbar
- */
-
-.viewport-toolbar {
- border-width: 0;
- border-bottom-width: 1px;
- display: flex;
- flex-direction: row;
- justify-content: center;
- height: 16px;
-}
-
-.viewport-rotate-button {
- position: absolute;
- right: 0;
-}
-
-.viewport-rotate-button::before {
- background-image: url("./images/rotate-viewport.svg");
-}
-
-/**
* Viewport Content
*/
.viewport-content.resizing {
pointer-events: none;
}
/**