Skip to content
Permalink
Browse files
Web Inspector: Show "Device" menu for all sessions 
https://bugs.webkit.org/show_bug.cgi?id=247808
rdar://102241043

Reviewed by Timothy Hatcher.

The device menu allows for applying an array of options that can negatively affect other tabs/windows if those settings
are applied globally. We currently already show the Device menu for remote inspection (like iOS), and with this patch we
will do so for local inspection (like macOS) as well, allowing developers to continue to use the rest of the browser for
normal browsing tasks, instead of using the browser's global settings for disabling core features which will break other
pages, like documentation, they are viewing.

For now we hide the User Agent dropdown, as it is not currently correctly tracking the state of the view, causing some
browser features like Safari's Responsive Design Mode to change the UA without updating this UI at the same time.

* Source/WebInspectorUI/UserInterface/Base/Main.js:
* Source/WebInspectorUI/UserInterface/Images/Computer.svg: Added.

Canonical link: https://commits.webkit.org/257426@main
  • Loading branch information
@patrickangle
patrickangle committed Dec 6, 2022
1 parent 9bef32c commit 93eafbf907d4c798d27490949b762d826870dab8
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 94 deletions.
191 Source/WebInspectorUI/UserInterface/Base/Main.js
View file
@@ -408,17 +408,17 @@ WI.contentLoaded = function()
WI._inspectModeTabBarButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI._toggleInspectMode, WI);
inspectedPageControlNavigationItems.push(WI._inspectModeTabBarButton);

if (InspectorFrontendHost.isRemote || WI.isDebugUIEnabled()) {
// COMPATIBILITY (iOS 12.2): Page.overrideSetting did not exist.
if (InspectorBackend.hasCommand("Page.overrideUserAgent") && InspectorBackend.hasCommand("Page.overrideSetting")) {
const deviceSettingsTooltip = WI.UIString("Device Settings");
WI._deviceSettingsTabBarButton = new WI.ActivateButtonNavigationItem("device-settings", deviceSettingsTooltip, deviceSettingsTooltip, "Images/Device.svg");
WI._deviceSettingsTabBarButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI._handleDeviceSettingsTabBarButtonClicked, WI);
inspectedPageControlNavigationItems.push(WI._deviceSettingsTabBarButton);
// COMPATIBILITY (iOS 12.2): Page.overrideSetting did not exist.
if (InspectorBackend.hasCommand("Page.overrideUserAgent") && InspectorBackend.hasCommand("Page.overrideSetting")) {
const deviceSettingsTooltip = WI.UIString("Device Settings");
WI._deviceSettingsTabBarButton = new WI.ActivateButtonNavigationItem("device-settings", deviceSettingsTooltip, deviceSettingsTooltip, InspectorFrontendHost.isRemote ? "Images/Device.svg" : "Images/Computer.svg");
WI._deviceSettingsTabBarButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI._handleDeviceSettingsTabBarButtonClicked, WI);
inspectedPageControlNavigationItems.push(WI._deviceSettingsTabBarButton);

WI._deviceSettingsPopover = null;
}
WI._deviceSettingsPopover = null;
}

if (InspectorFrontendHost.isRemote || WI.isDebugUIEnabled()) {
let reloadToolTip;
if (WI.sharedApp.debuggableType === WI.DebuggableType.JavaScript || WI.sharedApp.debuggableType === WI.DebuggableType.ITML)
reloadToolTip = WI.UIString("Restart (%s)").format(WI._reloadPageKeyboardShortcut.displayName);
@@ -2200,103 +2200,106 @@ WI._handleDeviceSettingsTabBarButtonClicked = function(event)

let table = contentElement.appendChild(document.createElement("table"));

let userAgentRow = table.appendChild(document.createElement("tr"));

let userAgentTitle = userAgentRow.appendChild(document.createElement("td"));
userAgentTitle.textContent = WI.UIString("User Agent:");

let userAgentValue = userAgentRow.appendChild(document.createElement("td"));
userAgentValue.classList.add("user-agent");

let userAgentValueSelect = userAgentValue.appendChild(document.createElement("select"));

let userAgentValueInput = null;

const userAgents = [
[
{ name: WI.UIString("Default"), value: "default" },
],
[
{ name: "Safari 16.0", value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15" },
],
[
{ name: `Safari ${emDash} iOS 16.0 ${emDash} iPhone`, value: "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1" },
{ name: `Safari ${emDash} iPadOS 16.0 ${emDash} iPad mini`, value: "Mozilla/5.0 (iPad; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1" },
{ name: `Safari ${emDash} iPadOS 16.0 ${emDash} iPad`, value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15" },
],
[
{ name: `Microsoft Edge ${emDash} macOS`, value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36 Edg/103.0.1264.37" },
{ name: `Microsoft Edge ${emDash} Windows`, value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36 Edg/103.0.1264.37" },
],
[
{ name: `Google Chrome ${emDash} macOS`, value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36" },
{ name: `Google Chrome ${emDash} Windows`, value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" },
],
[
{ name: `Firefox ${emDash} macOS`, value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:101.0) Gecko/20100101 Firefox/101.0" },
{ name: `Firefox ${emDash} Windows`, value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0" },
],
[
{ name: WI.UIString("Other\u2026"), value: "other" },
],
];
// FIXME: webkit.org/b/247809 Enable user agent UI once the UI tracks engine-level changes to the current UA (e.g. via API)
if (InspectorFrontendHost.isRemote) {
let userAgentRow = table.appendChild(document.createElement("tr"));

let selectedOptionElement = null;
let userAgentTitle = userAgentRow.appendChild(document.createElement("td"));
userAgentTitle.textContent = WI.UIString("User Agent:");

for (let group of userAgents) {
for (let {name, value} of group) {
let optionElement = userAgentValueSelect.appendChild(document.createElement("option"));
optionElement.value = value;
optionElement.textContent = name;
let userAgentValue = userAgentRow.appendChild(document.createElement("td"));
userAgentValue.classList.add("user-agent");

if (value === WI._overridenDeviceUserAgent)
selectedOptionElement = optionElement;
}
let userAgentValueSelect = userAgentValue.appendChild(document.createElement("select"));

if (group !== userAgents.lastValue)
userAgentValueSelect.appendChild(document.createElement("hr"));
}
let userAgentValueInput = null;

function showUserAgentInput() {
if (userAgentValueInput)
return;
const userAgents = [
[
{ name: WI.UIString("Default"), value: "default" },
],
[
{ name: "Safari 16.0", value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15" },
],
[
{ name: `Safari ${emDash} iOS 16.0 ${emDash} iPhone`, value: "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1" },
{ name: `Safari ${emDash} iPadOS 16.0 ${emDash} iPad mini`, value: "Mozilla/5.0 (iPad; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1" },
{ name: `Safari ${emDash} iPadOS 16.0 ${emDash} iPad`, value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15" },
],
[
{ name: `Microsoft Edge ${emDash} macOS`, value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36 Edg/103.0.1264.37" },
{ name: `Microsoft Edge ${emDash} Windows`, value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36 Edg/103.0.1264.37" },
],
[
{ name: `Google Chrome ${emDash} macOS`, value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36" },
{ name: `Google Chrome ${emDash} Windows`, value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" },
],
[
{ name: `Firefox ${emDash} macOS`, value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:101.0) Gecko/20100101 Firefox/101.0" },
{ name: `Firefox ${emDash} Windows`, value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0" },
],
[
{ name: WI.UIString("Other\u2026"), value: "other" },
],
];

userAgentValueInput = userAgentValue.appendChild(document.createElement("input"));
userAgentValueInput.spellcheck = false;
userAgentValueInput.value = userAgentValueInput.placeholder = WI._overridenDeviceUserAgent || navigator.userAgent;
userAgentValueInput.addEventListener("click", (clickEvent) => {
clickEvent.preventDefault();
});
userAgentValueInput.addEventListener("change", (inputEvent) => {
applyOverriddenUserAgent(userAgentValueInput.value, true);
});
let selectedOptionElement = null;

WI._deviceSettingsPopover.update();
}
for (let group of userAgents) {
for (let {name, value} of group) {
let optionElement = userAgentValueSelect.appendChild(document.createElement("option"));
optionElement.value = value;
optionElement.textContent = name;

if (selectedOptionElement)
userAgentValueSelect.value = selectedOptionElement.value;
else if (WI._overridenDeviceUserAgent) {
userAgentValueSelect.value = "other";
showUserAgentInput();
}
if (value === WI._overridenDeviceUserAgent)
selectedOptionElement = optionElement;
}

userAgentValueSelect.addEventListener("change", () => {
let value = userAgentValueSelect.value;
if (value === "other") {
showUserAgentInput();
userAgentValueInput.select();
} else {
if (userAgentValueInput) {
userAgentValueInput.remove();
userAgentValueInput = null;
if (group !== userAgents.lastValue)
userAgentValueSelect.appendChild(document.createElement("hr"));
}

WI._deviceSettingsPopover.update();
}
function showUserAgentInput() {
if (userAgentValueInput)
return;

applyOverriddenUserAgent(value);
userAgentValueInput = userAgentValue.appendChild(document.createElement("input"));
userAgentValueInput.spellcheck = false;
userAgentValueInput.value = userAgentValueInput.placeholder = WI._overridenDeviceUserAgent || navigator.userAgent;
userAgentValueInput.addEventListener("click", (clickEvent) => {
clickEvent.preventDefault();
});
userAgentValueInput.addEventListener("change", (inputEvent) => {
applyOverriddenUserAgent(userAgentValueInput.value, true);
});

WI._deviceSettingsPopover.update();
}
});

if (selectedOptionElement)
userAgentValueSelect.value = selectedOptionElement.value;
else if (WI._overridenDeviceUserAgent) {
userAgentValueSelect.value = "other";
showUserAgentInput();
}

userAgentValueSelect.addEventListener("change", () => {
let value = userAgentValueSelect.value;
if (value === "other") {
showUserAgentInput();
userAgentValueInput.select();
} else {
if (userAgentValueInput) {
userAgentValueInput.remove();
userAgentValueInput = null;

WI._deviceSettingsPopover.update();
}

applyOverriddenUserAgent(value);
}
});
}

if (InspectorBackend.hasCommand("Page.setScreenSizeOverride")) {
function applyOverriddenScreenSize(value, force) {
6 Source/WebInspectorUI/UserInterface/Images/Computer.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 93eafbf

Please sign in to comment.