summaryrefslogtreecommitdiffstats
path: root/devtools/client/responsive.html/components/device-modal.js
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /devtools/client/responsive.html/components/device-modal.js
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/client/responsive.html/components/device-modal.js')
-rw-r--r--devtools/client/responsive.html/components/device-modal.js181
1 files changed, 181 insertions, 0 deletions
diff --git a/devtools/client/responsive.html/components/device-modal.js b/devtools/client/responsive.html/components/device-modal.js
new file mode 100644
index 000000000..d28b97472
--- /dev/null
+++ b/devtools/client/responsive.html/components/device-modal.js
@@ -0,0 +1,181 @@
+/* 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 { DOM: dom, createClass, PropTypes, addons } =
+ require("devtools/client/shared/vendor/react");
+const { getStr } = require("../utils/l10n");
+const Types = require("../types");
+
+module.exports = createClass({
+ displayName: "DeviceModal",
+
+ propTypes: {
+ devices: PropTypes.shape(Types.devices).isRequired,
+ onDeviceListUpdate: PropTypes.func.isRequired,
+ onUpdateDeviceDisplayed: PropTypes.func.isRequired,
+ onUpdateDeviceModalOpen: PropTypes.func.isRequired,
+ },
+
+ mixins: [ addons.PureRenderMixin ],
+
+ getInitialState() {
+ return {};
+ },
+
+ componentDidMount() {
+ window.addEventListener("keydown", this.onKeyDown, true);
+ },
+
+ componentWillReceiveProps(nextProps) {
+ let {
+ devices,
+ } = nextProps;
+
+ for (let type of devices.types) {
+ for (let device of devices[type]) {
+ this.setState({
+ [device.name]: device.displayed,
+ });
+ }
+ }
+ },
+
+ componentWillUnmount() {
+ window.removeEventListener("keydown", this.onKeyDown, true);
+ },
+
+ onDeviceCheckboxClick({ target }) {
+ this.setState({
+ [target.value]: !this.state[target.value]
+ });
+ },
+
+ onDeviceModalSubmit() {
+ let {
+ devices,
+ onDeviceListUpdate,
+ onUpdateDeviceDisplayed,
+ onUpdateDeviceModalOpen,
+ } = this.props;
+
+ let preferredDevices = {
+ "added": new Set(),
+ "removed": new Set(),
+ };
+
+ for (let type of devices.types) {
+ for (let device of devices[type]) {
+ let newState = this.state[device.name];
+
+ if (device.featured && !newState) {
+ preferredDevices.removed.add(device.name);
+ } else if (!device.featured && newState) {
+ preferredDevices.added.add(device.name);
+ }
+
+ if (this.state[device.name] != device.displayed) {
+ onUpdateDeviceDisplayed(device, type, this.state[device.name]);
+ }
+ }
+ }
+
+ onDeviceListUpdate(preferredDevices);
+ onUpdateDeviceModalOpen(false);
+ },
+
+ onKeyDown(event) {
+ if (!this.props.devices.isModalOpen) {
+ return;
+ }
+ // Escape keycode
+ if (event.keyCode === 27) {
+ let {
+ onUpdateDeviceModalOpen
+ } = this.props;
+ onUpdateDeviceModalOpen(false);
+ }
+ },
+
+ render() {
+ let {
+ devices,
+ onUpdateDeviceModalOpen,
+ } = this.props;
+
+ const sortedDevices = {};
+ for (let type of devices.types) {
+ sortedDevices[type] = Object.assign([], devices[type])
+ .sort((a, b) => a.name.localeCompare(b.name));
+ }
+
+ return dom.div(
+ {
+ id: "device-modal-wrapper",
+ className: this.props.devices.isModalOpen ? "opened" : "closed",
+ },
+ dom.div(
+ {
+ className: "device-modal container",
+ },
+ dom.button({
+ id: "device-close-button",
+ className: "toolbar-button devtools-button",
+ onClick: () => onUpdateDeviceModalOpen(false),
+ }),
+ dom.div(
+ {
+ className: "device-modal-content",
+ },
+ devices.types.map(type => {
+ return dom.div(
+ {
+ className: "device-type",
+ key: type,
+ },
+ dom.header(
+ {
+ className: "device-header",
+ },
+ type
+ ),
+ sortedDevices[type].map(device => {
+ return dom.label(
+ {
+ className: "device-label",
+ key: device.name,
+ },
+ dom.input({
+ className: "device-input-checkbox",
+ type: "checkbox",
+ value: device.name,
+ checked: this.state[device.name],
+ onChange: this.onDeviceCheckboxClick,
+ }),
+ device.name
+ );
+ })
+ );
+ })
+ ),
+ dom.button(
+ {
+ id: "device-submit-button",
+ onClick: this.onDeviceModalSubmit,
+ },
+ getStr("responsive.done")
+ )
+ ),
+ dom.div(
+ {
+ className: "modal-overlay",
+ onClick: () => onUpdateDeviceModalOpen(false),
+ }
+ )
+ );
+ },
+});