Web Inspector: allow use of dark mode theme independently from system-wide theme
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 28 Feb 2020 07:56:49 +0000 (07:56 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 28 Feb 2020 07:56:49 +0000 (07:56 +0000)
https://bugs.webkit.org/show_bug.cgi?id=186308
<rdar://problem/40785895>

Reviewed by Timothy Hatcher.

Source/WebCore:

* inspector/InspectorFrontendHost.idl:
* inspector/InspectorFrontendHost.h:
* inspector/InspectorFrontendHost.cpp:
(WebCore::InspectorFrontendHost::setForcedAppearance): Added.
Expose a way to call `Page::setUseDarkAppearanceOverride` from the Web Inspector frontend.

Source/WebInspectorUI:

* UserInterface/Base/Setting.js:
* UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype._createGeneralSettingsView):
Create a setting for controlling/preserving the theme of the frontend UI.

* UserInterface/Base/Main.js:
(WI.loaded):
(WI.contentLoaded):
Apply the created setting when Web Inspector is opened or if its value changes.

* UserInterface/Views/SettingEditor.js:
(WI.SettingEditor.prototype._createEditorElement):
Allow horizontal dividers in `<select>` setting editors.

* Localizations/en.lproj/localizedStrings.js:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@257620 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorFrontendHost.cpp
Source/WebCore/inspector/InspectorFrontendHost.h
Source/WebCore/inspector/InspectorFrontendHost.idl
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Base/Setting.js
Source/WebInspectorUI/UserInterface/Views/SettingEditor.js
Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js

index 0471755..5b5c0e1 100644 (file)
@@ -1,3 +1,17 @@
+2020-02-27  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: allow use of dark mode theme independently from system-wide theme
+        https://bugs.webkit.org/show_bug.cgi?id=186308
+        <rdar://problem/40785895>
+
+        Reviewed by Timothy Hatcher.
+
+        * inspector/InspectorFrontendHost.idl:
+        * inspector/InspectorFrontendHost.h:
+        * inspector/InspectorFrontendHost.cpp:
+        (WebCore::InspectorFrontendHost::setForcedAppearance): Added.
+        Expose a way to call `Page::setUseDarkAppearanceOverride` from the Web Inspector frontend.
+
 2020-02-27  Don Olmstead  <don.olmstead@sony.com>
 
         Fix WebCore export macros for declspec
index 4168389..93c1b57 100644 (file)
@@ -232,6 +232,19 @@ float InspectorFrontendHost::zoomFactor()
     return 1.0;
 }
 
+void InspectorFrontendHost::setForcedAppearance(String appearance)
+{
+    if (!m_frontendPage)
+        return;
+
+    if (appearance == "light"_s)
+        m_frontendPage->setUseDarkAppearanceOverride(false);
+    else if (appearance == "dark"_s)
+        m_frontendPage->setUseDarkAppearanceOverride(true);
+    else
+        m_frontendPage->setUseDarkAppearanceOverride(WTF::nullopt);
+}
+
 String InspectorFrontendHost::userInterfaceLayoutDirection()
 {
     if (m_client && m_client->userInterfaceLayoutDirection() == UserInterfaceLayoutDirection::RTL)
index 9806984..51fa505 100644 (file)
@@ -68,6 +68,8 @@ public:
     void setZoomFactor(float);
     float zoomFactor();
 
+    void setForcedAppearance(String);
+
     String userInterfaceLayoutDirection();
 
     void requestSetDockSide(const String&);
index d6c08ee..d5a9e1e 100644 (file)
@@ -48,6 +48,8 @@
     void setZoomFactor(unrestricted float zoom);
     float zoomFactor();
 
+    void setForcedAppearance(DOMString appearance);
+
     DOMString userInterfaceLayoutDirection();
 
     void requestSetDockSide(DOMString side);
index c840313..3f8a65d 100644 (file)
@@ -1,5 +1,29 @@
 2020-02-27  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: allow use of dark mode theme independently from system-wide theme
+        https://bugs.webkit.org/show_bug.cgi?id=186308
+        <rdar://problem/40785895>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Base/Setting.js:
+        * UserInterface/Views/SettingsTabContentView.js:
+        (WI.SettingsTabContentView.prototype._createGeneralSettingsView):
+        Create a setting for controlling/preserving the theme of the frontend UI.
+
+        * UserInterface/Base/Main.js:
+        (WI.loaded):
+        (WI.contentLoaded):
+        Apply the created setting when Web Inspector is opened or if its value changes.
+
+        * UserInterface/Views/SettingEditor.js:
+        (WI.SettingEditor.prototype._createEditorElement):
+        Allow horizontal dividers in `<select>` setting editors.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2020-02-27  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: localize the placeholder "Header" and "value" when editing a local override
         https://bugs.webkit.org/show_bug.cgi?id=208276
         <rdar://problem/59763619>
index 3b32757..c9205b0 100644 (file)
@@ -138,6 +138,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["Appearance:"] = "Appearance:";
 localizedStrings["Application Cache"] = "Application Cache";
 /* Approximate count of events */
 localizedStrings["Approximate Number"] = "~%s";
@@ -348,6 +349,8 @@ localizedStrings["DOM Event \u201C%s\u201D"] = "DOM Event \u201C%s\u201D";
 localizedStrings["DOM Events"] = "DOM Events";
 localizedStrings["DOM Nodes:"] = "DOM Nodes:";
 localizedStrings["Damping"] = "Damping";
+/* Label of dropdown item used for forcing Web Inspector to be shown using a dark theme */
+localizedStrings["Dark @ Settings General Appearance"] = "Dark";
 localizedStrings["Data"] = "Data";
 localizedStrings["Data Bindings"] = "Data Bindings";
 localizedStrings["Data returned from the database is too large."] = "Data returned from the database is too large.";
@@ -692,6 +695,8 @@ localizedStrings["Layout & Rendering"] = "Layout & Rendering";
 /* Layout phase timeline records */
 localizedStrings["Layout @ Timeline record"] = "Layout";
 localizedStrings["Layout Invalidated"] = "Layout Invalidated";
+/* Label of dropdown item used for forcing Web Inspector to be shown using a light theme */
+localizedStrings["Light @ Settings General Appearance"] = "Light";
 localizedStrings["Line %d"] = "Line %d";
 localizedStrings["Line %d:%d"] = "Line %d:%d";
 localizedStrings["Line Number"] = "Line Number";
@@ -1163,6 +1168,8 @@ localizedStrings["Subject"] = "Subject";
 /* A submenu item of 'Break On' that breaks (pauses) before child DOM node is modified */
 localizedStrings["Subtree Modified"] = "Subtree Modified";
 localizedStrings["Summary"] = "Summary";
+/* Label of dropdown item used for forcing Web Inspector to be shown using the system's theme */
+localizedStrings["System @ Settings General Appearance"] = "System";
 localizedStrings["TCP"] = "TCP";
 localizedStrings["TIFF"] = "TIFF";
 localizedStrings["Tab width:"] = "Tab width:";
index 2835376..42e7a52 100644 (file)
@@ -188,6 +188,7 @@ WI.loaded = function()
     // State.
     WI.printStylesEnabled = false;
     WI.setZoomFactor(WI.settings.zoomFactor.value);
+    InspectorFrontendHost.setForcedAppearance(WI.settings.frontendAppearance.value);
     WI.mouseCoords = {x: 0, y: 0};
     WI.modifierKeys = {altKey: false, metaKey: false, shiftKey: false};
     WI.visible = false;
@@ -540,6 +541,10 @@ WI.contentLoaded = function()
     WI.settings.consoleSavedResultAlias.addEventListener(WI.Setting.Event.Changed, updateConsoleSavedResultPrefixCSSVariable);
     updateConsoleSavedResultPrefixCSSVariable();
 
+    WI.settings.frontendAppearance.addEventListener(WI.Setting.Event.Changed, (event) => {
+        InspectorFrontendHost.setForcedAppearance(WI.settings.frontendAppearance.value);
+    }, WI);
+
     // Signal that the frontend is now ready to receive messages.
     WI._backendTargetAvailablePromise.promise.then(() => {
         InspectorFrontendAPI.loadCompleted();
index 8691e3e..21305b7 100644 (file)
@@ -187,6 +187,7 @@ WI.settings = {
     emulateInUserGesture: new WI.Setting("emulate-in-user-gesture", false),
     enableControlFlowProfiler: new WI.Setting("enable-control-flow-profiler", false),
     enableLineWrapping: new WI.Setting("enable-line-wrapping", true),
+    frontendAppearance: new WI.Setting("frontend-appearance", "system"),
     groupMediaRequestsByDOMNode: new WI.Setting("group-media-requests-by-dom-node", WI.Setting.migrateValue("group-by-dom-node") || false),
     indentUnit: new WI.Setting("indent-unit", 4),
     indentWithTabs: new WI.Setting("indent-with-tabs", false),
index 648baa6..3d451c2 100644 (file)
@@ -159,6 +159,11 @@ WI.SettingEditor = class SettingEditor extends WI.Object
                 keyValuePairs = options.values.map((value) => [value, value]);
 
             for (let [key, value] of keyValuePairs) {
+                if (key === WI.SettingEditor.SelectSpacerKey) {
+                    editorElement.appendChild(document.createElement("hr"));
+                    continue;
+                }
+
                 let optionElement = editorElement.appendChild(document.createElement("option"));
                 optionElement.value = key;
                 optionElement.textContent = value;
@@ -183,6 +188,8 @@ WI.SettingEditor.Type = {
     Select: "setting-editor-type-select",
 };
 
+WI.SettingEditor.SelectSpacerKey = Symbol("setting-editor-select-spacer-key");
+
 WI.SettingEditor.Event = {
     ValueDidChange: "value-did-change",
 };
index 4a1cc45..f816120 100644 (file)
@@ -202,6 +202,22 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
     {
         let generalSettingsView = new WI.SettingsView("general", WI.UIString("General"));
 
+        if (CSS.supports("color-scheme", "light") && CSS.supports("color-scheme", "dark")) {
+            const appearanceValues = [
+                ["system", WI.UIString("System", "System @ Settings General Appearance", "Label of dropdown item used for forcing Web Inspector to be shown using the system's theme")],
+                [WI.SettingEditor.SelectSpacerKey, null],
+                ["light", WI.UIString("Light", "Light @ Settings General Appearance", "Label of dropdown item used for forcing Web Inspector to be shown using a light theme")],
+                ["dark", WI.UIString("Dark", "Dark @ Settings General Appearance", "Label of dropdown item used for forcing Web Inspector to be shown using a dark theme")],
+            ];
+            let appearanceEditor = generalSettingsView.addGroupWithCustomSetting(WI.UIString("Appearance:"), WI.SettingEditor.Type.Select, {values: appearanceValues});
+            appearanceEditor.value = WI.settings.frontendAppearance.value;
+            appearanceEditor.addEventListener(WI.SettingEditor.Event.ValueDidChange, () => {
+                WI.settings.frontendAppearance.value = appearanceEditor.value;
+            }, WI.settings.frontendAppearance);
+
+            generalSettingsView.addSeparator();
+        }
+
         const indentValues = [WI.UIString("Tabs"), WI.UIString("Spaces")];
         let indentEditor = generalSettingsView.addGroupWithCustomSetting(WI.UIString("Prefer indent using:"), WI.SettingEditor.Type.Select, {values: indentValues});
         indentEditor.value = indentValues[WI.settings.indentWithTabs.value ? 0 : 1];