Web Inspector: add links to reference pages
https://bugs.webkit.org/show_bug.cgi?id=206309
Reviewed by Timothy Hatcher.
* UserInterface/Base/Main.js:
(WI._handleDeviceSettingsToolbarButtonClicked):
(WI.createReferencePageLink): Added.
* UserInterface/Views/Main.css:
(.reference-page-link): Added.
(.reference-page-link:active): Added.
(@media (-webkit-device-pixel-ratio: 1) .reference-page-link): Added.
(@media (prefers-color-scheme: dark) .reference-page-link): Added.
(@media (prefers-color-scheme: dark) .reference-page-link:active): Added.
(.device-settings-content):
(.device-settings-content > table): Added.
(.device-settings-content > table > tr > td:first-child): Added.
(.device-settings-content > .reference-page-link-container): Added.
(body[dir=ltr] .device-settings-content > .reference-page-link-container): Added.
(body[dir=rtl] .device-settings-content > .reference-page-link-container): Added.
(.device-settings-content > tr > td:first-child): Deleted.
* UserInterface/Controllers/NetworkManager.js:
(WI.NetworkManager.prototype.async createBootstrapScript):
* UserInterface/Controllers/BreakpointPopoverController.js:
(WI.BreakpointPopoverController.prototype._createPopoverContent):
(WI.BreakpointPopoverController.prototype._popoverActionsCreateAddActionButton):
* UserInterface/Views/BreakpointPopoverController.css:
(.popover .edit-breakpoint-popover-content > table > tr > td.options): Added.
(.popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container): Added.
(body[dir=ltr] .popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container): Added.
(body[dir=rtl] .popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container): Added.
(body[dir=ltr] .popover .edit-breakpoint-popover-content .reference-page-link-container): Added.
(body[dir=rtl] .popover .edit-breakpoint-popover-content .reference-page-link-container): Added.
* UserInterface/Views/EventBreakpointPopover.js:
(WI.EventBreakpointPopover.prototype.show):
* UserInterface/Views/EventBreakpointPopover.css:
(.popover .event-breakpoint-content .reference-page-link-container): Added.
* UserInterface/Views/URLBreakpointPopover.js:
(WI.URLBreakpointPopover.prototype.show):
* UserInterface/Views/URLBreakpointPopover.css:
(.popover .url-breakpoint-content .reference-page-link-container): Added.
* UserInterface/Views/LocalResourceOverridePopover.js:
(WI.LocalResourceOverridePopover.prototype.show):
* UserInterface/Views/LocalResourceOverridePopover.css:
(.popover .local-resource-override-popover-content .reference-page-link-container): Added.
(body[dir=ltr] .popover .local-resource-override-popover-content .reference-page-link-container): Added.
(body[dir=rtl] .popover .local-resource-override-popover-content .reference-page-link-container): Added.
* UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype.initialLayout):
(WI.SettingsTabContentView.prototype._createGeneralSettingsView):
(WI.SettingsTabContentView.prototype._createElementsSettingsView):
(WI.SettingsTabContentView.prototype._createSourcesSettingsView):
(WI.SettingsTabContentView.prototype._createConsoleSettingsView):
(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
(WI.SettingsTabContentView.prototype._createReferenceLink): Added.
* UserInterface/Views/SettingsTabContentView.css:
(.content-view.tab.settings): Added.
(.content-view.tab.settings .navigation-bar): Added.
(.content-view.tab.settings .navigation-bar.invisible): Added.
(.content-view.tab.settings .navigation-bar .item.radio.button.text-only): Added.
(.content-view.tab.settings .navigation-bar .item.radio.button.text-only:before): Added.
(.content-view.tab.settings .navigation-bar .item.radio.button.text-only.selected): Added.
(.content-view.tab.settings > .settings-view): Added.
(.content-view.tab.settings > .settings-view > .separator): Added.
(.content-view.tab.settings > .settings-view > .container): Added.
(.content-view.tab.settings > .settings-view > .container.hidden): Added.
(.content-view.tab.settings > .settings-view > .container-centered): Added.
(.content-view.tab.settings > .settings-view > .container button): Added.
(.content-view.tab.settings > .settings-view > .container > .title): Added.
(.content-view.tab.settings > .settings-view > .container > .editor-group): Added.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor): Added.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor:first-child > *): Added.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input): Added.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"]): Added.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor select): Added.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="number"]): Added.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="text"]): Added.
(.content-view.tab.settings > .settings-view > .container.reference): Added.
(.content-view.tab.settings > .settings-view > .container.reference > .reference-page-link): Added.
(.content-view.tab.settings > .settings-view > .container.reference > .reference-page-link > .go-to-arrow): Added.
(.content-view.settings .navigation-bar): Deleted.
(.content-view.settings .navigation-bar.invisible): Deleted.
(.content-view.settings .navigation-bar .item.radio.button.text-only): Deleted.
(.content-view.settings .navigation-bar .item.radio.button.text-only:before): Deleted.
(.content-view.settings .navigation-bar .item.radio.button.text-only.selected): Deleted.
(.content-view.settings > .settings-view): Deleted.
(.content-view.settings > .settings-view > .separator): Deleted.
(.content-view.settings > .settings-view > .container): Deleted.
(.content-view.settings > .settings-view > .container.hidden): Deleted.
(.content-view.settings > .settings-view > .container-centered): Deleted.
(.content-view.settings > .settings-view > .container button): Deleted.
(.content-view.settings > .settings-view > .container > .title): Deleted.
(.content-view.settings > .settings-view > .container > .editor-group): Deleted.
(.content-view.settings > .settings-view > .container > .editor-group > .editor): Deleted.
(.content-view.settings > .settings-view > .container > .editor-group > .editor:first-child > *): Deleted.
(.content-view.settings > .settings-view > .container > .editor-group > .editor input): Deleted.
(.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"]): Deleted.
(.content-view.settings > .settings-view > .container > .editor-group > .editor select): Deleted.
(.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"]): Deleted.
(.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="text"]): Deleted.
(@media (prefers-color-scheme: dark) .content-view.settings .navigation-bar): Deleted.
(@media (prefers-color-scheme: dark) .content-view.settings .navigation-bar .item.radio.button.text-only.selected): Deleted.
* UserInterface/Views/BlackboxSettingsView.js:
(WI.BlackboxSettingsView.prototype.initialLayout):
* UserInterface/Views/BlackboxSettingsView.css:
(.settings-view.blackbox > table > tbody td.url): Added.
(.settings-view.blackbox > table > tbody td.url > .CodeMirror):
* Localizations/en.lproj/localizedStrings.js:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@254730 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 1bdfefb..4454ec2 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,5 +1,121 @@
2020-01-16 Devin Rousso <drousso@apple.com>
+ Web Inspector: add links to reference pages
+ https://bugs.webkit.org/show_bug.cgi?id=206309
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Base/Main.js:
+ (WI._handleDeviceSettingsToolbarButtonClicked):
+ (WI.createReferencePageLink): Added.
+ * UserInterface/Views/Main.css:
+ (.reference-page-link): Added.
+ (.reference-page-link:active): Added.
+ (@media (-webkit-device-pixel-ratio: 1) .reference-page-link): Added.
+ (@media (prefers-color-scheme: dark) .reference-page-link): Added.
+ (@media (prefers-color-scheme: dark) .reference-page-link:active): Added.
+ (.device-settings-content):
+ (.device-settings-content > table): Added.
+ (.device-settings-content > table > tr > td:first-child): Added.
+ (.device-settings-content > .reference-page-link-container): Added.
+ (body[dir=ltr] .device-settings-content > .reference-page-link-container): Added.
+ (body[dir=rtl] .device-settings-content > .reference-page-link-container): Added.
+ (.device-settings-content > tr > td:first-child): Deleted.
+
+ * UserInterface/Controllers/NetworkManager.js:
+ (WI.NetworkManager.prototype.async createBootstrapScript):
+
+ * UserInterface/Controllers/BreakpointPopoverController.js:
+ (WI.BreakpointPopoverController.prototype._createPopoverContent):
+ (WI.BreakpointPopoverController.prototype._popoverActionsCreateAddActionButton):
+ * UserInterface/Views/BreakpointPopoverController.css:
+ (.popover .edit-breakpoint-popover-content > table > tr > td.options): Added.
+ (.popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container): Added.
+ (body[dir=ltr] .popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container): Added.
+ (body[dir=rtl] .popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container): Added.
+ (body[dir=ltr] .popover .edit-breakpoint-popover-content .reference-page-link-container): Added.
+ (body[dir=rtl] .popover .edit-breakpoint-popover-content .reference-page-link-container): Added.
+ * UserInterface/Views/EventBreakpointPopover.js:
+ (WI.EventBreakpointPopover.prototype.show):
+ * UserInterface/Views/EventBreakpointPopover.css:
+ (.popover .event-breakpoint-content .reference-page-link-container): Added.
+ * UserInterface/Views/URLBreakpointPopover.js:
+ (WI.URLBreakpointPopover.prototype.show):
+ * UserInterface/Views/URLBreakpointPopover.css:
+ (.popover .url-breakpoint-content .reference-page-link-container): Added.
+
+ * UserInterface/Views/LocalResourceOverridePopover.js:
+ (WI.LocalResourceOverridePopover.prototype.show):
+ * UserInterface/Views/LocalResourceOverridePopover.css:
+ (.popover .local-resource-override-popover-content .reference-page-link-container): Added.
+ (body[dir=ltr] .popover .local-resource-override-popover-content .reference-page-link-container): Added.
+ (body[dir=rtl] .popover .local-resource-override-popover-content .reference-page-link-container): Added.
+
+ * UserInterface/Views/SettingsTabContentView.js:
+ (WI.SettingsTabContentView.prototype.initialLayout):
+ (WI.SettingsTabContentView.prototype._createGeneralSettingsView):
+ (WI.SettingsTabContentView.prototype._createElementsSettingsView):
+ (WI.SettingsTabContentView.prototype._createSourcesSettingsView):
+ (WI.SettingsTabContentView.prototype._createConsoleSettingsView):
+ (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
+ (WI.SettingsTabContentView.prototype._createReferenceLink): Added.
+ * UserInterface/Views/SettingsTabContentView.css:
+ (.content-view.tab.settings): Added.
+ (.content-view.tab.settings .navigation-bar): Added.
+ (.content-view.tab.settings .navigation-bar.invisible): Added.
+ (.content-view.tab.settings .navigation-bar .item.radio.button.text-only): Added.
+ (.content-view.tab.settings .navigation-bar .item.radio.button.text-only:before): Added.
+ (.content-view.tab.settings .navigation-bar .item.radio.button.text-only.selected): Added.
+ (.content-view.tab.settings > .settings-view): Added.
+ (.content-view.tab.settings > .settings-view > .separator): Added.
+ (.content-view.tab.settings > .settings-view > .container): Added.
+ (.content-view.tab.settings > .settings-view > .container.hidden): Added.
+ (.content-view.tab.settings > .settings-view > .container-centered): Added.
+ (.content-view.tab.settings > .settings-view > .container button): Added.
+ (.content-view.tab.settings > .settings-view > .container > .title): Added.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group): Added.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor): Added.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor:first-child > *): Added.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input): Added.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"]): Added.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor select): Added.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="number"]): Added.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="text"]): Added.
+ (.content-view.tab.settings > .settings-view > .container.reference): Added.
+ (.content-view.tab.settings > .settings-view > .container.reference > .reference-page-link): Added.
+ (.content-view.tab.settings > .settings-view > .container.reference > .reference-page-link > .go-to-arrow): Added.
+ (.content-view.settings .navigation-bar): Deleted.
+ (.content-view.settings .navigation-bar.invisible): Deleted.
+ (.content-view.settings .navigation-bar .item.radio.button.text-only): Deleted.
+ (.content-view.settings .navigation-bar .item.radio.button.text-only:before): Deleted.
+ (.content-view.settings .navigation-bar .item.radio.button.text-only.selected): Deleted.
+ (.content-view.settings > .settings-view): Deleted.
+ (.content-view.settings > .settings-view > .separator): Deleted.
+ (.content-view.settings > .settings-view > .container): Deleted.
+ (.content-view.settings > .settings-view > .container.hidden): Deleted.
+ (.content-view.settings > .settings-view > .container-centered): Deleted.
+ (.content-view.settings > .settings-view > .container button): Deleted.
+ (.content-view.settings > .settings-view > .container > .title): Deleted.
+ (.content-view.settings > .settings-view > .container > .editor-group): Deleted.
+ (.content-view.settings > .settings-view > .container > .editor-group > .editor): Deleted.
+ (.content-view.settings > .settings-view > .container > .editor-group > .editor:first-child > *): Deleted.
+ (.content-view.settings > .settings-view > .container > .editor-group > .editor input): Deleted.
+ (.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"]): Deleted.
+ (.content-view.settings > .settings-view > .container > .editor-group > .editor select): Deleted.
+ (.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"]): Deleted.
+ (.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="text"]): Deleted.
+ (@media (prefers-color-scheme: dark) .content-view.settings .navigation-bar): Deleted.
+ (@media (prefers-color-scheme: dark) .content-view.settings .navigation-bar .item.radio.button.text-only.selected): Deleted.
+ * UserInterface/Views/BlackboxSettingsView.js:
+ (WI.BlackboxSettingsView.prototype.initialLayout):
+ * UserInterface/Views/BlackboxSettingsView.css:
+ (.settings-view.blackbox > table > tbody td.url): Added.
+ (.settings-view.blackbox > table > tbody td.url > .CodeMirror):
+
+ * Localizations/en.lproj/localizedStrings.js:
+
+2020-01-16 Devin Rousso <drousso@apple.com>
+
Web Inspector: show the device settings menu when Web Inspector's debug mode is enabled
https://bugs.webkit.org/show_bug.cgi?id=206311
diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
index f5bc8eb..038e065 100644
--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
@@ -134,6 +134,7 @@
localizedStrings["Anonymous Script %d"] = "Anonymous Script %d";
localizedStrings["Anonymous Scripts"] = "Anonymous Scripts";
localizedStrings["Anonymous Style Sheet %d"] = "Anonymous Style Sheet %d";
+localizedStrings["Anonymous Style Sheets"] = "Anonymous Style Sheets";
localizedStrings["Application Cache"] = "Application Cache";
/* Approximate count of events */
localizedStrings["Approximate Number"] = "~%s";
@@ -745,6 +746,7 @@
localizedStrings["Mixed"] = "Mixed";
localizedStrings["Modifications made here will take effect on the next load of any page or sub-frame."] = "Modifications made here will take effect on the next load of any page or sub-frame.";
localizedStrings["Module Code"] = "Module Code";
+localizedStrings["More information is available at <https://webkit.org/web-inspector/inspector-bootstrap-script/>."] = "More information is available at <https://webkit.org/web-inspector/inspector-bootstrap-script/>.";
localizedStrings["Multi-Entry"] = "Multi-Entry";
localizedStrings["Name"] = "Name";
localizedStrings["Network"] = "Network";
@@ -1297,6 +1299,7 @@
localizedStrings["Watch Expressions"] = "Watch Expressions";
localizedStrings["Waterfall"] = "Waterfall";
localizedStrings["Web Inspector"] = "Web Inspector";
+localizedStrings["Web Inspector Reference"] = "Web Inspector Reference";
localizedStrings["Web Page"] = "Web Page";
localizedStrings["WebKit Threads"] = "WebKit Threads";
localizedStrings["WebP"] = "WebP";
diff --git a/Source/WebInspectorUI/UserInterface/Base/Main.js b/Source/WebInspectorUI/UserInterface/Base/Main.js
index 71650d3..8271e13 100644
--- a/Source/WebInspectorUI/UserInterface/Base/Main.js
+++ b/Source/WebInspectorUI/UserInterface/Base/Main.js
@@ -2101,10 +2101,12 @@
WI._deviceSettingsPopover.present(calculateTargetFrame(), preferredEdges);
};
- let contentElement = document.createElement("table");
+ let contentElement = document.createElement("div");
contentElement.classList.add("device-settings-content");
- let userAgentRow = contentElement.appendChild(document.createElement("tr"));
+ 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:");
@@ -2232,7 +2234,7 @@
if (!group.columns.some((column) => column.some((item) => item.setting)))
continue;
- let settingsGroupRow = contentElement.appendChild(document.createElement("tr"));
+ let settingsGroupRow = table.appendChild(document.createElement("tr"));
let settingsGroupTitle = settingsGroupRow.appendChild(document.createElement("td"));
settingsGroupTitle.textContent = group.name;
@@ -2251,6 +2253,8 @@
}
}
+ contentElement.appendChild(WI.createReferencePageLink("device-settings"));
+
WI._deviceSettingsPopover.presentNewContentWithFrame(contentElement, calculateTargetFrame(), preferredEdges);
};
@@ -2823,6 +2827,23 @@
return containerElement;
};
+WI.createReferencePageLink = function(page, fragment)
+{
+ let url = "https://webkit.org/web-inspector/" + page + "/";
+ if (fragment)
+ url += "#" + fragment;
+
+ let wrapper = document.createElement("span");
+ wrapper.className = "reference-page-link-container";
+
+ let link = wrapper.appendChild(document.createElement("a"));
+ link.className = "reference-page-link";
+ link.href = link.title = url;
+ link.textContent = "?";
+
+ return wrapper;
+};
+
WI.createGoToArrowButton = function()
{
var button = document.createElement("button");
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
index f4d0c1c..1011e5a 100644
--- a/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
+++ b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
@@ -209,8 +209,12 @@
let optionsRow = this._popoverOptionsRowElement = table.appendChild(document.createElement("tr"));
if (!this._breakpoint.actions.length)
optionsRow.classList.add(WI.BreakpointPopoverController.HiddenStyleClassName);
+
let optionsHeader = optionsRow.appendChild(document.createElement("th"));
+
let optionsData = optionsRow.appendChild(document.createElement("td"));
+ optionsData.className = "options";
+
let optionsLabel = optionsHeader.appendChild(document.createElement("label"));
let optionsCheckbox = this._popoverOptionsCheckboxElement = optionsData.appendChild(document.createElement("input"));
let optionsCheckboxLabel = optionsData.appendChild(document.createElement("label"));
@@ -222,6 +226,8 @@
optionsCheckboxLabel.setAttribute("for", optionsCheckbox.id);
optionsCheckboxLabel.textContent = WI.UIString("Automatically continue after evaluating");
+ optionsData.appendChild(WI.createReferencePageLink("javascript-breakpoints", "configuration"));
+
this._popoverContentElement.appendChild(checkboxLabel);
this._popoverContentElement.appendChild(table);
}
@@ -282,6 +288,8 @@
let addActionButton = this._actionsContainer.appendChild(document.createElement("button"));
addActionButton.textContent = WI.UIString("Add Action");
addActionButton.addEventListener("click", this._popoverActionsAddActionButtonClicked.bind(this));
+
+ this._actionsContainer.appendChild(WI.createReferencePageLink("javascript-breakpoints", "configuration"));
}
_popoverActionsAddActionButtonClicked(event)
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/NetworkManager.js b/Source/WebInspectorUI/UserInterface/Controllers/NetworkManager.js
index 5700051..fbf1d87 100644
--- a/Source/WebInspectorUI/UserInterface/Controllers/NetworkManager.js
+++ b/Source/WebInspectorUI/UserInterface/Controllers/NetworkManager.js
@@ -315,8 +315,10 @@
* ${WI.UIString("Some examples of ways to use this script include (but are not limited to):")}
* - ${WI.UIString("overriding built-in functions to log call traces or add `debugger` statements")}
* - ${WI.UIString("ensuring that common debugging functions are available on every page via the Console")}
+ *
+ * ${WI.UIString("More information is available at <https://webkit.org/web-inspector/inspector-bootstrap-script/>.")}
*/
-`;
+`.trimStart();
}
const target = null;
diff --git a/Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.css b/Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.css
index 25778be..78dad7c 100644
--- a/Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.css
@@ -68,9 +68,14 @@
text-align: start;
}
+.settings-view.blackbox > table > tbody td.url {
+ background-color: var(--background-color-content);
+}
+
.settings-view.blackbox > table > tbody td.url > .CodeMirror {
min-width: 110px;
height: auto;
+ background-color: transparent;
}
.settings-view.blackbox > table :matches(th, td):matches(.case-sensitive, .remove-blackbox) {
diff --git a/Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.js b/Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.js
index 19c6744..90a03d0 100644
--- a/Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.js
@@ -53,10 +53,10 @@
{
super.initialLayout();
- let patternBlackboxExplanationElement = this.element.appendChild(document.createElement("p"));
+ let patternBlackboxExplanationElement = this.element.insertBefore(document.createElement("p"), this.element.lastChild);
patternBlackboxExplanationElement.textContent = WI.UIString("If the URL of any script matches one of the regular expression patterns below, any pauses that would have happened in that script will be deferred until execution has continued to outside of that script.");
- let table = this.element.appendChild(document.createElement("table"));
+ let table = this.element.insertBefore(document.createElement("table"), this.element.lastChild);
let tableHead = table.appendChild(document.createElement("thead"));
@@ -100,7 +100,7 @@
this._addRow(null);
});
- let individualBlackboxExplanationElement = this.element.appendChild(document.createElement("p"));
+ let individualBlackboxExplanationElement = this.element.insertBefore(document.createElement("p"), this.element.lastChild);
let blackboxIconElement = WI.ImageUtilities.useSVGSymbol("Images/Hide.svg#currentColor", "toggle-script-blackbox", WI.UIString("Ignore script when debugging"));
String.format(WI.UIString("Scripts can also be individually blackboxed by clicking on the %s icon that is shown on hover."), [blackboxIconElement], String.standardFormatters, individualBlackboxExplanationElement, (a, b) => {
a.append(b);
diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css b/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
index 0db62e1..215163c 100644
--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
@@ -55,6 +55,30 @@
padding-left: 5px;
}
+.popover .edit-breakpoint-popover-content > table > tr > td.options {
+ position: relative;
+}
+
+.popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container {
+ position: absolute;
+}
+
+body[dir=ltr] .popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container {
+ right: 0;
+}
+
+body[dir=rtl] .popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container {
+ left: 0;
+}
+
+body[dir=ltr] .popover .edit-breakpoint-popover-content .reference-page-link-container {
+ float: right;
+}
+
+body[dir=rtl] .popover .edit-breakpoint-popover-content .reference-page-link-container {
+ float: left;
+}
+
.edit-breakpoint-popover-condition {
width: 100%;
padding: 4px 0 2px;
diff --git a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css
index c7fb215..9770814 100644
--- a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css
+++ b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css
@@ -37,3 +37,8 @@
.popover .event-breakpoint-content > input::placeholder {
font-family: system-ui;
}
+
+.popover .event-breakpoint-content .reference-page-link-container {
+ -webkit-margin-start: 0.5em;
+ vertical-align: -1px;
+}
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js
index fe12746..6a1e924 100644
--- a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js
+++ b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js
@@ -96,6 +96,8 @@
});
});
+ contentElement.appendChild(WI.createReferencePageLink("event-breakpoints", "global-event-breakpoints"));
+
this.content = contentElement;
this._presentOverTargetElement();
diff --git a/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css b/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css
index a5735e4..9652016 100644
--- a/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css
+++ b/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css
@@ -98,6 +98,18 @@
margin-top: 8px;
}
+.popover .local-resource-override-popover-content .reference-page-link-container {
+ margin-top: 6px;
+}
+
+body[dir=ltr] .popover .local-resource-override-popover-content .reference-page-link-container {
+ float: right;
+}
+
+body[dir=rtl] .popover .local-resource-override-popover-content .reference-page-link-container {
+ float: left;
+}
+
@media (prefers-color-scheme: dark) {
.popover .local-resource-override-popover-content > table > tr > th {
color: var(--text-color-secondary);
diff --git a/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.js b/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.js
index a471b6d..facd92a 100644
--- a/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.js
+++ b/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.js
@@ -288,6 +288,8 @@
this._headersDataGrid.startEditingNode(newNode);
});
+ headersData.appendChild(WI.createReferencePageLink("local-overrides", "configuring-local-overrides"));
+
let incrementStatusCode = () => {
let x = parseInt(this._statusCodeCodeMirror.getValue());
if (isNaN(x))
diff --git a/Source/WebInspectorUI/UserInterface/Views/Main.css b/Source/WebInspectorUI/UserInterface/Views/Main.css
index 9f105f1..ce31af4 100644
--- a/Source/WebInspectorUI/UserInterface/Views/Main.css
+++ b/Source/WebInspectorUI/UserInterface/Views/Main.css
@@ -433,13 +433,59 @@
--checkerboard-dark-square: hsl(0, 0%, 95%);
}
+.reference-page-link {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ width: 20px;
+ height: 20px;
+ font-size: 14px;
+ line-height: 18px;
+ color: var(--text-color);
+ text-decoration: none;
+ background-color: var(--button-background-color);
+ border: var(--stroke-width) solid var(--border-color);
+ border-radius: 50%;
+ box-shadow: 0 var(--stroke-width) 1px var(--border-color);
+ cursor: default;
+
+ --stroke-width: 0.5px;
+}
+
+.reference-page-link:active {
+ background-color: var(--button-background-color-active);
+}
+
+@media (-webkit-device-pixel-ratio: 1) {
+ .reference-page-link {
+ -webkit-padding-start: 1px;
+
+ --stroke-width: 1px;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .reference-page-link {
+ border: var(--stroke-width) solid hsl(0, 0%, 20%);
+ box-shadow: 0 var(--stroke-width) 1px hsl(0, 0%, 20%);
+ }
+
+ .reference-page-link:active {
+ background-color: hsl(0, 0%, 50%);
+ }
+}
+
.device-settings-content {
+ position: relative;
padding: 0 4px;
+}
+
+.device-settings-content > table {
border-collapse: separate;
border-spacing: 4px 8px;
}
-.device-settings-content > tr > td:first-child {
+.device-settings-content > table > tr > td:first-child {
text-align: end;
vertical-align: top;
}
@@ -479,6 +525,19 @@
-webkit-margin-end: 4px;
}
+.device-settings-content > .reference-page-link-container {
+ position: absolute;
+ bottom: 0.5em;
+}
+
+body[dir=ltr] .device-settings-content > .reference-page-link-container {
+ right: 0.5em;
+}
+
+body[dir=rtl] .device-settings-content > .reference-page-link-container {
+ left: 0.5em;
+}
+
@media (prefers-color-scheme: dark) {
.go-to-arrow {
filter: invert();
diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
index 345d7b9..c270197 100644
--- a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
@@ -24,87 +24,97 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.content-view.settings .navigation-bar {
- background-color: white;
+.content-view.tab.settings {
+ overflow-y: auto;
}
-.content-view.settings .navigation-bar.invisible {
+.content-view.tab.settings .navigation-bar {
+ position: sticky;
+ top: 0;
+ z-index: var(--z-index-header);
+ background-color: var(--background-color-content);
+}
+
+.content-view.tab.settings .navigation-bar.invisible {
visibility: hidden;
}
-.content-view.settings .navigation-bar .item.radio.button.text-only {
+.content-view.tab.settings .navigation-bar .item.radio.button.text-only {
color: inherit;
background-color: inherit;
}
-.content-view.settings .navigation-bar .item.radio.button.text-only:before {
+.content-view.tab.settings .navigation-bar .item.radio.button.text-only:before {
display: none;
}
-.content-view.settings .navigation-bar .item.radio.button.text-only.selected {
- color: var(--selected-background-color)
+.content-view.tab.settings .navigation-bar .item.radio.button.text-only.selected {
+ color: var(--glyph-color-active);
}
-.content-view.settings > .settings-view {
- height: 100%;
+.content-view.tab.settings > .settings-view {
+ display: flex;
+ flex-direction: column;
+ min-height: calc(100% - var(--navigation-bar-height));
+ padding-bottom: 1em;
+ background-color: var(--background-color-alternate);
overflow-y: auto;
- padding-bottom: calc(var(--console-prompt-min-height) + 10px);
}
-.content-view.settings > .settings-view > .separator {
+.content-view.tab.settings > .settings-view > .separator {
height: 1em;
}
-.content-view.settings > .settings-view > .container {
+.content-view.tab.settings > .settings-view > .container {
display: flex;
margin-top: 1em;
font-size: 13px;
}
-.content-view.settings > .settings-view > .container.hidden {
+.content-view.tab.settings > .settings-view > .container.hidden {
display: none;
}
-.content-view.settings > .settings-view > .container-centered {
+.content-view.tab.settings > .settings-view > .container-centered {
display: block;
text-align: center;
}
-.content-view.settings > .settings-view > .container button {
+.content-view.tab.settings > .settings-view > .container button {
-webkit-margin-end: 4px;
font-size: inherit;
}
-.content-view.settings > .settings-view > .container > .title {
+.content-view.tab.settings > .settings-view > .container > .title {
width: 50%;
-webkit-margin-end: 6px;
text-align: end;
}
-.content-view.settings > .settings-view > .container > .editor-group {
+.content-view.tab.settings > .settings-view > .container > .editor-group {
display: flex;
flex-direction: column;
}
-.content-view.settings > .settings-view > .container > .editor-group > .editor {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .editor {
--settings-editor-child-margin-top: 0;
}
-.content-view.settings > .settings-view > .container > .editor-group > .editor:first-child > * {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .editor:first-child > * {
margin-top: var(--settings-editor-child-margin-top);
}
-.content-view.settings > .settings-view > .container > .editor-group > .editor input {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input {
font-size: inherit;
}
-.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"] {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"] {
-webkit-margin-end: 4px;
/* Vertically align <select> with the group title text. */
font-size: 16px;
}
-.content-view.settings > .settings-view > .container > .editor-group > .editor select {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .editor select {
/*
To set the font-size of <select> to be exactly 13px, it needs to be set to 16px.
Setting the font-size to 13px actually sets it to 11px.
@@ -115,7 +125,7 @@
--settings-editor-child-margin-top: -2px;
}
-.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
max-width: 48px;
-webkit-margin-start: 2px;
-webkit-margin-end: 5px;
@@ -128,7 +138,7 @@
--settings-editor-child-margin-top: -2px;
}
-.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="text"] {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="text"] {
padding-top: 0;
padding-bottom: 0;
vertical-align: 1px;
@@ -137,12 +147,19 @@
--settings-editor-child-margin-top: -2px;
}
-@media (prefers-color-scheme: dark) {
- .content-view.settings .navigation-bar {
- background-color: var(--background-color-content);
- }
+.content-view.tab.settings > .settings-view > .container.reference {
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ flex-grow: 1;
+}
- .content-view.settings .navigation-bar .item.radio.button.text-only.selected {
- color: var(--glyph-color-active);
- }
+.content-view.tab.settings > .settings-view > .container.reference > a {
+ -webkit-margin-start: 16px; /* Balance the size of `.go-to-arrow` so that the text is visually centered. */
+ color: var(--text-color-secondary);
+}
+
+.content-view.tab.settings > .settings-view > .container.reference > a > .go-to-arrow {
+ margin: 0;
+ vertical-align: -0.25em;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
index 4023ff5..03e5452 100644
--- a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
@@ -180,6 +180,7 @@
if (WI.DebuggerManager.supportsBlackboxingScripts()) {
this._blackboxSettingsView = new WI.BlackboxSettingsView;
+ this._createReferenceLink(this._blackboxSettingsView);
this.addSettingsView(this._blackboxSettingsView);
}
@@ -244,6 +245,8 @@
zoomEditor.addEventListener(WI.SettingEditor.Event.ValueDidChange, () => { WI.setZoomFactor(zoomEditor.value); });
WI.settings.zoomFactor.addEventListener(WI.Setting.Event.Changed, () => { zoomEditor.value = WI.getZoomFactor().maxDecimals(2); });
+ this._createReferenceLink(generalSettingsView);
+
this.addSettingsView(generalSettingsView);
}
@@ -262,6 +265,8 @@
elementsSettingsView.addSetting(WI.UIString("CSS Changes:"), WI.settings.cssChangesPerNode, WI.UIString("Show only for selected node"));
+ this._createReferenceLink(elementsSettingsView);
+
this.addSettingsView(elementsSettingsView);
}
@@ -279,6 +284,8 @@
sourcesSettingsView.addSetting(WI.UIString("Images:"), WI.settings.showImageGrid, WI.UIString("Show transparency grid"));
+ this._createReferenceLink(sourcesSettingsView);
+
this.addSettingsView(sourcesSettingsView);
}
@@ -337,6 +344,8 @@
}
}
+ this._createReferenceLink(consoleSettingsView);
+
this.addSettingsView(consoleSettingsView);
}
@@ -385,6 +394,8 @@
if (InspectorBackend.hasDomain("CSS"))
listenForChange(WI.settings.experimentalEnableStylesJumpToEffective);
+ this._createReferenceLink(experimentalSettingsView);
+
this.addSettingsView(experimentalSettingsView);
}
@@ -472,6 +483,18 @@
this.addSettingsView(this._debugSettingsView);
}
+ _createReferenceLink(settingsView)
+ {
+ let link = document.createElement("a");
+ link.href = link.title = "https://webkit.org/web-inspector/web-inspector-settings/#" + settingsView.identifier;
+ link.textContent = WI.UIString("Web Inspector Reference");
+
+ link.appendChild(WI.createGoToArrowButton());
+
+ let container = settingsView.addCenteredContainer(link);
+ container.classList.add("reference");
+ }
+
_updateNavigationBarVisibility()
{
let visibleItems = 0;
diff --git a/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css b/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css
index 89c09613..1b8e8cf 100644
--- a/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css
+++ b/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css
@@ -53,6 +53,11 @@
overflow: hidden;
}
+.popover .url-breakpoint-content .reference-page-link-container {
+ -webkit-margin-start: 0.5em;
+ vertical-align: -1px;
+}
+
@media (prefers-color-scheme: dark) {
.popover .url-breakpoint-content > .editor-wrapper > .editor {
-webkit-appearance: unset;
diff --git a/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.js b/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.js
index e94d913..e9e3573 100644
--- a/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.js
+++ b/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.js
@@ -74,7 +74,7 @@
this._codeMirror.focus();
});
- editorWrapper.append(this._typeSelectElement, this._createEditor());
+ editorWrapper.append(this._typeSelectElement, this._createEditor(), WI.createReferencePageLink("url-breakpoints", "configuration"));
contentElement.append(label, editorWrapper);
this.content = contentElement;
