Bug 1379687 - Fix for device selection menu not remembering custom devices with unicode characters. r=jryans draft
authorabhinav <abhinav.koppula@gmail.com>
Thu, 21 Sep 2017 23:27:00 +0530
changeset 670183 76a9df121d36cf02a5740f9805629b5743306cc9
parent 668548 ca7d18dbacbf103d74a3213d8d08a7c3e4def9a2
child 733166 feac80284f25c7d58d6671611c48206e59c61ef8
push id81554
push userbmo:abhinav.koppula@gmail.com
push dateTue, 26 Sep 2017 01:51:03 +0000
reviewersjryans
bugs1379687
milestone58.0a1
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,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");