Skip to content
Permalink
Browse files
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
  • Loading branch information
dcrousso committed May 25, 2022
1 parent a9cc789 commit 592136241c99d8fdf2c0a19f993d42ba207ca001
Showing 2 changed files with 11 additions and 1 deletion.
@@ -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;
@@ -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.")));
}

0 comments on commit 5921362

Please sign in to comment.