Changeset 248735 in webkit


Ignore:
Timestamp:
Aug 15, 2019 12:13:21 PM (5 years ago)
Author:
Devin Rousso
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r248732 r248735  
     12019-08-15  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Layers: background of 3D area doesn't update when transitioning to/from Dark mode
     4        https://bugs.webkit.org/show_bug.cgi?id=200775
     5
     6        Reviewed by Ross Kirsling.
     7
     8        * UserInterface/Views/Layers3DContentView.js:
     9        (WI.Layers3DContentView.prototype.initialLayout):
     10        Add a `matchMedia` listener for `(prefers-color-scheme: dark)` and update the clear color
     11        of the WebGL renderer whenever it changes.
     12
     13        * UserInterface/Views/ErrorObjectView.css:
     14        (@media (prefers-color-scheme: dark)): Added.
     15        (@media (prefers-dark-interface)): Deleted.
     16        * UserInterface/Views/SourcesNavigationSidebarPanel.css:
     17        (@media (prefers-color-scheme: dark)): Added.
     18        (@media (prefers-dark-interface)): Deleted.
     19        Drive-by: replace older `prefers-dark-interface` with modern `prefers-color-scheme: dark`.
     20
    1212019-08-15  Joseph Pecoraro  <pecoraro@apple.com>
    222
  • trunk/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css

    r246601 r248735  
    5454}
    5555
    56 @media (prefers-dark-interface) {
     56@media (prefers-color-scheme: dark) {
    5757    .error-object-link-container {
    5858        color: var(--text-color-secondary);
  • trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js

    r247356 r248735  
    145145
    146146        this._renderer = new THREE.WebGLRenderer({antialias: true});
    147         const backgroundColor = window.getComputedStyle(document.documentElement).getPropertyValue("--background-color-content").trim();
    148         this._renderer.setClearColor(backgroundColor);
    149147        this._renderer.setSize(this.element.offsetWidth, this.element.offsetHeight);
     148
     149        let updateBackground = () => {
     150            this._renderer.setClearColor(window.getComputedStyle(this.element).getPropertyValue("--background-color-content").trim());
     151        };
     152        window.matchMedia("(prefers-color-scheme: dark)").addListener(updateBackground);
     153        updateBackground();
    150154
    151155        this._camera = new THREE.PerspectiveCamera(45, this.element.offsetWidth / this.element.offsetHeight, 1, 100000);
  • trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css

    r248490 r248735  
    138138}
    139139
    140 @media (prefers-dark-interface) {
     140@media (prefers-color-scheme: dark) {
    141141    .sidebar > .panel.navigation.sources > .content > .warning-banner {
    142142        color: var(--yellow-highlight-text-color);
Note: See TracChangeset for help on using the changeset viewer.