Changeset 271236 in webkit

Timestamp:

Jan 7, 2021 8:36:44 AM (19 months ago)

Author:

Patrick Angle

Message:

Web Inspector: console.takeHeapSnapshot() appears to have no effect
​https://bugs.webkit.org/show_bug.cgi?id=219987

Reviewed by Devin Rousso.

Added a banner that appears above the snapshots data grid when there are new (unseen) snapshots that are being
filtered by either the selected time range or filter text.

• Localizations/en.lproj/localizedStrings.js:
• UserInterface/Main.html:
• UserInterface/Views/BannerView.css: Added.

(.banner-view):
(.banner-view > button):
(.banner-view > .dismiss):

• UserInterface/Views/BannerView.js: Added.

(WI.BannerView.prototype._handleActionButtonClicked):
(WI.BannerView.prototype._handleDismissButtonClicked):
(WI.BannerView):

• Added WI.BannerView to handle layout and styling of banners.
• UserInterface/Views/HeapAllocationsTimelineView.css:

(.timeline-view.heap-allocations > .banner-view + .data-grid):

• UserInterface/Views/HeapAllocationsTimelineView.js:

(WI.HeapAllocationsTimelineView):
(WI.HeapAllocationsTimelineView.prototype.layout):

• Take note of any new records that are immediately hidden.

(WI.HeapAllocationsTimelineView.prototype.reset):
(WI.HeapAllocationsTimelineView.prototype.filterDidChange):
(WI.HeapAllocationsTimelineView.prototype._updateUnseenRecordsBannerView):

• Check that unseen messages are still hidden and add/remove the banner as appropriate.

(WI.HeapAllocationsTimelineView.prototype._handleUnseenRecordsBannerClearFiltersClicked):
(WI.HeapAllocationsTimelineView.prototype._handleUnseenRecordsBannerDismissClicked):

• UserInterface/Views/TimelineRecordingContentView.js:

(WI.TimelineRecordingContentView):
(WI.TimelineRecordingContentView.prototype._handleTimelineViewNeedsFiltersCleared):

• Handle the WI.TimelineView.Event.NeedsFiltersCleared event.
• UserInterface/Views/TimelineView.js:
• Added WI.TimelineView.Event.NeedsFiltersCleared event.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (3 diffs)
• UserInterface/Main.html (modified) (2 diffs)
• UserInterface/Views/BannerView.css (copied) (copied from trunk/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineView.css) (2 diffs)
• UserInterface/Views/BannerView.js (added)
• UserInterface/Views/HeapAllocationsTimelineView.css (modified) (1 diff)
• UserInterface/Views/HeapAllocationsTimelineView.js (modified) (6 diffs)
• UserInterface/Views/TimelineRecordingContentView.js (modified) (2 diffs)
• UserInterface/Views/TimelineView.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-01-07  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: console.takeHeapSnapshot() appears to have no effect
+        https://bugs.webkit.org/show_bug.cgi?id=219987
+
+        Reviewed by Devin Rousso.
+
+        Added a banner that appears above the snapshots data grid when there are new (unseen) snapshots that are being
+        filtered by either the selected time range or filter text.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Main.html:
+        * UserInterface/Views/BannerView.css: Added.
+        (.banner-view):
+        (.banner-view > button):
+        (.banner-view > .dismiss):
+        * UserInterface/Views/BannerView.js: Added.
+        (WI.BannerView.prototype._handleActionButtonClicked):
+        (WI.BannerView.prototype._handleDismissButtonClicked):
+        (WI.BannerView):
+        - Added `WI.BannerView` to handle layout and styling of banners.
+        * UserInterface/Views/HeapAllocationsTimelineView.css:
+        (.timeline-view.heap-allocations > .banner-view + .data-grid):
+        * UserInterface/Views/HeapAllocationsTimelineView.js:
+        (WI.HeapAllocationsTimelineView):
+        (WI.HeapAllocationsTimelineView.prototype.layout):
+        - Take note of any new records that are immediately hidden.
+        (WI.HeapAllocationsTimelineView.prototype.reset):
+        (WI.HeapAllocationsTimelineView.prototype.filterDidChange):
+        (WI.HeapAllocationsTimelineView.prototype._updateUnseenRecordsBannerView):
+        - Check that unseen messages are still hidden and add/remove the banner as appropriate.
+        (WI.HeapAllocationsTimelineView.prototype._handleUnseenRecordsBannerClearFiltersClicked):
+        (WI.HeapAllocationsTimelineView.prototype._handleUnseenRecordsBannerDismissClicked):
+        * UserInterface/Views/TimelineRecordingContentView.js:
+        (WI.TimelineRecordingContentView):
+        (WI.TimelineRecordingContentView.prototype._handleTimelineViewNeedsFiltersCleared):
+        - Handle the `WI.TimelineView.Event.NeedsFiltersCleared` event.
+        * UserInterface/Views/TimelineView.js:
+        - Added `WI.TimelineView.Event.NeedsFiltersCleared` event.
+
 2020-12-10  Patrick Angle  <pangle@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -292 +292 @@
 localizedStrings["Clear Cookies"] = "Clear Cookies";
 localizedStrings["Clear Filters"] = "Clear Filters";
+/* Text for button that will clear both text filters and time range filters. */
+localizedStrings["Clear Filters @ Heap Allocations Timeline View"] = "Clear Filters";
 localizedStrings["Clear Local Storage"] = "Clear Local Storage";
 localizedStrings["Clear Log"] = "Clear Log";
@@ -469 +471 @@
 localizedStrings["Disk Cache"] = "Disk Cache";
 localizedStrings["Dismiss"] = "Dismiss";
+/* Tooltip for the dismiss button in banner views. */
+localizedStrings["Dismiss @ Banner View"] = "Dismiss";
 localizedStrings["Displayed Columns"] = "Displayed Columns";
 localizedStrings["Do not clear network items on new page loads"] = "Do not clear network items on new page loads";
@@ -1435 +1439 @@
 localizedStrings["The page's content has changed"] = "The page's content has changed";
 localizedStrings["The resource was requested insecurely."] = "The resource was requested insecurely.";
+/* Message displayed in a banner when one or more snapshots that the user has not yet seen are being filtered. */
+localizedStrings["There are new snapshots that have been filtered @ Heap Allocations Timeline View"] = "There are new snapshots that have been filtered";
 localizedStrings["There are unread messages that have been filtered"] = "There are unread messages that have been filtered";
 localizedStrings["There is an incurred energy penalty each time the page enters script. This commonly happens with timers, event handlers, and observers."] = "There is an incurred energy penalty each time the page enters script. This commonly happens with timers, event handlers, and observers.";

trunk/Source/WebInspectorUI/UserInterface/Main.html

@@ -40 +40 @@
     <link rel="stylesheet" href="Views/AuditTestGroupContentView.css">
     <link rel="stylesheet" href="Views/AuditTreeElement.css">
+    <link rel="stylesheet" href="Views/BannerView.css">
     <link rel="stylesheet" href="Views/BezierEditor.css">
     <link rel="stylesheet" href="Views/BlackboxSettingsView.css">
@@ -616 +617 @@
     <script src="Views/AuditTestGroupContentView.js"></script>
     <script src="Views/AuditTreeElement.js"></script>
+    <script src="Views/BannerView.js"></script>
     <script src="Views/BezierEditor.js"></script>
     <script src="Views/BlackboxSettingsView.js"></script>

trunk/Source/WebInspectorUI/UserInterface/Views/BannerView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2016-2020 Apple Inc. All rights reserved.
+ * Copyright (C) 2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -24 +24 @@
  */
 
-.timeline-view.heap-allocations > .data-grid {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+.banner-view {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    height: var(--navigation-bar-height);
+    padding: 0 4px;
+    color: var(--yellow-highlight-text-color);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    background-color: var(--yellow-highlight-background-color);
+    border-bottom: 1px solid var(--border-color);
 }
 
-.timeline-view.heap-allocations > .data-grid td .icon.heap-snapshot {
-    content: url(../Images/TypeIcons.svg#HeapSnapshot-light);
+.banner-view > button {
+    margin-inline-start: 4px;
 }
 
-.timeline-view.heap-allocations > .data-grid tr.invalid {
-    color: gray;
+.banner-view > .dismiss {
+    position: absolute;
+    inset-inline-end: 5px;
+    width: 16px;
+    height: 16px;
+    padding-bottom: 2px;
 }
-
-.timeline-view.heap-allocations > .data-grid:not(:focus) tr.selected.invalid {
-    color: gray !important;
-}
-
-.timeline-view.heap-allocations > .data-grid tr.baseline {
-    background: hsl(129, 29%, 77%);
-}
-
-.timeline-view.heap-allocations > .content-view-container {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-    .timeline-view.heap-allocations > .data-grid td .icon.heap-snapshot {
-        content: url(../Images/TypeIcons.svg#HeapSnapshot-dark);
-    }
-}

trunk/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineView.css

@@ -32 +32 @@
 }
 
+.timeline-view.heap-allocations > .banner-view + .data-grid {
+    top: var(--navigation-bar-height);
+}
+
 .timeline-view.heap-allocations > .data-grid td .icon.heap-snapshot {
     content: url(../Images/TypeIcons.svg#HeapSnapshot-light);

trunk/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineView.js

@@ -89 +89 @@
         this._snapshotListPathComponent.addEventListener(WI.HierarchicalPathComponent.Event.Clicked, this._snapshotListPathComponentClicked, this);
 
+        this._unseenRecords = [];
+        this._unseenRecordsBannerView = new WI.BannerView(WI.UIString("There are new snapshots that have been filtered", "There are new snapshots that have been filtered @ Heap Allocations Timeline View", "Message displayed in a banner when one or more snapshots that the user has not yet seen are being filtered."), {
+            actionButtonMessage: WI.UIString("Clear Filters", "Clear Filters @ Heap Allocations Timeline View", "Text for button that will clear both text filters and time range filters."),
+            showDismissButton: true,
+        });
+        this._unseenRecordsBannerView.addEventListener(WI.BannerView.Event.ActionButtonClicked, this._handleUnseenRecordsBannerClearFiltersClicked, this);
+        this._unseenRecordsBannerView.addEventListener(WI.BannerView.Event.DismissButtonClicked, this._handleUnseenRecordsBannerDismissClicked, this);
+
         this._dataGrid = new WI.TimelineDataGrid(columns);
         this._dataGrid.sortColumnIdentifier = "timestamp";
@@ -249 +257 @@
 
         for (let heapAllocationsTimelineRecord of this._pendingRecords) {
-            this._dataGrid.addRowInSortOrder(new WI.HeapAllocationsTimelineDataGridNode(heapAllocationsTimelineRecord, {
+            let dataGridNode = new WI.HeapAllocationsTimelineDataGridNode(heapAllocationsTimelineRecord, {
                 graphDataSource: this,
                 heapAllocationsView: this,
-            }));
+            });
+            this._dataGrid.addRowInSortOrder(dataGridNode);
+            if (dataGridNode.hidden)
+                this._unseenRecords.push(dataGridNode);
         }
 
         this._pendingRecords = [];
+        this._updateUnseenRecordsBannerView();
         this._updateCompareHeapSnapshotButton();
     }
@@ -267 +279 @@
         this.showHeapSnapshotList();
         this._pendingRecords = [];
+        this._unseenRecords = [];
+        this._updateUnseenRecordsBannerView();
         this._updateCompareHeapSnapshotButton();
     }
@@ -279 +293 @@
         console.assert(this._contentViewContainer.currentContentView);
         this._contentViewContainer.currentContentView.updateFilter(filters);
+    }
+
+    filterDidChange()
+    {
+        super.filterDidChange();
+
+        this._updateUnseenRecordsBannerView();
     }
 
@@ -366 +387 @@
 
         this._compareHeapSnapshotsButtonItem.enabled = hasAtLeastTwoValidSnapshots;
+    }
+
+    _updateUnseenRecordsBannerView()
+    {
+        this._unseenRecords = this._unseenRecords.filter((record) => record.hidden);
+        if (this._unseenRecords.length) {
+            if (this._unseenRecordsBannerView.parentView !== this)
+                this.insertSubviewBefore(this._unseenRecordsBannerView, this._dataGrid);
+        } else {
+            if (this._unseenRecordsBannerView.parentView === this)
+                this.removeSubview(this._unseenRecordsBannerView);
+        }
     }
 
@@ -478 +511 @@
         this._compareHeapSnapshotsButtonItem.activated = false;
     }
+
+    _handleUnseenRecordsBannerClearFiltersClicked(event)
+    {
+        this.dispatchEventToListeners(WI.TimelineView.Event.NeedsFiltersCleared);
+        this.dispatchEventToListeners(WI.TimelineView.Event.NeedsEntireSelectedRange);
+    }
+
+    _handleUnseenRecordsBannerDismissClicked(event)
+    {
+        this._unseenRecords = [];
+        this._updateUnseenRecordsBannerView();
+    }
 };

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js

@@ -115 +115 @@
         WI.TimelineView.addEventListener(WI.TimelineView.Event.ScannerHide, this._handleTimelineViewScannerHide, this);
         WI.TimelineView.addEventListener(WI.TimelineView.Event.NeedsEntireSelectedRange, this._handleTimelineViewNeedsEntireSelectedRange, this);
+        WI.TimelineView.addEventListener(WI.TimelineView.Event.NeedsFiltersCleared, this._handleTimelineViewNeedsFiltersCleared, this);
+
 
         WI.notifications.addEventListener(WI.Notification.VisibilityStateDidChange, this._inspectorVisibilityStateChanged, this);
@@ -971 +973 @@
     }
 
+    _handleTimelineViewNeedsFiltersCleared(event)
+    {
+        if (!this.isAttached)
+            return;
+
+        this._filterBarNavigationItem.filterBar.clear();
+    }
+
     _updateProgressView()
     {

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js

@@ -338 +338 @@
     ScannerHide: "timeline-view-scanner-hide",
     NeedsEntireSelectedRange: "timeline-view-needs-entire-selected-range",
+    NeedsFiltersCleared: "timeline-view-needs-filters-cleared",
 };