зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1585095 - Remove the `Viewports` component r=gl
Differential Revision: https://phabricator.services.mozilla.com/D83152
This commit is contained in:
Родитель
44dfe3461e
Коммит
bb1a05a997
|
@ -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);
|
|
|
@ -19,5 +19,4 @@ DevToolsModules(
|
||||||
'Toolbar.js',
|
'Toolbar.js',
|
||||||
'UserAgentInput.js',
|
'UserAgentInput.js',
|
||||||
'ViewportDimension.js',
|
'ViewportDimension.js',
|
||||||
'Viewports.js',
|
|
||||||
)
|
)
|
||||||
|
|
|
@ -295,28 +295,6 @@ input:-moz-focusring {
|
||||||
fill: var(--theme-icon-dimmed-color);
|
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
|
* Viewport Container
|
||||||
*/
|
*/
|
||||||
|
|
Загрузка…
Ссылка в новой задаче