Web Inspector: Timelines Tab: Screenshots: images should be centered

https://bugs.webkit.org/show_bug.cgi?id=240854 Reviewed by Patrick Angle. * Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.js: (WI.ScreenshotsTimelineView.prototype.layout): * Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.css: (.timeline-view.screenshots): (.timeline-view.screenshots > .spacer): Added. (.timeline-view.screenshots > img): Canonical link: https://commits.webkit.org/250971@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@294818 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · May 25, 2022 · 592136241c99d8fdf2c0a19f993d42ba207ca001 · 5921362
1 parent a9cc789
commit 592136241c99d8fdf2c0a19f993d42ba207ca001
Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.css
@@ -24,15 +24,22 @@
  */
 
 .timeline-view.screenshots {
+    text-align: center;
     white-space: nowrap; 
     overflow-x: auto;
     background-color: hsl(0, 0%, 90%);
 }
 
+.timeline-view.screenshots > .spacer {
+    display: inline-block;
+    height: 50%;
+}
+
 .timeline-view.screenshots > img {
     max-width: calc(80% - (var(--margin) * 2));
     max-height: calc(100% - (var(--margin) * 2));
     margin: var(--margin);
+    vertical-align: middle;
     box-shadow: var(--shadow);
 
     --margin: 20px;

diff --git a/Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.js
@@ -96,7 +96,10 @@ WI.ScreenshotsTimelineView = class ScreenshotsTimelineView extends WI.TimelineVi
             selectedElement.scrollIntoView({inline: "center"});
         }
 
-        if (!this.element.childNodes.length)
+        if (this.element.childNodes.length) {
+            let spacer = this.element.appendChild(document.createElement("div"));
+            spacer.className = "spacer";
+        } else
             this.element.appendChild(WI.createMessageTextView(WI.UIString("No screenshots", "No screenshots @ Screenshots Timeline", "Placeholder text shown when there are no images to display in the Screenshots timeline.")));
     }