From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Fri, 2 Feb 2018 04:16:08 -0500 Subject: Add m-esr52 at 52.6.0 --- devtools/client/responsive.html/app.js | 209 +++++++++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 devtools/client/responsive.html/app.js (limited to 'devtools/client/responsive.html/app.js') 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); -- cgit v1.2.3