3854af5904
Use "change" instead of "update" terminology with viewport properties. Remove redundant "viewport" word from viewport changes. MozReview-Commit-ID: HSFLiZyTVYy
132 lines
3.1 KiB
JavaScript
132 lines
3.1 KiB
JavaScript
/* 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 Types = require("../types");
|
|
const { getStr, getFormatStr } = require("../utils/l10n");
|
|
|
|
const PIXEL_RATIO_PRESET = [1, 2, 3];
|
|
|
|
const createVisibleOption = value =>
|
|
dom.option({
|
|
value,
|
|
title: value,
|
|
key: value,
|
|
}, value);
|
|
|
|
const createHiddenOption = value =>
|
|
dom.option({
|
|
value,
|
|
title: value,
|
|
hidden: true,
|
|
disabled: true,
|
|
}, value);
|
|
|
|
module.exports = createClass({
|
|
displayName: "DPRSelector",
|
|
|
|
propTypes: {
|
|
devices: PropTypes.shape(Types.devices).isRequired,
|
|
displayPixelRatio: Types.pixelRatio.value.isRequired,
|
|
selectedDevice: PropTypes.string.isRequired,
|
|
selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
|
|
onChangePixelRatio: PropTypes.func.isRequired,
|
|
},
|
|
|
|
mixins: [ addons.PureRenderMixin ],
|
|
|
|
getInitialState() {
|
|
return {
|
|
isFocused: false
|
|
};
|
|
},
|
|
|
|
onFocusChange({type}) {
|
|
this.setState({
|
|
isFocused: type === "focus"
|
|
});
|
|
},
|
|
|
|
onSelectChange({ target }) {
|
|
this.props.onChangePixelRatio(+target.value);
|
|
},
|
|
|
|
render() {
|
|
let {
|
|
devices,
|
|
displayPixelRatio,
|
|
selectedDevice,
|
|
selectedPixelRatio,
|
|
} = this.props;
|
|
|
|
let hiddenOptions = [];
|
|
|
|
for (let type of devices.types) {
|
|
for (let device of devices[type]) {
|
|
if (device.displayed &&
|
|
!hiddenOptions.includes(device.pixelRatio) &&
|
|
!PIXEL_RATIO_PRESET.includes(device.pixelRatio)) {
|
|
hiddenOptions.push(device.pixelRatio);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!PIXEL_RATIO_PRESET.includes(displayPixelRatio)) {
|
|
hiddenOptions.push(displayPixelRatio);
|
|
}
|
|
|
|
let state = devices.listState;
|
|
let isDisabled = (state !== Types.deviceListState.LOADED) || (selectedDevice !== "");
|
|
let selectorClass = "";
|
|
let title;
|
|
|
|
if (isDisabled) {
|
|
selectorClass += " disabled";
|
|
title = getFormatStr("responsive.autoDPR", selectedDevice);
|
|
} else {
|
|
title = getStr("responsive.devicePixelRatio");
|
|
|
|
if (selectedPixelRatio.value) {
|
|
selectorClass += " selected";
|
|
}
|
|
}
|
|
|
|
if (this.state.isFocused) {
|
|
selectorClass += " focused";
|
|
}
|
|
|
|
let listContent = PIXEL_RATIO_PRESET.map(createVisibleOption);
|
|
|
|
if (state == Types.deviceListState.LOADED) {
|
|
listContent = listContent.concat(hiddenOptions.map(createHiddenOption));
|
|
}
|
|
|
|
return dom.label(
|
|
{
|
|
id: "global-dpr-selector",
|
|
className: selectorClass,
|
|
title,
|
|
},
|
|
"DPR",
|
|
dom.select(
|
|
{
|
|
value: selectedPixelRatio.value || displayPixelRatio,
|
|
disabled: isDisabled,
|
|
onChange: this.onSelectChange,
|
|
onFocus: this.onFocusChange,
|
|
onBlur: this.onFocusChange,
|
|
},
|
|
...listContent
|
|
)
|
|
);
|
|
},
|
|
|
|
});
|