Web Inspector: Canvas Tab: selected canvas card loses selection outline style while...
authorwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Oct 2017 21:12:00 +0000 (21:12 +0000)
committerwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Oct 2017 21:12:00 +0000 (21:12 +0000)
https://bugs.webkit.org/show_bug.cgi?id=178814
<rdar://problem/35177317>

Reviewed by Brian Burg.

* UserInterface/Views/CanvasOverviewContentView.css:
(.content-view.canvas-overview .content-view.canvas):
(.content-view.canvas-overview .content-view.canvas > :matches(header, .preview, footer)):
(.content-view.canvas-overview .content-view.canvas.selected > :matches(.preview, footer),):
(.content-view.canvas-overview .content-view.canvas > header):
(.content-view.canvas-overview .content-view.canvas.is-recording > header):
(.content-view.canvas-overview .content-view.canvas > .preview):
(.content-view.canvas-overview .content-view.canvas > footer):
(.content-view.canvas-overview .content-view.canvas.selected:not(.is-recording)): Deleted.
Instead of applying the border to the entire element, apply parts of the border to each of
its children so that we can choose what colors to use for each part.

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

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

index 296c339..7d166a8 100644 (file)
@@ -1,3 +1,23 @@
+2017-10-25  Devin Rousso  <webkit@devinrousso.com>
+
+        Web Inspector: Canvas Tab: selected canvas card loses selection outline style while recording
+        https://bugs.webkit.org/show_bug.cgi?id=178814
+        <rdar://problem/35177317>
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/CanvasOverviewContentView.css:
+        (.content-view.canvas-overview .content-view.canvas):
+        (.content-view.canvas-overview .content-view.canvas > :matches(header, .preview, footer)):
+        (.content-view.canvas-overview .content-view.canvas.selected > :matches(.preview, footer),):
+        (.content-view.canvas-overview .content-view.canvas > header):
+        (.content-view.canvas-overview .content-view.canvas.is-recording > header):
+        (.content-view.canvas-overview .content-view.canvas > .preview):
+        (.content-view.canvas-overview .content-view.canvas > footer):
+        (.content-view.canvas-overview .content-view.canvas.selected:not(.is-recording)): Deleted.
+        Instead of applying the border to the entire element, apply parts of the border to each of
+        its children so that we can choose what colors to use for each part.
+
 2017-10-25  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: [PARITY] Styles Redesign: Add color gradient, bezier curve, and spring inline widgets
index 43e257c..9a72a3e 100644 (file)
     margin: 10px;
     width: 400px;
     background-color: white;
-    border: solid 1px var(--border-color);
 }
 
-.content-view.canvas-overview .content-view.canvas.selected:not(.is-recording) {
+.content-view.canvas-overview .content-view.canvas > :matches(header, .preview, footer) {
+    border: 1px solid var(--border-color);
+}
+
+.content-view.canvas-overview .content-view.canvas.selected > :matches(.preview, footer),
+.content-view.canvas-overview .content-view.canvas.selected:not(.is-recording) > header {
     border-color: var(--selected-background-color);
 }
 
 
 .content-view.canvas-overview .content-view.canvas > header {
     font-size: 13px;
+    border-bottom: none;
 }
 
 .content-view.canvas-overview .content-view.canvas.is-recording > header {
     background-color: red;
+    border-color: red;
 }
 
 .content-view.canvas-overview .content-view.canvas > header > .titles,
 
 .content-view.canvas-overview .content-view.canvas > .preview {
     height: 280px;
+    border-top: none;
+    border-bottom: none;
 }
 
 .content-view.canvas-overview .content-view.canvas > .preview > img {
     position: static;
 }
 
+.content-view.canvas-overview .content-view.canvas > footer {
+    border-top: none;
+}
+
 .content-view.canvas-overview .content-view.canvas > footer > .recordings {
     position: absolute;
     display: flex;