Bug 1379687 - Fix for device selection menu not remembering custom devices with unicode characters. r=jryans
MozReview-Commit-ID: DTEmfg23INc
--- a/devtools/client/responsive.html/actions/devices.js
+++ b/devtools/client/responsive.html/actions/devices.js
@@ -31,17 +31,17 @@ const DISPLAYED_DEVICES_PREF = "devtools
function loadPreferredDevices() {
let preferredDevices = {
"added": new Set(),
"removed": new Set(),
};
if (Services.prefs.prefHasUserValue(DISPLAYED_DEVICES_PREF)) {
try {
- let savedData = Services.prefs.getCharPref(DISPLAYED_DEVICES_PREF);
+ let savedData = Services.prefs.getStringPref(DISPLAYED_DEVICES_PREF);
savedData = JSON.parse(savedData);
if (savedData.added && savedData.removed) {
preferredDevices.added = new Set(savedData.added);
preferredDevices.removed = new Set(savedData.removed);
}
} catch (e) {
console.error(e);
}
@@ -58,17 +58,17 @@ function loadPreferredDevices() {
* - removed: Names of the devices that were explicitly removed by the user
*/
function updatePreferredDevices(devices) {
let devicesToSave = {
added: Array.from(devices.added),
removed: Array.from(devices.removed),
};
devicesToSave = JSON.stringify(devicesToSave);
- Services.prefs.setCharPref(DISPLAYED_DEVICES_PREF, devicesToSave);
+ Services.prefs.setStringPref(DISPLAYED_DEVICES_PREF, devicesToSave);
}
module.exports = {
// This function is only exported for testing purposes
_loadPreferredDevices: loadPreferredDevices,
updatePreferredDevices: updatePreferredDevices,
--- a/devtools/client/responsive.html/test/browser/browser_device_custom.js
+++ b/devtools/client/responsive.html/test/browser/browser_device_custom.js
@@ -11,16 +11,27 @@ const device = {
height: 570,
pixelRatio: 1.5,
userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
touch: true,
firefoxOS: false,
os: "android",
};
+const unicodeDevice = {
+ name: "\u00B6\u00C7\u00DA\u00E7\u0126",
+ width: 400,
+ height: 570,
+ pixelRatio: 1.5,
+ userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+ touch: true,
+ firefoxOS: false,
+ os: "android",
+};
+
const TEST_URL = "data:text/html;charset=utf-8,";
const Types = require("devtools/client/responsive.html/types");
addRDMTask(TEST_URL, function* ({ ui }) {
let { toolWindow } = ui;
let { store, document } = toolWindow;
let React = toolWindow.require("devtools/client/shared/vendor/react");
let { Simulate } = React.addons.TestUtils;
@@ -106,16 +117,83 @@ addRDMTask(TEST_URL, function* ({ ui })
is(deviceSelector.value, "", "Device selector reset to no device");
let selectorOption = [...deviceSelector.options].find(opt => opt.value == device.name);
ok(!selectorOption, "Custom device option removed from device selector");
info("Ensure device properties like UA have been reset");
yield testUserAgent(ui, navigator.userAgent);
});
+addRDMTask(TEST_URL, function* ({ ui }) {
+ let { toolWindow } = ui;
+ let { store, document } = toolWindow;
+ let React = toolWindow.require("devtools/client/shared/vendor/react");
+ let { Simulate } = React.addons.TestUtils;
+
+ // Wait until the viewport has been added and the device list has been loaded
+ yield waitUntilState(store, state => state.viewports.length == 1
+ && state.devices.listState == Types.deviceListState.LOADED);
+
+ let deviceSelector = document.querySelector(".viewport-device-selector");
+ let submitButton = document.querySelector("#device-submit-button");
+
+ openDeviceModal(ui);
+
+ // Uncheck all the already checked devices
+ let checkedDevices = document.querySelectorAll(".device-input-checkbox");
+ checkedDevices.forEach(function (label) {
+ if (label.checked) {
+ Simulate.click(label);
+ }
+ });
+
+ info("Reveal device adder form, check that defaults match the viewport");
+ let adderShow = document.querySelector("#device-adder-show");
+ Simulate.click(adderShow);
+
+ info("Fill out device adder form by setting details to unicode device and save");
+ setDeviceAdder(ui, unicodeDevice);
+ let adderSave = document.querySelector("#device-adder-save");
+ let saved = waitUntilState(store, state => state.devices.custom.length == 1);
+ Simulate.click(adderSave);
+ yield saved;
+
+ info("Verify unicode device defaults to enabled in modal");
+ let deviceCb = [...document.querySelectorAll(".device-input-checkbox")].find(cb => {
+ return cb.value == unicodeDevice.name;
+ });
+ ok(deviceCb, "Custom unicode device checkbox added to modal");
+ ok(deviceCb.checked, "Custom unicode device enabled");
+ Simulate.click(submitButton);
+
+ info("Look for custom unicode device in device selector");
+ let selectorOption = [...deviceSelector.options].find(opt =>
+ opt.value == unicodeDevice.name);
+ ok(selectorOption, "Custom unicode device option added to device selector");
+});
+
+addRDMTask(TEST_URL, function* ({ ui }) {
+ let { toolWindow } = ui;
+ let { store, document } = toolWindow;
+
+ // Wait until the viewport has been added and the device list has been loaded
+ yield waitUntilState(store, state => state.viewports.length == 1
+ && state.devices.listState == Types.deviceListState.LOADED);
+
+ let deviceSelector = document.querySelector(".viewport-device-selector");
+
+ // Check if the unicode custom device is present in the list of device options since
+ // we want to ensure that unicode device names are not forgotten after restarting RDM
+ // see bug 1379687
+ info("Look for custom unicode device in device selector");
+ let selectorOption = [...deviceSelector.options].find(opt =>
+ opt.value == unicodeDevice.name);
+ ok(selectorOption, "Custom unicode device option present in device selector");
+});
+
function testDeviceAdder(ui, expected) {
let { document } = ui.toolWindow;
let nameInput = document.querySelector("#device-adder-name input");
let [ widthInput, heightInput ] = document.querySelectorAll("#device-adder-size input");
let pixelRatioInput = document.querySelector("#device-adder-pixel-ratio input");
let userAgentInput = document.querySelector("#device-adder-user-agent input");
let touchInput = document.querySelector("#device-adder-touch input");