Backed out 3 changesets (bug 1610594) for failures on e.g. browser_device_selector_items.js. CLOSED TREE

Backed out changeset a9a2395b667f (bug 1610594)
Backed out changeset c3f7182fd57f (bug 1610594)
Backed out changeset 3ec353a434f9 (bug 1610594)

devtools/client/responsive/components/DeviceSelector.js

@@ -4,35 +4,27 @@
 
 "use strict";
 
-const Services = require("Services");
 const {
   createFactory,
   PureComponent,
 } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const { hr } = dom;
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const { getStr } = require("devtools/client/responsive/utils/l10n");
 const { parseUserAgent } = require("devtools/client/responsive/utils/ua");
 const Types = require("devtools/client/responsive/types");
 
-const MenuButton = createFactory(
-  require("devtools/client/shared/components/menu/MenuButton")
+const DeviceInfo = createFactory(
+  require("devtools/client/responsive/components/DeviceInfo")
 );
 
-loader.lazyGetter(this, "MenuItem", () => {
-  const menuItemClass = require("devtools/client/shared/components/menu/MenuItem");
-  const menuItem = createFactory(menuItemClass);
-  menuItem.DUMMY_ICON = menuItemClass.DUMMY_ICON;
-  return menuItem;
-});
-
-loader.lazyGetter(this, "MenuList", () => {
-  return createFactory(
-    require("devtools/client/shared/components/menu/MenuList")
+loader.lazyRequireGetter(
+  this,
+  "showMenu",
+  "devtools/client/shared/components/menu/utils",
+  true
 );
-});
 
 class DeviceSelector extends PureComponent {
   static get propTypes() {
@@ -46,11 +38,26 @@ class DeviceSelector extends PureComponent {
     };
   }
 
-  getMenuProps(device) {
-    if (!device) {
-      return { icon: null, label: null, tooltip: null };
+  constructor(props) {
+    super(props);
+    this.onShowDeviceMenu = this.onShowDeviceMenu.bind(this);
   }
 
+  onShowDeviceMenu(event) {
+    const {
+      devices,
+      onChangeDevice,
+      doResizeViewport,
+      onUpdateDeviceModal,
+      selectedDevice,
+      viewportId,
+    } = this.props;
+
+    const menuItems = [];
+
+    for (const type of devices.types) {
+      for (const device of devices[type]) {
+        if (device.displayed) {
           const { browser, os } = parseUserAgent(device.userAgent);
           let label = device.name;
           if (os) {
@@ -59,15 +66,60 @@ class DeviceSelector extends PureComponent {
               label += ` ${os.version}`;
             }
           }
+          const image = browser
+            ? `chrome://devtools/skin/images/browsers/${browser.name.toLowerCase()}.svg`
+            : " ";
 
-    let icon = null;
-    let tooltip = label;
-    if (browser) {
-      icon = `chrome://devtools/skin/images/browsers/${browser.name.toLowerCase()}.svg`;
-      tooltip += ` ${browser.name} ${browser.version}`;
+          menuItems.push({
+            label,
+            image,
+            type: "checkbox",
+            checked: selectedDevice === device.name,
+            click: () => {
+              doResizeViewport(viewportId, device.width, device.height);
+              onChangeDevice(viewportId, device, type);
+            },
+          });
+        }
+      }
     }
 
-    return { icon, label, tooltip };
+    menuItems.sort(function(a, b) {
+      return a.label.localeCompare(b.label);
+    });
+
+    if (menuItems.length > 0) {
+      menuItems.push("-");
+    }
+
+    menuItems.push({
+      label: getStr("responsive.editDeviceList2"),
+      click: () => onUpdateDeviceModal(true, viewportId),
+    });
+
+    showMenu(menuItems, {
+      button: event.target,
+    });
+  }
+
+  createTitle(device) {
+    if (!device) {
+      return null;
+    }
+
+    const { browser, os } = parseUserAgent(device.userAgent);
+    let title = device.name;
+    if (os) {
+      title += ` ${os.name}`;
+      if (os.version) {
+        title += ` ${os.version}`;
+      }
+    }
+    if (browser) {
+      title += ` ${browser.name} ${browser.version}`;
+    }
+
+    return title;
   }
 
   getSelectedDevice() {
@@ -88,99 +140,24 @@ class DeviceSelector extends PureComponent {
     return null;
   }
 
-  renderMenuList() {
-    const {
-      devices,
-      onChangeDevice,
-      doResizeViewport,
-      onUpdateDeviceModal,
-      selectedDevice,
-      viewportId,
-    } = this.props;
-
-    const menuItems = [];
-
-    for (const type of devices.types) {
-      for (const device of devices[type]) {
-        if (device.displayed) {
-          const { icon, label, tooltip } = this.getMenuProps(device);
-
-          menuItems.push(
-            MenuItem({
-              key: label,
-              className: "device-selector-item",
-              checked: selectedDevice === device.name,
-              label,
-              icon: icon || MenuItem.DUMMY_ICON,
-              tooltip,
-              onClick: () => {
-                doResizeViewport(viewportId, device.width, device.height);
-                onChangeDevice(viewportId, device, type);
-              },
-            })
-          );
-        }
-      }
-    }
-
-    menuItems.sort(function(a, b) {
-      return a.props.label.localeCompare(b.props.label);
-    });
-
-    if (menuItems.length > 0) {
-      menuItems.push(hr({ key: "separator" }));
-    }
-
-    menuItems.push(
-      MenuItem({
-        key: "edit-device",
-        label: getStr("responsive.editDeviceList2"),
-        onClick: () => onUpdateDeviceModal(true, viewportId),
-      })
-    );
-
-    return MenuList({}, menuItems);
-  }
-
   render() {
     const { devices } = this.props;
-    const selectedDevice = this.getSelectedDevice();
-    let { icon, label, tooltip } = this.getMenuProps(selectedDevice);
 
-    if (!selectedDevice) {
-      label = getStr("responsive.responsiveMode");
-    }
+    const device = this.getSelectedDevice();
+    const title = this.createTitle(device);
 
-    // MenuButton is expected to be used in the toolbox document usually,
-    // but since RDM's frame also loads theme-switching.js, we can create
-    // MenuButtons (& HTMLTooltips) in the RDM frame document.
-    let toolboxDoc = null;
-    if (Services.prefs.getBoolPref("devtools.responsive.browserUI.enabled")) {
-      toolboxDoc = window.document;
-    } else if (window.parent) {
-      toolboxDoc = window.parent.document;
-    } else {
-      // Main process content in old RDM.
-      // However, actually, this case is a possibility to run through only
-      // from browser_tab_remoteness_change.js test.
-      console.error(
-        "Unable to find a proper document to create the device-selector MenuButton for RDM"
-      );
-      return null;
-    }
-
-    return MenuButton(
+    return dom.button(
       {
         id: "device-selector",
-        menuId: "device-selector-menu",
-        toolboxDoc,
         className: "devtools-button devtools-dropdown-button",
-        label,
-        icon,
-        title: tooltip,
         disabled: devices.listState !== Types.loadableState.LOADED,
+        title,
+        onClick: this.onShowDeviceMenu,
       },
-      () => this.renderMenuList()
+      dom.span(
+        { className: "title" },
+        device ? DeviceInfo({ device }) : getStr("responsive.responsiveMode")
+      )
     );
   }
 }

devtools/client/responsive/index.css

@@ -286,15 +286,6 @@ input:-moz-focusring {
   margin-inline-start: 6px;
 }
 
-#device-selector::before {
-  fill: var(--theme-icon-dimmed-color);
-}
-
-/* Override the style defined in tooltips.css */
-.tooltip-container[type="doorhanger"] .menuitem > .command.iconic.device-selector-item > .label::before {
-  fill: var(--theme-icon-dimmed-color);
-}
-
 #viewports-container {
   display: flex;
   overflow: auto;

devtools/client/responsive/responsive-browser.css

@@ -20,11 +20,10 @@
   border: none;
   position: absolute;
   width: 100%;
-  /* In order to put the HTML menu above the browser element. */
-  z-index: 1;
 }
 
 .browserContainer.responsive-mode .browserStack.device-modal-opened > .rdm-toolbar {
+  z-index: 1;
   height: 100%;
 }
 

devtools/client/responsive/test/browser/browser.ini

@@ -42,7 +42,6 @@ skip-if = fission # No need to fix this test to run with fission before the new
 [browser_device_modal_items.js]
 [browser_device_modal_submit.js]
 [browser_device_pixel_ratio_change.js]
-[browser_device_selector_items.js]
 [browser_device_state_restore.js]
 [browser_device_width.js]
 [browser_exit_button.js]

devtools/client/responsive/test/browser/browser_device_custom.js

@@ -68,7 +68,9 @@ addRDMTask(TEST_URL, async function({ ui }) {
   info("Look for custom device in device selector");
   const deviceSelector = document.getElementById("device-selector");
   await testMenuItems(toolWindow, deviceSelector, items => {
-    const menuItem = findMenuItem(items, device.name);
+    const menuItem = items.find(
+      item => item.getAttribute("label") === device.name
+    );
     ok(menuItem, "Custom device menu item added to device selector");
   });
 });
@@ -120,7 +122,7 @@ addRDMTask(TEST_URL, async function({ ui }) {
 
   info("Ensure custom device was removed from device selector");
   await waitUntilState(store, state => state.viewports[0].device == "");
-  const deviceSelectorTitle = document.querySelector("#device-selector");
+  const deviceSelectorTitle = document.querySelector("#device-selector .title");
   is(
     deviceSelectorTitle.textContent,
     "Responsive",
@@ -130,7 +132,9 @@ addRDMTask(TEST_URL, async function({ ui }) {
   info("Look for custom device in device selector");
   const deviceSelector = document.getElementById("device-selector");
   await testMenuItems(toolWindow, deviceSelector, menuItems => {
-    const menuItem = findMenuItem(menuItems, device.name);
+    const menuItem = menuItems.find(
+      item => item.getAttribute("label") === device.name
+    );
     ok(!menuItem, "Custom device option removed from device selector");
   });
 
@@ -174,7 +178,9 @@ addRDMTask(TEST_URL, async function({ ui }) {
   info("Look for custom unicode device in device selector");
   const deviceSelector = document.getElementById("device-selector");
   await testMenuItems(toolWindow, deviceSelector, items => {
-    const menuItem = findMenuItem(items, unicodeDevice.name);
+    const menuItem = items.find(
+      i => i.getAttribute("label") === unicodeDevice.name
+    );
     ok(menuItem, "Custom unicode device option added to device selector");
   });
 });
@@ -197,7 +203,9 @@ addRDMTask(TEST_URL, async function({ ui }) {
   info("Look for custom unicode device in device selector");
   const deviceSelector = document.getElementById("device-selector");
   await testMenuItems(toolWindow, deviceSelector, items => {
-    const menuItem = findMenuItem(items, unicodeDevice.name);
+    const menuItem = items.find(
+      i => i.getAttribute("label") === unicodeDevice.name
+    );
     ok(menuItem, "Custom unicode device option present in device selector");
   });
 });

devtools/client/responsive/test/browser/browser_device_custom_edit.js

@@ -10,7 +10,7 @@ const TEST_URL = "data:text/html;charset=utf-8,";
 const Types = require("devtools/client/responsive/types");
 
 const device = {
-  name: "Original Custom Device",
+  name: "Custom Device",
   width: 320,
   height: 480,
   pixelRatio: 1,
@@ -49,7 +49,9 @@ addRDMTask(TEST_URL, async function({ ui }) {
   document.getElementById("device-close-button").click();
 
   await testMenuItems(toolWindow, deviceSelector, menuItems => {
-    const originalDevice = findMenuItem(menuItems, device.name);
+    const originalDevice = menuItems.find(
+      i => i.getAttribute("label") === device.name
+    );
     ok(originalDevice, "Original custom device menu item exists.");
   });
 
@@ -108,8 +110,12 @@ addRDMTask(TEST_URL, async function({ ui }) {
   deviceSelector = document.getElementById("device-selector");
 
   await testMenuItems(toolWindow, deviceSelector, menuItems => {
-    const originalDevice = findMenuItem(menuItems, device.name);
-    const editedDevice = findMenuItem(menuItems, newDevice.name);
+    const originalDevice = menuItems.find(
+      i => i.getAttribute("label") === device.name
+    );
+    const editedDevice = menuItems.find(
+      i => i.getAttribute("label") === newDevice.name
+    );
     ok(!originalDevice, "Original custom device menu item does not exist");
     ok(editedDevice, "Edited Custom Device menu item exists");
   });

devtools/client/responsive/test/browser/browser_device_custom_remove.js

@@ -69,8 +69,12 @@ addRDMTask(TEST_URL, async function({ ui }) {
   info("Look for device 1 and 2 in device selector");
 
   await testMenuItems(toolWindow, deviceSelector, menuItems => {
-    const deviceItem1 = findMenuItem(menuItems, device1.name);
-    const deviceItem2 = findMenuItem(menuItems, device2.name);
+    const deviceItem1 = menuItems.find(
+      i => i.getAttribute("label") === device1.name
+    );
+    const deviceItem2 = menuItems.find(
+      i => i.getAttribute("label") === device2.name
+    );
     ok(deviceItem1, "Test device 1 menu item added to device selector");
     ok(deviceItem2, "Test device 2 menu item added to device selector");
   });
@@ -96,8 +100,12 @@ addRDMTask(TEST_URL, async function({ ui }) {
 
   info("Ensure device 2 is no longer in device selector");
   await testMenuItems(toolWindow, deviceSelector, menuItems => {
-    const deviceItem1 = findMenuItem(menuItems, device1.name);
-    const deviceItem2 = findMenuItem(menuItems, device2.name);
+    const deviceItem1 = menuItems.find(
+      i => i.getAttribute("label") === device1.name
+    );
+    const deviceItem2 = menuItems.find(
+      i => i.getAttribute("label") === device2.name
+    );
     ok(deviceItem1, "Test device 1 menu item exists");
     ok(!deviceItem2, "Test device 2 menu item removed");
   });
@@ -119,8 +127,12 @@ addRDMTask(TEST_URL, async function({ ui }) {
 
   info("Ensure device 1 is still in device selector");
   await testMenuItems(toolWindow, deviceSelector, menuItems => {
-    const deviceItem1 = findMenuItem(menuItems, device1.name);
-    const deviceItem2 = findMenuItem(menuItems, device2.name);
+    const deviceItem1 = menuItems.find(
+      i => i.getAttribute("label") === device1.name
+    );
+    const deviceItem2 = menuItems.find(
+      i => i.getAttribute("label") === device2.name
+    );
     ok(deviceItem1, "Test device 1 menu item exists");
     ok(!deviceItem2, "Test device 2 option removed");
   });

devtools/client/responsive/test/browser/browser_device_modal_submit.js

@@ -86,12 +86,14 @@ addRDMTask(TEST_URL, async function({ ui }) {
   info("Checking new device is added to the device selector.");
   await testMenuItems(toolWindow, deviceSelector, menuItems => {
     is(
-      menuItems.length - 1,
+      menuItems.length - 2,
       featuredCount + 1,
       "Got expected number of devices in device selector."
     );
 
-    const menuItem = findMenuItem(menuItems, value);
+    const menuItem = menuItems.find(
+      item => item.getAttribute("label") === name
+    );
     ok(menuItem, value + " added to the device selector.");
   });
 
@@ -121,12 +123,14 @@ addRDMTask(TEST_URL, async function({ ui }) {
   info("Checking that the device is not in the device selector.");
   await testMenuItems(toolWindow, deviceSelector, menuItems => {
     is(
-      menuItems.length - 1,
+      menuItems.length - 2,
       featuredCount,
       "Got expected number of devices in device selector."
     );
 
-    const menuItem = findMenuItem(menuItems, checkedVal);
+    const menuItem = menuItems.find(
+      item => item.getAttribute("label") === checkedVal
+    );
     ok(!menuItem, checkedVal + " removed from the device selector.");
   });
 
@@ -173,24 +177,28 @@ addRDMTask(TEST_URL, async function({ ui }) {
   const deviceSelector = document.getElementById("device-selector");
   await testMenuItems(toolWindow, deviceSelector, items => {
     is(
-      items.length - 1,
+      items.length - 2,
       featuredCount -
         preferredDevices.removed.size +
         preferredDevices.added.size,
       "Got expected number of devices in device selector."
     );
 
-    const added = findMenuItem(items, addedDevice.name);
+    const added = findItem(items, addedDevice.name);
     ok(added, "Dummy device added to the device selector.");
 
     for (const name of preferredDevices.added.keys()) {
-      const menuItem = findMenuItem(items, name);
+      const menuItem = findItem(items, name);
       ok(menuItem, "Device added by user still in the device selector.");
     }
 
     for (const name of preferredDevices.removed.keys()) {
-      const menuItem = findMenuItem(items, name);
+      const menuItem = findItem(items, name);
       ok(!menuItem, "Device removed by user not in the device selector.");
     }
   });
 });
+
+function findItem(items, name) {
+  return items.find(item => item.getAttribute("label").includes(name));
+}

devtools/client/responsive/test/browser/browser_device_selector_items.js

@@ -1,80 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Tests the device selector button and the menu items.
-
-const Types = require("devtools/client/responsive/types");
-const MenuItem = require("devtools/client/shared/components/menu/MenuItem");
-
-const FIREFOX_ICON =
-  'url("chrome://devtools/skin/images/browsers/firefox.svg")';
-const UNKNOWN_ICON = `url("chrome://devtools/skin/${MenuItem.DUMMY_ICON}")`;
-
-const TEST_DEVICES = [
-  {
-    name: "Device of Firefox user-agent",
-    userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
-    width: 320,
-    height: 570,
-    pixelRatio: 5.5,
-    touch: true,
-    firefoxOS: true,
-    os: "custom",
-    featured: true,
-    hasIcon: true,
-  },
-  {
-    name: "Device of non user-agent",
-    userAgent: "custome user agent",
-    width: 320,
-    height: 570,
-    pixelRatio: 5.5,
-    touch: true,
-    firefoxOS: true,
-    os: "custom",
-    featured: true,
-    hasIcon: false,
-  },
-];
-
-addRDMTask(URL_ROOT, async function({ ui }) {
-  for (const testDevice of TEST_DEVICES) {
-    await addDeviceForTest(testDevice);
-  }
-
-  // Wait until the viewport has been added and the device list has been loaded
-  await waitUntilState(
-    ui.toolWindow.store,
-    state =>
-      state.viewports.length == 1 &&
-      state.devices.listState == Types.loadableState.LOADED
-  );
-
-  const deviceSelector = ui.toolWindow.document.getElementById(
-    "device-selector"
-  );
-
-  for (const testDevice of TEST_DEVICES) {
-    info(`Check "${name}" device`);
-    await testMenuItems(ui.toolWindow, deviceSelector, menuItems => {
-      const menuItem = findMenuItem(menuItems, testDevice.name);
-      ok(menuItem, "The menu item is on the list");
-      const label = menuItem.querySelector(".iconic > .label");
-      const backgroundImage = ui.toolWindow.getComputedStyle(label, "::before")
-        .backgroundImage;
-      const icon = testDevice.hasIcon ? FIREFOX_ICON : UNKNOWN_ICON;
-      is(backgroundImage, icon, "The icon is correct");
-    });
-
-    info("Check device selector button");
-    await selectDevice(ui, testDevice.name);
-    const backgroundImage = ui.toolWindow.getComputedStyle(
-      deviceSelector,
-      "::before"
-    ).backgroundImage;
-    const icon = testDevice.hasIcon ? FIREFOX_ICON : "none";
-    is(backgroundImage, icon, "The icon is correct");
-  }
-});

devtools/client/responsive/test/browser/browser_tab_remoteness_change.js

@@ -12,21 +12,12 @@ PromiseTestUtils.whitelistRejectionsGlobally(
   /Permission denied to access property "document" on cross-origin object/
 );
 
-const Types = require("devtools/client/responsive/types");
-
 const TEST_URL = "http://example.com/";
 
 add_task(async function() {
   const tab = await addTab(TEST_URL);
 
   const { ui } = await openRDM(tab);
-  const { store } = ui.toolWindow;
-  await waitUntilState(
-    store,
-    state =>
-      state.viewports.length == 1 &&
-      state.devices.listState == Types.loadableState.LOADED
-  );
   const clientClosed = waitForClientClose(ui);
 
   closeRDM(tab, {
@@ -46,13 +37,6 @@ add_task(async function() {
   const tab = await addTab(TEST_URL);
 
   const { ui } = await openRDM(tab);
-  const { store } = ui.toolWindow;
-  await waitUntilState(
-    store,
-    state =>
-      state.viewports.length == 1 &&
-      state.devices.listState == Types.loadableState.LOADED
-  );
   const clientClosed = waitForClientClose(ui);
 
   // Load URL that requires the main process, forcing a remoteness flip

devtools/client/responsive/test/browser/browser_window_close.js

@@ -3,8 +3,6 @@
 
 "use strict";
 
-const Types = require("devtools/client/responsive/types");
-
 add_task(async function() {
   const newWindowPromise = BrowserTestUtils.waitForNewWindow();
   window.open("data:text/html;charset=utf-8,", "_blank", "noopener,all");
@@ -14,14 +12,7 @@ add_task(async function() {
   await BrowserTestUtils.browserLoaded(newWindow.gBrowser.selectedBrowser);
 
   const tab = newWindow.gBrowser.selectedTab;
-  const { ui } = await openRDM(tab);
-  const { store } = ui.toolWindow;
-  await waitUntilState(
-    store,
-    state =>
-      state.viewports.length == 1 &&
-      state.devices.listState == Types.loadableState.LOADED
-  );
+  await openRDM(tab);
 
   // Close the window on a tab with an active responsive design UI and
   // wait for the UI to gracefully shutdown.  This has leaked the window

devtools/client/responsive/test/browser/head.js

@@ -418,7 +418,9 @@ async function selectMenuItem({ toolWindow }, selector, value) {
   info(`Selecting ${value} in ${selector}.`);
 
   await testMenuItems(toolWindow, button, items => {
-    const menuItem = findMenuItem(items, value);
+    const menuItem = items.find(item =>
+      item.getAttribute("label").includes(value)
+    );
     isnot(
       menuItem,
       undefined,
@@ -439,31 +441,12 @@ async function selectMenuItem({ toolWindow }, selector, value) {
  *         A test function that will be ran with the found menu item in the context menu
  *         as an argument.
  */
-async function testMenuItems(toolWindow, button, testFn) {
-  if (button.id === "device-selector") {
-    // device-selector uses a DevTools MenuButton instead of a XUL menu
-    button.click();
-    // Wait for appearance the menu items..
-    await waitUntil(() =>
-      toolWindow.document.querySelector("#device-selector-menu .menuitem")
-    );
-    const tooltip = toolWindow.document.querySelector("#device-selector-menu");
-    const items = tooltip.querySelectorAll(".menuitem > .command");
-    testFn([...items]);
-
-    if (tooltip.classList.contains("tooltip-visible")) {
-      // Close the tooltip explicitly.
-      button.click();
-      await waitUntil(() => !tooltip.classList.contains("tooltip-visible"));
-    }
-    return;
-  }
-
+function testMenuItems(toolWindow, button, testFn) {
   // The context menu appears only in the top level window, which is different from
   // the inner toolWindow.
   const win = getTopLevelWindow(toolWindow);
 
-  await new Promise(resolve => {
+  return new Promise(resolve => {
     win.document.addEventListener(
       "popupshown",
       () => {
@@ -573,6 +556,7 @@ function forward(browser) {
 
 function addDeviceForTest(device) {
   info(`Adding Test Device "${device.name}" to the list.`);
+  addDevice(device);
 
   registerCleanupFunction(() => {
     // Note that assertions in cleanup functions are not displayed unless they failed.
@@ -581,8 +565,6 @@ function addDeviceForTest(device) {
       `Removed Test Device "${device.name}" from the list.`
     );
   });
-
-  return addDevice(device);
 }
 
 async function waitForClientClose(ui) {
@@ -616,11 +598,21 @@ async function testTouchEventsOverride(ui, expected) {
 function testViewportDeviceMenuLabel(ui, expectedDeviceName) {
   info("Test viewport's device select label");
 
-  const button = ui.toolWindow.document.querySelector("#device-selector");
-  ok(
-    button.textContent.includes(expectedDeviceName),
-    `Device Select value ${button.textContent} should be: ${expectedDeviceName}`
+  const label = ui.toolWindow.document.querySelector("#device-selector .title");
+  const deviceEl = label.querySelector(".device-name");
+  if (deviceEl) {
+    is(
+      deviceEl.textContent,
+      expectedDeviceName,
+      `Device Select value should be: ${expectedDeviceName}`
     );
+  } else {
+    is(
+      label.textContent,
+      expectedDeviceName,
+      `Device Select value should be: ${expectedDeviceName}`
+    );
+  }
 }
 
 async function toggleTouchSimulation(ui) {
@@ -789,10 +781,6 @@ async function editDeviceInModal(ui, device, newDevice) {
   return saved;
 }
 
-function findMenuItem(menuItems, name) {
-  return menuItems.find(menuItem => menuItem.textContent.includes(name));
-}
-
 function reloadOnUAChange(enabled) {
   const pref = RELOAD_CONDITION_PREF_PREFIX + "userAgent";
   Services.prefs.setBoolPref(pref, enabled);

devtools/client/shared/components/menu/MenuButton.js

@@ -58,10 +58,6 @@ class MenuButton extends PureComponent {
       // A text content for the button.
       label: PropTypes.string,
 
-      // URL of the icon to associate with the MenuButton. (Optional)
-      // e.g. chrome://devtools/skin/image/foo.svg
-      icon: PropTypes.string,
-
       // An optional ID to assign to the menu's container tooltip object.
       menuId: PropTypes.string,
 
@@ -422,16 +418,6 @@ class MenuButton extends PureComponent {
       buttonProps["aria-controls"] = this.props.menuId;
     }
 
-    if (this.props.icon) {
-      const iconClass = "menu-button--iconic";
-      buttonProps.className = buttonProps.className
-        ? `${buttonProps.className} ${iconClass}`
-        : iconClass;
-      buttonProps.style = {
-        "--menuitem-icon-image": "url(" + this.props.icon + ")",
-      };
-    }
-
     if (this.state.isMenuInitialized) {
       const menu = createPortal(
         typeof this.props.children === "function"

devtools/client/shared/components/menu/MenuItem.js

@@ -61,14 +61,6 @@ class MenuItem extends PureComponent {
     };
   }
 
-  /**
-   * Use this as a fallback `icon` prop if your MenuList contains MenuItems
-   * with or without icon in order to keep all MenuItems aligned.
-   */
-  static get DUMMY_ICON() {
-    return "dummy-icon.svg";
-  }
-
   constructor(props) {
     super(props);
     this.labelRef = createRef();
@@ -164,10 +156,7 @@ class MenuItem extends PureComponent {
     }
 
     return li(
-      {
-        className: "menuitem",
-        role: "presentation",
-      },
+      { className: "menuitem", role: "presentation" },
       button(attr, children)
     );
   }

devtools/client/themes/tooltips.css

@@ -457,7 +457,6 @@ strong {
   padding-inline-start: 16px;
 }
 
-.menu-button--iconic::before,
 .tooltip-container[type="doorhanger"] .menuitem > .command.iconic > .label::before {
   content: " ";
   display: inline-block;
@@ -471,7 +470,6 @@ strong {
   fill: currentColor;
   background-image: var(--menuitem-icon-image);
   background-size: contain;
-  background-repeat: no-repeat;
   /*
    * The icons in the sidebar menu have opacity: 0.8 here, but those in the
    * hamburger menu don't. For now we match the hamburger menu styling,