summaryrefslogtreecommitdiffstats
path: root/devtools/client/responsive.html/app.js
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/responsive.html/app.js')
-rw-r--r--devtools/client/responsive.html/app.js209
1 files changed, 209 insertions, 0 deletions
diff --git a/devtools/client/responsive.html/app.js b/devtools/client/responsive.html/app.js
new file mode 100644
index 000000000..739d32b0e
--- /dev/null
+++ b/devtools/client/responsive.html/app.js
@@ -0,0 +1,209 @@
+/* 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/. */
+
+ /* eslint-env browser */
+
+"use strict";
+
+const { createClass, createFactory, PropTypes, DOM: dom } =
+ require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+
+const {
+ updateDeviceDisplayed,
+ updateDeviceModalOpen,
+ updatePreferredDevices,
+} = require("./actions/devices");
+const { changeNetworkThrottling } = require("./actions/network-throttling");
+const { takeScreenshot } = require("./actions/screenshot");
+const { changeTouchSimulation } = require("./actions/touch-simulation");
+const {
+ changeDevice,
+ changePixelRatio,
+ removeDevice,
+ resizeViewport,
+ rotateViewport,
+} = require("./actions/viewports");
+const DeviceModal = createFactory(require("./components/device-modal"));
+const GlobalToolbar = createFactory(require("./components/global-toolbar"));
+const Viewports = createFactory(require("./components/viewports"));
+const Types = require("./types");
+
+let App = createClass({
+ displayName: "App",
+
+ propTypes: {
+ devices: PropTypes.shape(Types.devices).isRequired,
+ displayPixelRatio: Types.pixelRatio.value.isRequired,
+ location: Types.location.isRequired,
+ networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
+ screenshot: PropTypes.shape(Types.screenshot).isRequired,
+ touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
+ viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
+ },
+
+ onBrowserMounted() {
+ window.postMessage({ type: "browser-mounted" }, "*");
+ },
+
+ onChangeDevice(id, device) {
+ window.postMessage({
+ type: "change-device",
+ device,
+ }, "*");
+ this.props.dispatch(changeDevice(id, device.name));
+ this.props.dispatch(changeTouchSimulation(device.touch));
+ this.props.dispatch(changePixelRatio(id, device.pixelRatio));
+ },
+
+ onChangeNetworkThrottling(enabled, profile) {
+ window.postMessage({
+ type: "change-network-throtting",
+ enabled,
+ profile,
+ }, "*");
+ this.props.dispatch(changeNetworkThrottling(enabled, profile));
+ },
+
+ onChangePixelRatio(pixelRatio) {
+ window.postMessage({
+ type: "change-pixel-ratio",
+ pixelRatio,
+ }, "*");
+ this.props.dispatch(changePixelRatio(0, pixelRatio));
+ },
+
+ onChangeTouchSimulation(enabled) {
+ window.postMessage({
+ type: "change-touch-simulation",
+ enabled,
+ }, "*");
+ this.props.dispatch(changeTouchSimulation(enabled));
+ },
+
+ onContentResize({ width, height }) {
+ window.postMessage({
+ type: "content-resize",
+ width,
+ height,
+ }, "*");
+ },
+
+ onDeviceListUpdate(devices) {
+ updatePreferredDevices(devices);
+ },
+
+ onExit() {
+ window.postMessage({ type: "exit" }, "*");
+ },
+
+ onRemoveDevice(id) {
+ // TODO: Bug 1332754: Move messaging and logic into the action creator.
+ window.postMessage({
+ type: "remove-device",
+ }, "*");
+ this.props.dispatch(removeDevice(id));
+ this.props.dispatch(changeTouchSimulation(false));
+ this.props.dispatch(changePixelRatio(id, 0));
+ },
+
+ onResizeViewport(id, width, height) {
+ this.props.dispatch(resizeViewport(id, width, height));
+ },
+
+ onRotateViewport(id) {
+ this.props.dispatch(rotateViewport(id));
+ },
+
+ onScreenshot() {
+ this.props.dispatch(takeScreenshot());
+ },
+
+ onUpdateDeviceDisplayed(device, deviceType, displayed) {
+ this.props.dispatch(updateDeviceDisplayed(device, deviceType, displayed));
+ },
+
+ onUpdateDeviceModalOpen(isOpen) {
+ this.props.dispatch(updateDeviceModalOpen(isOpen));
+ },
+
+ render() {
+ let {
+ devices,
+ displayPixelRatio,
+ location,
+ networkThrottling,
+ screenshot,
+ touchSimulation,
+ viewports,
+ } = this.props;
+
+ let {
+ onBrowserMounted,
+ onChangeDevice,
+ onChangeNetworkThrottling,
+ onChangePixelRatio,
+ onChangeTouchSimulation,
+ onContentResize,
+ onDeviceListUpdate,
+ onExit,
+ onRemoveDevice,
+ onResizeViewport,
+ onRotateViewport,
+ onScreenshot,
+ onUpdateDeviceDisplayed,
+ onUpdateDeviceModalOpen,
+ } = this;
+
+ let selectedDevice = "";
+ let selectedPixelRatio = { value: 0 };
+
+ if (viewports.length) {
+ selectedDevice = viewports[0].device;
+ selectedPixelRatio = viewports[0].pixelRatio;
+ }
+
+ return dom.div(
+ {
+ id: "app",
+ },
+ GlobalToolbar({
+ devices,
+ displayPixelRatio,
+ networkThrottling,
+ screenshot,
+ selectedDevice,
+ selectedPixelRatio,
+ touchSimulation,
+ onChangeNetworkThrottling,
+ onChangePixelRatio,
+ onChangeTouchSimulation,
+ onExit,
+ onScreenshot,
+ }),
+ Viewports({
+ devices,
+ location,
+ screenshot,
+ viewports,
+ onBrowserMounted,
+ onChangeDevice,
+ onContentResize,
+ onRemoveDevice,
+ onRotateViewport,
+ onResizeViewport,
+ onUpdateDeviceModalOpen,
+ }),
+ DeviceModal({
+ devices,
+ onDeviceListUpdate,
+ onUpdateDeviceDisplayed,
+ onUpdateDeviceModalOpen,
+ })
+ );
+ },
+
+});
+
+module.exports = connect(state => state)(App);