--- a/devtools/client/locales/en-US/responsive.properties
+++ b/devtools/client/locales/en-US/responsive.properties
@@ -68,25 +68,25 @@ responsive.remoteOnly=Responsive Design
responsive.noContainerTabs=Responsive Design Mode is currently unavailable in container tabs.
# LOCALIZATION NOTE (responsive.noThrottling): UI option in a menu to configure
# network throttling. This option is the default and disables throttling so you
# just have normal network conditions. There is not very much room in the UI
# so a short string would be best if possible.
responsive.noThrottling=No throttling
-# LOCALIZATION NOTE (responsive.devicePixelRatio): tooltip for the
+# LOCALIZATION NOTE (responsive.changeDevicePixelRatio): tooltip for the
# device pixel ratio dropdown when is enabled.
-responsive.devicePixelRatio=Change device pixel ratio of the viewport.
+responsive.changeDevicePixelRatio=Change device pixel ratio of the viewport
-# LOCALIZATION NOTE (responsive.autoDPR): tooltip for the device pixel ratio
-# dropdown when is disabled because a device is selected.
+# LOCALIZATION NOTE (responsive.devicePixelRatio.auto): tooltip for the device pixel ratio
+# dropdown when it is disabled because a device is selected.
# The argument (%1$S) is the selected device (e.g. iPhone 6) that set
-# automatically the DPR value.
-responsive.autoDPR=DPR automatically set by %1$S
+# automatically the device pixel ratio value.
+responsive.devicePixelRatio.auto=Device pixel ratio automatically set by %1$S
# LOCALIZATION NOTE (responsive.customDeviceName): Default value in a form to
# add a custom device based on an arbitrary size (no association to an existing
# device).
responsive.customDeviceName=Custom Device
# LOCALIZATION NOTE (responsive.customDeviceNameFromBase): Default value in a
# form to add a custom device based on the properties of another. %1$S is the
--- a/devtools/client/responsive.html/actions/index.js
+++ b/devtools/client/responsive.html/actions/index.js
@@ -33,17 +33,17 @@ createEnum([
// display with a different pixel ratio.
"CHANGE_DISPLAY_PIXEL_RATIO",
// Change the network throttling profile.
"CHANGE_NETWORK_THROTTLING",
// The pixel ratio of the viewport has changed. This may be triggered by the user
// when changing the device displayed in the viewport, or when a pixel ratio is
- // selected from the DPR dropdown.
+ // selected from the device pixel ratio dropdown.
"CHANGE_PIXEL_RATIO",
// Change the touch simulation state.
"CHANGE_TOUCH_SIMULATION",
// Indicates that the device list is being loaded
"LOAD_DEVICE_LIST_START",
new file mode 100644
--- /dev/null
+++ b/devtools/client/responsive.html/components/DevicePixelRatioSelector.js
@@ -0,0 +1,131 @@
+/* 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: "DevicePixelRatioSelector",
+
+ 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.devicePixelRatio.auto", selectedDevice);
+ } else {
+ title = getStr("responsive.changeDevicePixelRatio");
+
+ 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-device-pixel-ratio-selector",
+ className: selectorClass,
+ title,
+ },
+ "DPR",
+ dom.select(
+ {
+ value: selectedPixelRatio.value || displayPixelRatio,
+ disabled: isDisabled,
+ onChange: this.onSelectChange,
+ onFocus: this.onFocusChange,
+ onBlur: this.onFocusChange,
+ },
+ ...listContent
+ )
+ );
+ },
+
+});
--- a/devtools/client/responsive.html/components/GlobalToolbar.js
+++ b/devtools/client/responsive.html/components/GlobalToolbar.js
@@ -4,17 +4,17 @@
"use strict";
const { DOM: dom, createClass, createFactory, PropTypes, addons } =
require("devtools/client/shared/vendor/react");
const { getStr } = require("../utils/l10n");
const Types = require("../types");
-const DPRSelector = createFactory(require("./DprSelector"));
+const DevicePixelRatioSelector = createFactory(require("./DevicePixelRatioSelector"));
const NetworkThrottlingSelector = createFactory(require("./NetworkThrottlingSelector"));
module.exports = createClass({
displayName: "GlobalToolbar",
propTypes: {
devices: PropTypes.shape(Types.devices).isRequired,
displayPixelRatio: Types.pixelRatio.value.isRequired,
@@ -63,17 +63,17 @@ module.exports = createClass({
className: "title",
},
getStr("responsive.title")
),
NetworkThrottlingSelector({
networkThrottling,
onChangeNetworkThrottling,
}),
- DPRSelector({
+ DevicePixelRatioSelector({
devices,
displayPixelRatio,
selectedDevice,
selectedPixelRatio,
onChangePixelRatio,
}),
dom.button({
id: "global-touch-simulation-button",
--- a/devtools/client/responsive.html/components/moz.build
+++ b/devtools/client/responsive.html/components/moz.build
@@ -4,17 +4,17 @@
# 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/.
DevToolsModules(
'Browser.js',
'DeviceAdder.js',
'DeviceModal.js',
'DeviceSelector.js',
- 'DprSelector.js',
+ 'DevicePixelRatioSelector.js',
'GlobalToolbar.js',
'NetworkThrottlingSelector.js',
'ResizableViewport.js',
'Viewport.js',
'ViewportDimension.js',
'Viewports.js',
'ViewportToolbar.js',
)
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -171,48 +171,48 @@ select > option.divider {
}
#global-network-throttling-selector {
height: 15px;
padding-left: 0;
width: 103px;
}
-#global-dpr-selector > select {
+#global-device-pixel-ratio-selector > select {
padding: 0 8px 0 0;
margin-left: 2px;
max-width: 5em;
}
-#global-dpr-selector {
+#global-device-pixel-ratio-selector {
margin: 0 8px;
-moz-user-select: none;
color: var(--viewport-color);
height: 15px;
}
-#global-dpr-selector.focused,
-#global-dpr-selector:not(.disabled):hover {
+#global-device-pixel-ratio-selector.focused,
+#global-device-pixel-ratio-selector:not(.disabled):hover {
color: var(--viewport-hover-color);
}
-#global-dpr-selector:not(.disabled):hover > select {
+#global-device-pixel-ratio-selector:not(.disabled):hover > select {
color: var(--viewport-hover-color);
}
-#global-dpr-selector:focus > select {
+#global-device-pixel-ratio-selector:focus > select {
color: var(--viewport-active-color);
}
-#global-dpr-selector.selected,
-#global-dpr-selector.selected > select {
+#global-device-pixel-ratio-selector.selected,
+#global-device-pixel-ratio-selector.selected > select {
color: var(--viewport-active-color);
}
-#global-dpr-selector > select > option {
+#global-device-pixel-ratio-selector > select > option {
padding: 5px;
}
#viewports {
/* Make sure 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 */
position: sticky;
--- a/devtools/client/responsive.html/index.js
+++ b/devtools/client/responsive.html/index.js
@@ -97,35 +97,35 @@ Object.defineProperty(window, "store", {
});
// Dispatch a `changeDisplayPixelRatio` action when the browser's pixel ratio is changing.
// This is usually triggered when the user changes the monitor resolution, or when the
// browser's window is dragged to a different display with a different pixel ratio.
// TODO: It would be better to move this watching into the actor, so that it can be
// better synchronized with any overrides that might be applied. Also, reading a single
// value like this makes less sense with multiple viewports.
-function onDPRChange() {
+function onDevicePixelRatioChange() {
let dpr = window.devicePixelRatio;
let mql = window.matchMedia(`(resolution: ${dpr}dppx)`);
function listener() {
bootstrap.dispatch(changeDisplayPixelRatio(window.devicePixelRatio));
mql.removeListener(listener);
- onDPRChange();
+ onDevicePixelRatioChange();
}
mql.addListener(listener);
}
/**
* Called by manager.js to add the initial viewport based on the original page.
*/
window.addInitialViewport = contentURI => {
try {
- onDPRChange();
+ onDevicePixelRatioChange();
bootstrap.dispatch(changeLocation(contentURI));
bootstrap.dispatch(changeDisplayPixelRatio(window.devicePixelRatio));
bootstrap.dispatch(addViewport());
} catch (e) {
console.error(e);
}
};
new file mode 100644
--- /dev/null
+++ b/tags.txt
@@ -0,0 +1,93 @@
+tip 387105:87e3813e7939
+FIREFOX_NIGHTLY_57_END 382171:f7e9777221a3
+FIREFOX_BETA_57_BASE 380970:8e818b5e9b6b
+FIREFOX_BETA_56_BASE 372245:320642944e42
+FIREFOX_BETA_55_BASE 363444:f9605772a0c9
+FIREFOX_AURORA_54_BASE 346053:6583496f169c
+FIREFOX_AURORA_53_BASE 330632:f80dc9fc3468
+FIREFOX_AURORA_52_BASE 322374:1196bf3032e1
+FIREFOX_AURORA_51_BASE 314369:fc69febcbf6c
+FIREFOX_AURORA_50_BASE 307508:465d150bc8be
+FIREFOX_AURORA_49_BASE 300595:d98f20c25fee
+FIREFOX_AURORA_48_BASE 294731:1c6385ae1fe7
+FIREFOX_AURORA_47_BASE 287009:68d3781deda0
+FIREFOX_AURORA_46_BASE 281478:67c66c2878ae
+FIREFOX_AURORA_45_BASE 276310:99137d6d4061
+FIREFOX_AURORA_44_BASE 270162:67a788db9f07
+FIREFOX_AURORA_43_BASE 263505:fcef8ded8221
+FIREFOX_AURORA_42_BASE 257050:7a19194812eb
+FIREFOX_AURORA_41_BASE 250575:312c68b16549
+FIREFOX_AURORA_40_BASE 243219:66a95a483d2c
+FIREFOX_AURORA_39_BASE 236481:1b6bf6612c0f
+FIREFOX_AURORA_38_BASE 230279:98086da94ccd
+FIREFOX_AURORA_37_BASE 223386:2c951493eef5
+FIREFOX_AURORA_36_BASE 217975:b297a6727acf
+FIREFOX_AURORA_35_BASE 210096:cec1a116c4f9
+FIREFOX_AURORA_34_BASE 202941:c360f3d1c00d
+FIREFOX_AURORA_33_BASE 195309:dc23164ba2a2
+FIREFOX_AURORA_32_BASE 187591:16f3cac5e8fe
+FIREFOX_AURORA_31_BASE 180520:cfde3603b020
+FIREFOX_AURORA_30_BASE 173936:83c9853e1364
+FIREFOX_AURORA_29_BASE 166629:ba2cc1eda988
+FIREFOX_AURORA_28_BASE 159494:9f12a9fab080
+FIREFOX_AURORA_27_BASE 152493:05025f4889a0
+FIREFOX_AURORA_26_BASE 147372:2520866d5874
+FIREFOX_AURORA_25_BASE 141367:ad0ae007aa9e
+FIREFOX_AURORA_24_BASE 136272:8d3810543edc
+FIREFOX_AURORA_23_BASE 131682:d7ce90899997
+FIREFOX_AURORA_22_BASE 126855:1c070ab0f9db
+FIREFOX_AURORA_21_BASE 122315:cc37417e2c28
+FIREFOX_AURORA_20_BASE 117931:5bb309998e70
+FIREFOX_AURORA_19_BASE 113672:cf8750abee06
+FIREFOX_AURORA_18_BASE 109678:2704e441363f
+FIREFOX_AURORA_17_BASE 103565:fd72dbbd6920
+FIREFOX_AURORA_16_BASE 99414:6fdf9985acfe
+FIREFOX_AURORA_15_BASE 95760:26dcd1b1a208
+FIREFOX_AURORA_14_BASE 92214:357da346ceb7
+FIREFOX_AURORA_13_BASE 88950:b6627f28b7ec
+AURORA_BASE_20120131 85837:bbc7014db2de
+AURORA_BASE_20111220 83130:a8506ab2c654
+AURORA_BASE_20111108 80003:54bfd8bf682e
+AURORA_BASE_20110927 77708:c0983049bcaa
+AURORA_BASE_20110816 75388:41b84b87c816
+AURORA_BASE_20110705 72334:5eb553dd2cea
+AURORA_BASE_20110524 70107:9eae975b3d6f
+UPDATE_PACKAGING_R16 69724:462c726144bc
+UPDATE_PACKAGING_R15 69724:462c726144bc
+UPDATE_PACKAGING_R14 69724:462c726144bc
+AURORA_BASE_20110412 68025:a95d42642281
+PRE_MOBILE_MERGE_20110406 64690:b70744835d94
+PRE_MOBILE_MERGE 64690:b70744835d94
+GECKO_2_1_BASE 63430:e273946b74c8
+GECKO_2_0_BASE 63324:e56ecd8b3a68
+bsmedberg-static-xpcom-registration-base 44206:2f83edbbeef0
+UPDATE_PACKAGING_R9 39480:138f593553b6
+UPDATE_PACKAGING_R13 39480:138f593553b6
+UPDATE_PACKAGING_R12 39480:138f593553b6
+UPDATE_PACKAGING_R11_1_MU 39480:138f593553b6
+UPDATE_PACKAGING_R11 39480:138f593553b6
+UPDATE_PACKAGING_R10 39480:138f593553b6
+last-mozilla-central 36290:dba2abb7db57
+chromium-import-r15462 35729:6fd4bb500d42
+chromium-import-latest 35729:6fd4bb500d42
+GECKO_1_9_2_BASE 31433:376b78fc7223
+UPDATE_PACKAGING_R8 28828:fe9cc55b8db7
+FENNEC_B1 26103:5c1e7c779b6e
+FENNEC_M11 24903:f817a4378f32
+UPDATE_PACKAGING_R7 24517:fb32f6e1859c
+FENNEC_A2 23001:8a601ed6bc4c
+GECKO_1_9_1_BASE 22135:8df5a90281cd
+UPDATE_PACKAGING_R6 20584:d7d64f68423b
+SEAMONKEY_2_0a1_RELEASE 19645:920a4326d108
+SEAMONKEY_2_0a1_BUILD1 19645:920a4326d108
+FENNEC_M8 19610:269af1ed7564
+UPDATE_PACKAGING_R5 18521:f197b51bbc29
+FIREFOX_3_1a2_RELEASE 18521:f197b51bbc29
+FIREFOX_3_1a2_BUILD1 18521:f197b51bbc29
+FIREFOX_3_1a1_RELEASE 16209:afc4ee509d9c
+FIREFOX_3_1a1_BUILD2 16209:afc4ee509d9c
+FIREFOX_3_1a1_BUILD1 16136:9d9941eacb14
+FENNEC_M4 15547:caeba7562e49
+MOZILLA_1_9_a7_BASE 4126:66a5c7bce7ee
+MOZILLA_1_9_a6_BASE 2942:4209e16b5841
+MOZILLA_1_9_a4_BASE 845:df7a3c8ffeea
