Web Inspector: Layers: background of 3D area doesn't update when transitioning to...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 15 Aug 2019 19:13:21 +0000 (19:13 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 15 Aug 2019 19:13:21 +0000 (19:13 +0000)
https://bugs.webkit.org/show_bug.cgi?id=200775

Reviewed by Ross Kirsling.

* UserInterface/Views/Layers3DContentView.js:
(WI.Layers3DContentView.prototype.initialLayout):
Add a `matchMedia` listener for `(prefers-color-scheme: dark)` and update the clear color
of the WebGL renderer whenever it changes.

* UserInterface/Views/ErrorObjectView.css:
(@media (prefers-color-scheme: dark)): Added.
(@media (prefers-dark-interface)): Deleted.
* UserInterface/Views/SourcesNavigationSidebarPanel.css:
(@media (prefers-color-scheme: dark)): Added.
(@media (prefers-dark-interface)): Deleted.
Drive-by: replace older `prefers-dark-interface` with modern `prefers-color-scheme: dark`.
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@248735 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css
Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js
Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css

index 127f876..9f868ae 100644 (file)
@@ -1,3 +1,23 @@
+2019-08-15  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Layers: background of 3D area doesn't update when transitioning to/from Dark mode
+        https://bugs.webkit.org/show_bug.cgi?id=200775
+
+        Reviewed by Ross Kirsling.
+
+        * UserInterface/Views/Layers3DContentView.js:
+        (WI.Layers3DContentView.prototype.initialLayout):
+        Add a `matchMedia` listener for `(prefers-color-scheme: dark)` and update the clear color
+        of the WebGL renderer whenever it changes.
+
+        * UserInterface/Views/ErrorObjectView.css:
+        (@media (prefers-color-scheme: dark)): Added.
+        (@media (prefers-dark-interface)): Deleted.
+        * UserInterface/Views/SourcesNavigationSidebarPanel.css:
+        (@media (prefers-color-scheme: dark)): Added.
+        (@media (prefers-dark-interface)): Deleted.
+        Drive-by: replace older `prefers-dark-interface` with modern `prefers-color-scheme: dark`.
+
 2019-08-15  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Update Esprima to trunk (minor fixes)
index fb77fea..3351af7 100644 (file)
@@ -53,7 +53,7 @@ body[dir=rtl] .error-object > .formatted-error::before {
     color: hsla(0, 0%, 0%, 0.2);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .error-object-link-container {
         color: var(--text-color-secondary);
     }
index b642937..636fb1b 100644 (file)
@@ -144,10 +144,14 @@ WI.Layers3DContentView = class Layers3DContentView extends WI.ContentView
         super.initialLayout();
 
         this._renderer = new THREE.WebGLRenderer({antialias: true});
-        const backgroundColor = window.getComputedStyle(document.documentElement).getPropertyValue("--background-color-content").trim();
-        this._renderer.setClearColor(backgroundColor);
         this._renderer.setSize(this.element.offsetWidth, this.element.offsetHeight);
 
+        let updateBackground = () => {
+            this._renderer.setClearColor(window.getComputedStyle(this.element).getPropertyValue("--background-color-content").trim());
+        };
+        window.matchMedia("(prefers-color-scheme: dark)").addListener(updateBackground);
+        updateBackground();
+
         this._camera = new THREE.PerspectiveCamera(45, this.element.offsetWidth / this.element.offsetHeight, 1, 100000);
 
         this._controls = new THREE.OrbitControls(this._camera, this._renderer.domElement);
index 9ac39f7..4a2f0f8 100644 (file)
     content: url(../Images/TypeObject.svg);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .sidebar > .panel.navigation.sources > .content > .warning-banner {
         color: var(--yellow-highlight-text-color);
         background-color: var(--yellow-highlight-background-color);