Web Inspector: Canvas tab: create icons for recordings/shaders in the preview tile
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / CanvasOverviewContentView.css
index 2120364..cd5c41e 100644 (file)
     background-color: white;
 }
 
-.content-view.canvas-overview .content-view.canvas > :matches(header, .progress, .preview, footer) {
+.content-view.canvas-overview .content-view.canvas {
     border: 1px solid var(--border-color);
+    cursor: pointer;
 }
 
-.content-view.canvas-overview .content-view.canvas.selected > :matches(.progress, .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.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: 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 > 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, .selected) > 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 > :matches(.progress, .preview) {
-    border-top: none;
-    border-bottom: none;
-}
-
+.content-view.canvas-overview .content-view.canvas.is-recording > .progress-view,
 .content-view.canvas-overview .content-view.canvas > .preview {
-    height: var(--preview-height);
-
-    --preview-height: 280px;
+    height: 280px;
 }
 
-.content-view.canvas-overview .content-view.canvas > .progress ~ .preview {
-    /* Keep the height of each CanvasContentView constant by subtracting the padding-top, */
-    /* padding-bottom, and text-height (1em) from the previously set height. */
-    height: calc(var(--preview-height) - 1em - (2 * var(--progress-padding)));
+.content-view.canvas-overview .content-view.canvas.is-recording > .preview {
+    display: none;
 }
 
 .content-view.canvas-overview .content-view.canvas > .preview > img {
     border-top: none;
 }
 
-.content-view.canvas-overview .content-view.canvas > footer > .recordings {
-    position: absolute;
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items {
     display: flex;
     align-items: center;
 }
 
-.content-view.canvas-overview .content-view.canvas > footer > .recordings::before {
-    display: inline-block;
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items > :matches(.view-shader, .view-recording) {
     width: 16px;
-    margin-top: 3px;
-    -webkit-padding-end: 4px;
-    content: url(../Images/Recording.svg);
+    height: 16px;
 }
 
-.content-view.canvas-overview .content-view.canvas > footer > .recordings > select {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    border: none;
-    opacity: 0;
-    -webkit-appearance: none;
+.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 .recordings > select:focus {
-    -webkit-margin-start: 11px;
+.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 {