Changeset 250859 in webkit

Timestamp:

Oct 8, 2019 2:09:17 PM (5 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Canvas: make it more obvious that the cards in the overview are clickable
​https://bugs.webkit.org/show_bug.cgi?id=202680

Reviewed by Matt Baker.

Add a slight darkening (or lightening when in dark mode) of the background behind the
content preview in the overview.

• UserInterface/Views/CanvasOverviewContentView.css:

(.content-view.canvas-overview .content-view.canvas):
(.content-view.canvas-overview .content-view.canvas, .content-view.canvas-overview .content-view.canvas > .preview > img): Added.
(.content-view.canvas-overview .content-view.canvas.recording-active > .progress-view, .content-view.canvas-overview .content-view.canvas > .preview):
(.content-view.canvas-overview .content-view.canvas.recording-active > .progress-view:hover, .content-view.canvas-overview .content-view.canvas > .preview:hover): Added.
(@media (prefers-color-scheme: dark) .content-view.canvas-overview .content-view.canvas, .content-view.canvas-overview .content-view.canvas > .preview > img): Added.
(@media (prefers-color-scheme: dark) .content-view.canvas-overview .content-view.canvas.recording-active > .progress-view:hover, .content-view.canvas-overview .content-view.canvas > .preview:hover): Added.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/CanvasOverviewContentView.css (modified) (3 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-10-08  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Canvas: make it more obvious that the cards in the overview are clickable
+        https://bugs.webkit.org/show_bug.cgi?id=202680
+
+        Reviewed by Matt Baker.
+
+        Add a slight darkening (or lightening when in dark mode) of the background behind the
+        content preview in the overview.
+
+        * UserInterface/Views/CanvasOverviewContentView.css:
+        (.content-view.canvas-overview .content-view.canvas):
+        (.content-view.canvas-overview .content-view.canvas, .content-view.canvas-overview .content-view.canvas > .preview > img): Added.
+        (.content-view.canvas-overview .content-view.canvas.recording-active > .progress-view, .content-view.canvas-overview .content-view.canvas > .preview):
+        (.content-view.canvas-overview .content-view.canvas.recording-active > .progress-view:hover, .content-view.canvas-overview .content-view.canvas > .preview:hover): Added.
+        (@media (prefers-color-scheme: dark) .content-view.canvas-overview .content-view.canvas, .content-view.canvas-overview .content-view.canvas > .preview > img): Added.
+        (@media (prefers-color-scheme: dark) .content-view.canvas-overview .content-view.canvas.recording-active > .progress-view:hover, .content-view.canvas-overview .content-view.canvas > .preview:hover): Added.
+
 2019-10-08  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css

@@ -36 +36 @@
     margin: var(--item-margin);
     width: 400px;
-    background-color: white;
-}
-
-.content-view.canvas-overview .content-view.canvas {
     border: 1px solid var(--border-color);
     cursor: pointer;
+}
+
+.content-view.canvas-overview .content-view.canvas,
+.content-view.canvas-overview .content-view.canvas > .preview > img {
+    background-color: white;
 }
 
@@ -125 +126 @@
 .content-view.canvas-overview .content-view.canvas > .preview {
     height: 280px;
+    transition: background-color 200ms ease-in-out;
+}
+
+.content-view.canvas-overview .content-view.canvas.recording-active > .progress-view:hover,
+.content-view.canvas-overview .content-view.canvas > .preview:hover {
+    background-color: hsl(0, 0%, 96%);
 }
 
@@ -207 +214 @@
     }
 
-    .content-view.canvas-overview .content-view.canvas {
+    .content-view.canvas-overview .content-view.canvas,
+    .content-view.canvas-overview .content-view.canvas > .preview > img {
         background-color: var(--background-color-secondary);
+    }
+
+    .content-view.canvas-overview .content-view.canvas.recording-active > .progress-view:hover,
+    .content-view.canvas-overview .content-view.canvas > .preview:hover {
+        background-color: var(--background-color-tertiary);
     }