mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 16:25:38 +00:00
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)
This commit is contained in:
parent
e9f01af788
commit
3811b11b57
@ -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,28 +38,88 @@ 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);
|
||||
}
|
||||
|
||||
const { browser, os } = parseUserAgent(device.userAgent);
|
||||
let label = device.name;
|
||||
if (os) {
|
||||
label += ` ${os.name}`;
|
||||
if (os.version) {
|
||||
label += ` ${os.version}`;
|
||||
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) {
|
||||
label += ` ${os.name}`;
|
||||
if (os.version) {
|
||||
label += ` ${os.version}`;
|
||||
}
|
||||
}
|
||||
const image = browser
|
||||
? `chrome://devtools/skin/images/browsers/${browser.name.toLowerCase()}.svg`
|
||||
: " ";
|
||||
|
||||
menuItems.push({
|
||||
label,
|
||||
image,
|
||||
type: "checkbox",
|
||||
checked: selectedDevice === device.name,
|
||||
click: () => {
|
||||
doResizeViewport(viewportId, device.width, device.height);
|
||||
onChangeDevice(viewportId, device, type);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let icon = null;
|
||||
let tooltip = label;
|
||||
if (browser) {
|
||||
icon = `chrome://devtools/skin/images/browsers/${browser.name.toLowerCase()}.svg`;
|
||||
tooltip += ` ${browser.name} ${browser.version}`;
|
||||
menuItems.sort(function(a, b) {
|
||||
return a.label.localeCompare(b.label);
|
||||
});
|
||||
|
||||
if (menuItems.length > 0) {
|
||||
menuItems.push("-");
|
||||
}
|
||||
|
||||
return { icon, label, tooltip };
|
||||
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")
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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%;
|
||||
}
|
||||
|
||||
|
@ -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]
|
||||
|
@ -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");
|
||||
});
|
||||
});
|
||||
|
@ -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");
|
||||
});
|
||||
|
@ -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");
|
||||
});
|
||||
|
@ -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));
|
||||
}
|
||||
|
@ -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");
|
||||
}
|
||||
});
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
|
@ -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"
|
||||
|
@ -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)
|
||||
);
|
||||
}
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user