diff --git a/devtools/client/responsive/components/Viewports.js b/devtools/client/responsive/components/Viewports.js deleted file mode 100644 index 8ed1ed31f11b..000000000000 --- a/devtools/client/responsive/components/Viewports.js +++ /dev/null @@ -1,100 +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 { - createFactory, - PureComponent, -} = require("devtools/client/shared/vendor/react"); -const dom = require("devtools/client/shared/vendor/react-dom-factories"); -const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); -const { connect } = require("devtools/client/shared/vendor/react-redux"); - -const ResizableViewport = createFactory( - require("devtools/client/responsive/components/ResizableViewport") -); - -const Types = require("devtools/client/responsive/types"); - -class Viewports extends PureComponent { - static get propTypes() { - return { - leftAlignmentEnabled: PropTypes.bool.isRequired, - onBrowserMounted: PropTypes.func.isRequired, - onContentResize: PropTypes.func.isRequired, - onRemoveDeviceAssociation: PropTypes.func.isRequired, - doResizeViewport: PropTypes.func.isRequired, - onResizeViewport: PropTypes.func.isRequired, - screenshot: PropTypes.shape(Types.screenshot).isRequired, - viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired, - }; - } - - render() { - const { - leftAlignmentEnabled, - onBrowserMounted, - onContentResize, - onRemoveDeviceAssociation, - doResizeViewport, - onResizeViewport, - screenshot, - viewports, - } = this.props; - - const viewportSize = window.getViewportSize(); - // The viewport may not have been created yet. Default to justify-content: center - // for the container. - let justifyContent = "center"; - - // If the RDM viewport is bigger than the window's inner width, set the container's - // justify-content to start so that the 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. - if ( - leftAlignmentEnabled || - (viewportSize && viewportSize.width > window.innerWidth) - ) { - justifyContent = "start"; - } - - return dom.div( - { - id: "viewports-container", - style: { - justifyContent, - }, - }, - dom.div( - { - id: "viewports", - className: leftAlignmentEnabled ? "left-aligned" : "", - }, - viewports.map((viewport, i) => { - return ResizableViewport({ - key: viewport.id, - leftAlignmentEnabled, - onBrowserMounted, - onContentResize, - onRemoveDeviceAssociation, - doResizeViewport, - onResizeViewport, - screenshot, - swapAfterMount: i == 0, - viewport, - }); - }) - ) - ); - } -} - -const mapStateToProps = state => { - return { - leftAlignmentEnabled: state.ui.leftAlignmentEnabled, - }; -}; - -module.exports = connect(mapStateToProps)(Viewports); diff --git a/devtools/client/responsive/components/moz.build b/devtools/client/responsive/components/moz.build index dfbda220f5cf..a3f8a6471051 100644 --- a/devtools/client/responsive/components/moz.build +++ b/devtools/client/responsive/components/moz.build @@ -19,5 +19,4 @@ DevToolsModules( 'Toolbar.js', 'UserAgentInput.js', 'ViewportDimension.js', - 'Viewports.js', ) diff --git a/devtools/client/responsive/index.css b/devtools/client/responsive/index.css index 873b43bae27b..76ed0feddddc 100644 --- a/devtools/client/responsive/index.css +++ b/devtools/client/responsive/index.css @@ -295,28 +295,6 @@ input:-moz-focusring { fill: var(--theme-icon-dimmed-color); } -#viewports-container { - display: flex; - overflow: auto; - height: 100%; - width: 100%; -} - -.theme-light #viewports-container { - background-color: #F5F5F6; -} - -#viewports { - /* Individual viewports are inline elements, make sure they stay on a single - line */ - white-space: nowrap; - margin-top: 16px; -} - -#viewports.left-aligned { - margin-left: 16px; -} - /** * Viewport Container */