Web Inspector: Canvas tab: create icons for recordings/shaders in the preview tile
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / CanvasOverviewContentView.css
index bf1c14c..cd5c41e 100644 (file)
     justify-content: center;
     align-items: flex-start;
     background-color: hsl(0, 0%, 90%);
+
+    --item-margin: 10px;
 }
 
 .content-view.canvas-overview .content-view.canvas {
     flex-grow: 0;
-    margin: 10px;
+    margin: var(--item-margin);
     width: 400px;
     background-color: white;
-    border: solid 1px var(--border-color);
 }
 
-.content-view.canvas-overview .content-view.canvas.selected:not(.is-recording) {
-    border-color: var(--selected-background-color);
+.content-view.canvas-overview .content-view.canvas {
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+}
+
+.content-view.canvas-overview .content-view.canvas.is-recording {
+    border-color: red;
 }
 
 .content-view.canvas-overview .content-view.canvas > :matches(header, footer) {
     align-items: center;
     padding: 0 6px;
     height: var(--navigation-bar-height);
+    cursor: default;
 }
 
 .content-view.canvas-overview .content-view.canvas > header {
-    font-size: 14px;
+    font-size: 13px;
 }
 
 .content-view.canvas-overview .content-view.canvas.is-recording > header {
@@ -74,7 +81,7 @@
 }
 
 .content-view.canvas-overview .content-view.canvas > header .subtitle::before {
-    content: " \2014 ";
+    content: "  ";
 }
 
 .content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .title {
 .content-view.canvas-overview .content-view.canvas > header > .navigation-bar {
     align-items: initial;
     border: none;
+    opacity: 0;
+    transition: opacity 200ms ease-in-out;
 }
 
-.content-view.canvas-overview .content-view.canvas:not(:hover, .is-recording) > header > .navigation-bar {
-    visibility: hidden;
+.content-view.canvas-overview .content-view.canvas:matches(:hover, .is-recording) > header > .navigation-bar {
+    opacity: 1;
+    transition: opacity 200ms ease-in-out;
 }
 
 .content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop.disabled {
     opacity: 0.5;
 }
 
-.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop {
-    /* Workaround for background image clipping issue on non-retina machines. See http://webkit.org/b/147346. */
-    filter: brightness(100%);
-}
-
 .content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop:not(.disabled):hover {
     filter: brightness(95%);
 }
     filter: brightness(80%);
 }
 
+.content-view.canvas-overview .content-view.canvas.is-recording > .progress-view,
 .content-view.canvas-overview .content-view.canvas > .preview {
     height: 280px;
 }
 
+.content-view.canvas-overview .content-view.canvas.is-recording > .preview {
+    display: none;
+}
+
 .content-view.canvas-overview .content-view.canvas > .preview > img {
     border-radius: 4px;
     box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.58);
 }
 
 .content-view.canvas-overview .content-view.canvas > footer {
-    /* FIXME: this can be removed once <https://webkit.org/b/177606> is complete.*/
-    justify-content: flex-end;
+    border-top: none;
+}
+
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items {
+    display: flex;
+    align-items: center;
+}
+
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items > :matches(.view-shader, .view-recording) {
+    width: 16px;
+    height: 16px;
+}
+
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items > img + img {
+    -webkit-margin-start: 4px;
+}
+
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items > .view-shader {
+    content: image-set(url(../Images/DocumentGL.png) 1x, url(../Images/DocumentGL@2x.png) 2x);
+}
+
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items > .view-recording {
+    content: url(../Images/Recording.svg);
+}
+
+.content-view.canvas-overview .content-view.canvas > footer > .flexible-space {
+    flex: 1;
 }
 
 .content-view.canvas-overview .content-view.canvas > footer .memory-cost {
     -webkit-padding-start: 4px;
 }
+
+.popover-content > .tree-outline .item.recording > .icon {
+    content: url(../Images/Recording.svg);
+}
+
+.popover-content > .tree-outline .item.recording:hover {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color);
+    border-radius: 3px;
+}
+
+.popover-content > .tree-outline .item.recording:hover > .icon {
+    filter: invert();
+}