Bug 1379687 - Fix for device selection menu not remembering custom devices with unicode characters. r=jryans
authorabhinav <abhinav.koppula@gmail.com>
Thu, 21 Sep 2017 23:27:00 +0530
changeset 383300 af03af04a37dd18f2eb3465733b38aec988c8275
parent 383299 d0d30a90efa1695eab6ec3f498598fdfd91c1a97
child 383301 fde231f9bb5194f4b353e14b1e654d4e1df89122
push id95539
push userkwierso@gmail.com
push dateThu, 28 Sep 2017 00:01:12 +0000
treeherdermozilla-inbound@72de90e66155 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjryans
bugs1379687
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1379687 - Fix for device selection menu not remembering custom devices with unicode characters. r=jryans MozReview-Commit-ID: DTEmfg23INc
devtools/client/responsive.html/actions/devices.js
devtools/client/responsive.html/test/browser/browser_device_custom.js
--- 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,75 @@ 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);
+
+  info("Reveal device adder form");
+  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");