- Revision
- 295158
- Author
- drou...@apple.com
- Date
- 2022-06-02 17:26:13 -0700 (Thu, 02 Jun 2022)
Log Message
Web Inspector: Timelines Tab: Screenshots: missing ReferencePage
https://bugs.webkit.org/show_bug.cgi?id=241247
Reviewed by Patrick Angle.
* Source/WebInspectorUI/UserInterface/Base/ReferencePage.js:
* Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.js:
(WI.ScreenshotsTimelineView.prototype.initialLayout): Added.
(WI.ScreenshotsTimelineView.prototype.layout):
* Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.css:
(.timeline-view.screenshots > .content-view): Renamed from `.timeline-view.screenshots`.
(.timeline-view.screenshots > .content-view > .spacer): Renamed from `.timeline-view.screenshots > .spacer`.
(.timeline-view.screenshots > .content-view > img): Renamed from `.timeline-view.screenshots > img`.
(.timeline-view.screenshots > .content-view > img + img): Renamed from `.timeline-view.screenshots > img + img`.
(.timeline-view.screenshots > .content-view > img.selected): Renamed from `.timeline-view.screenshots > img.selected`.
(@media (prefers-color-scheme: dark) .timeline-view.screenshots > .content-view): Renamed from `@media (prefers-color-scheme: dark) .timeline-view.screenshots`.
Wrap all of the `<img>` inside a `WI.ContentView` (which also includes the special styling for
`WI.createMessageTextView` inside a `WI.ContentView`) so that `removeChildren` doesn't also remove
the reference page link.
* Source/WebInspectorUI/UserInterface/Views/TimelineView.css:
(.timeline-view > .reference-page-link-container):
Make sure the reference page link is always on top.
* Source/WebInspectorUI/UserInterface/Views/TimelineView.js:
(WI.TimelineView.prototype.initialLayout):
Assume that a `ReferencePage` is defined so that if it's not, WebKit engineers will catch that more
obviously (i.e. the uncaught exception reporter) instead of having to notice an assertion failure.
Canonical link: https://commits.webkit.org/251245@main
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/ReferencePage.js (295157 => 295158)
--- trunk/Source/WebInspectorUI/UserInterface/Base/ReferencePage.js 2022-06-03 00:20:24 UTC (rev 295157)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/ReferencePage.js 2022-06-03 00:26:13 UTC (rev 295158)
@@ -94,6 +94,7 @@
WI.ReferencePage.TimelinesTab.MediaAndAnimationsTimeline = new WI.ReferencePage(WI.ReferencePage.TimelinesTab, {topic: "media-animations-timeline"});
WI.ReferencePage.TimelinesTab.MemoryTimeline = new WI.ReferencePage(WI.ReferencePage.TimelinesTab, {topic: "memory-timeline"});
WI.ReferencePage.TimelinesTab.NetworkRequestsTimeline = new WI.ReferencePage(WI.ReferencePage.TimelinesTab, {topic: "network-timeline"});
+WI.ReferencePage.TimelinesTab.ScreenshotsTimeline = new WI.ReferencePage(WI.ReferencePage.TimelinesTab, {topic: "screenshots-timeline"});
WI.ReferencePage.URLBreakpoints = new WI.ReferencePage("url-breakpoints");
WI.ReferencePage.URLBreakpoints.Configuration = new WI.ReferencePage(WI.ReferencePage.URLBreakpoints, {topic: "configuration"});
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.css (295157 => 295158)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.css 2022-06-03 00:20:24 UTC (rev 295157)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.css 2022-06-03 00:26:13 UTC (rev 295158)
@@ -23,7 +23,9 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.timeline-view.screenshots {
+.timeline-view.screenshots > .content-view {
+ position: absolute;
+ inset: 0;
text-align: center;
white-space: nowrap;
overflow-x: auto;
@@ -30,12 +32,12 @@
background-color: hsl(0, 0%, 90%);
}
-.timeline-view.screenshots > .spacer {
+.timeline-view.screenshots > .content-view > .spacer {
display: inline-block;
height: 50%;
}
-.timeline-view.screenshots > img {
+.timeline-view.screenshots > .content-view > img {
max-width: calc(80% - (var(--margin) * 2));
max-height: calc(100% - (var(--margin) * 2));
margin: var(--margin);
@@ -46,16 +48,16 @@
--shadow: 1px 2px 6px rgba(0, 0, 0, 0.58);
}
-.timeline-view.screenshots > img + img {
+.timeline-view.screenshots > .content-view > img + img {
margin-inline-start: 0;
}
-.timeline-view.screenshots > img.selected {
+.timeline-view.screenshots > .content-view > img.selected {
box-shadow: 0 0 0 2px var(--glyph-color-active), var(--shadow);
}
@media (prefers-color-scheme: dark) {
- .timeline-view.screenshots {
+ .timeline-view.screenshots > .content-view {
background-color: hsl(0, 0%, 14%);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.js (295157 => 295158)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.js 2022-06-03 00:20:24 UTC (rev 295157)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineView.js 2022-06-03 00:26:13 UTC (rev 295158)
@@ -55,6 +55,15 @@
get showsFilterBar() { return false; }
+ initialLayout()
+ {
+ super.initialLayout();
+
+ this._scrollView = new WI.ContentView;
+
+ this.addSubview(this._scrollView);
+ }
+
layout()
{
if (this.layoutReason === WI.View.LayoutReason.Resize)
@@ -65,12 +74,12 @@
if (this.hidden)
return;
- this.element.removeChildren();
+ this._scrollView.element.removeChildren();
let selectedElement = null;
for (let record of this._visibleRecords()) {
- this.element.appendChild(this._imageElementForRecord.getOrInitialize(record, () => {
+ this._scrollView.element.appendChild(this._imageElementForRecord.getOrInitialize(record, () => {
let imageElement = document.createElement("img");
imageElement.hidden = true;
@@ -96,11 +105,11 @@
selectedElement.scrollIntoView({inline: "center"});
}
- if (this.element.childNodes.length) {
- let spacer = this.element.appendChild(document.createElement("div"));
+ if (this._scrollView.element.childNodes.length) {
+ let spacer = this._scrollView.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.")));
+ this._scrollView.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.")));
}
selectRecord(record)
@@ -150,4 +159,6 @@
return visibleRecords;
}
-};
\ No newline at end of file
+};
+
+WI.ScreenshotsTimelineView.ReferencePage = WI.ReferencePage.TimelinesTab.ScreenshotsTimeline;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css (295157 => 295158)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css 2022-06-03 00:20:24 UTC (rev 295157)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css 2022-06-03 00:26:13 UTC (rev 295158)
@@ -48,5 +48,6 @@
.timeline-view > .reference-page-link-container {
position: absolute;
bottom: 6px;
+ z-index: 1;
inset-inline-end: 6px;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js (295157 => 295158)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js 2022-06-03 00:20:24 UTC (rev 295157)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js 2022-06-03 00:26:13 UTC (rev 295158)
@@ -297,8 +297,7 @@
{
super.initialLayout();
- if (this.constructor.ReferencePage)
- this.element.appendChild(this.constructor.ReferencePage.createLinkElement());
+ this.element.appendChild(this.constructor.ReferencePage.createLinkElement());
}
filterDidChange()
