Changeset 242194 in webkit


Ignore:
Timestamp:
Feb 27, 2019 10:54:21 PM (5 years ago)
Author:
Joseph Pecoraro
Message:

Web Inspector: Add a new Scanner TimelineMarker to show up when mousing over TimelineView graphs
​https://bugs.webkit.org/show_bug.cgi?id=195079

Reviewed by Devin Rousso.

  • UserInterface/Base/Utilities.js:

(Note.prototype.enclosingNodeOrSelfWithClassInArray):
Helper for a set of classes.

  • UserInterface/Models/TimelineMarker.js:

Add a new marker type, "Scanner".

  • UserInterface/Views/CPUTimelineView.js:

(WI.CPUTimelineView.prototype.initialLayout):
(WI.CPUTimelineView.prototype._graphPositionForMouseEvent):
(WI.CPUTimelineView.prototype._handleGraphMouseMove):

  • UserInterface/Views/MemoryTimelineView.js:

(WI.MemoryTimelineView):
(WI.MemoryTimelineView.prototype._graphPositionForMouseEvent):
(WI.MemoryTimelineView.prototype._handleGraphMouseMove):
Update a scanner time when mousing over various graphs that span the entire time range.
These use the containing graph element because there was a single pixel between
adjacent graphs which would cause the scanner to flicker because the mouse event target
was not an svg element.

  • UserInterface/Views/TimelineOverview.js:

(WI.TimelineOverview.prototype.hidden):
(WI.TimelineOverview.prototype.updateScannerTime):
(WI.TimelineOverview.prototype.clearScanner):

  • UserInterface/Views/TimelineRecordingContentView.js:

(WI.TimelineRecordingContentView):
(WI.TimelineRecordingContentView.prototype._handleTimelineViewScannerTimeDidChange):
(WI.TimelineRecordingContentView.prototype._handleTimelineViewScannerDidClear):
Update the overview's ruler with scanner changes.

  • UserInterface/Views/TimelineRuler.css:

(.timeline-ruler > .markers > .marker.scanner):

  • UserInterface/Views/TimelineRuler.js:

(WI.TimelineRuler):
(WI.TimelineRuler.prototype.clearMarkers):
(WI.TimelineRuler.prototype.updateScannerTime):
(WI.TimelineRuler.prototype.clearScanner):
(WI.TimelineRuler.prototype._updateMarkers):
Have a special scanner marker that updates.

  • UserInterface/Views/TimelineView.js:

New events that a TimelineView can dispatch to update the overview.

  • UserInterface/Views/Variables.css:

(:root):
(@media (prefers-color-scheme: dark)):
Scanner marker colors.

Location:
trunk/Source/WebInspectorUI
Files:
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r242174 r242194  
     12019-02-27  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: Add a new Scanner TimelineMarker to show up when mousing over TimelineView graphs
     4        https://bugs.webkit.org/show_bug.cgi?id=195079
     5
     6        Reviewed by Devin Rousso.
     7
     8        * UserInterface/Base/Utilities.js:
     9        (Note.prototype.enclosingNodeOrSelfWithClassInArray):
     10        Helper for a set of classes.
     11
     12        * UserInterface/Models/TimelineMarker.js:
     13        Add a new marker type, "Scanner".
     14
     15        * UserInterface/Views/CPUTimelineView.js:
     16        (WI.CPUTimelineView.prototype.initialLayout):
     17        (WI.CPUTimelineView.prototype._graphPositionForMouseEvent):
     18        (WI.CPUTimelineView.prototype._handleGraphMouseMove):
     19        * UserInterface/Views/MemoryTimelineView.js:
     20        (WI.MemoryTimelineView):
     21        (WI.MemoryTimelineView.prototype._graphPositionForMouseEvent):
     22        (WI.MemoryTimelineView.prototype._handleGraphMouseMove):
     23        Update a scanner time when mousing over various graphs that span the entire time range.
     24        These use the containing graph element because there was a single pixel between
     25        adjacent graphs which would cause the scanner to flicker because the mouse event target
     26        was not an svg element.
     27
     28        * UserInterface/Views/TimelineOverview.js:
     29        (WI.TimelineOverview.prototype.hidden):
     30        (WI.TimelineOverview.prototype.updateScannerTime):
     31        (WI.TimelineOverview.prototype.clearScanner):
     32        * UserInterface/Views/TimelineRecordingContentView.js:
     33        (WI.TimelineRecordingContentView):
     34        (WI.TimelineRecordingContentView.prototype._handleTimelineViewScannerTimeDidChange):
     35        (WI.TimelineRecordingContentView.prototype._handleTimelineViewScannerDidClear):
     36        Update the overview's ruler with scanner changes.
     37
     38        * UserInterface/Views/TimelineRuler.css:
     39        (.timeline-ruler > .markers > .marker.scanner):
     40        * UserInterface/Views/TimelineRuler.js:
     41        (WI.TimelineRuler):
     42        (WI.TimelineRuler.prototype.clearMarkers):
     43        (WI.TimelineRuler.prototype.updateScannerTime):
     44        (WI.TimelineRuler.prototype.clearScanner):
     45        (WI.TimelineRuler.prototype._updateMarkers):
     46        Have a special scanner marker that updates.
     47
     48        * UserInterface/Views/TimelineView.js:
     49        New events that a TimelineView can dispatch to update the overview.
     50
     51        * UserInterface/Views/Variables.css:
     52        (:root):
     53        (@media (prefers-color-scheme: dark)):
     54        Scanner marker colors.
     55
    1562019-02-27  Devin Rousso  <drousso@apple.com>
    257

  • trunk/Source/WebInspectorUI/UserInterface/Models/TimelineMarker.js

    r220119 r242194  
    7777    LoadEvent: "load-event",
    7878    DOMContentEvent: "dom-content-event",
    79     TimeStamp: "timestamp"
     79    TimeStamp: "timestamp",
     80    Scanner: "scanner",
    8081};

  • trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js

    r242174 r242194  
    228228
    229229        this._workerViews = [];
     230
     231        this.element.addEventListener("mousemove", this._handleGraphMouseMove.bind(this));
    230232    }
    231233
    … …  
    721723    _graphPositionForMouseEvent(event)
    722724    {
    723         let svgElement = event.target.closest("svg");
    724         if (!svgElement)
     725        let chartElement = event.target.closest(".area-chart, .stacked-area-chart, .range-chart");
     726        if (!chartElement)
    725727            return NaN;
    726728
    727         let svgRect = svgElement.getBoundingClientRect();
    728         let position = event.pageX - svgRect.left;
     729        let chartRect = chartElement.getBoundingClientRect();
     730        let position = event.pageX - chartRect.left;
    729731
    730732        if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
    731             return svgRect.width - position;
     733            return chartRect.width - position;
    732734        return position;
    733735    }
    … …  
    827829        this.dispatchEventToListeners(WI.TimelineView.Event.RecordWasSelected, {record});
    828830    }
     831
     832    _handleGraphMouseMove(event)
     833    {
     834        let mousePosition = this._graphPositionForMouseEvent(event);
     835        if (isNaN(mousePosition)) {
     836            this.dispatchEventToListeners(WI.TimelineView.Event.ScannerHide);
     837            return;
     838        }
     839
     840        let secondsPerPixel = this._timelineRuler.secondsPerPixel;
     841        let time = this.startTime + (mousePosition * secondsPerPixel);
     842
     843        this.dispatchEventToListeners(WI.TimelineView.Event.ScannerShow, {time});
     844    }
    829845};
    830846

  • trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js

    r240870 r242194  
    9595
    9696        timeline.addEventListener(WI.Timeline.Event.RecordAdded, this._memoryTimelineRecordAdded, this);
     97
     98        this.element.addEventListener("mousemove", this._handleGraphMouseMove.bind(this));
    9799    }
    98100
    … …  
    279281    // Private
    280282
     283    _graphPositionForMouseEvent(event)
     284    {
     285        let chartElement = event.target.closest(".area-chart, .stacked-area-chart, .range-chart");
     286        if (!chartElement)
     287            return NaN;
     288
     289        let chartRect = chartElement.getBoundingClientRect();
     290        let position = event.pageX - chartRect.left;
     291
     292        if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
     293            return chartRect.width - position;
     294        return position;
     295    }
     296
     297    _handleGraphMouseMove(event)
     298    {
     299        let mousePosition = this._graphPositionForMouseEvent(event);
     300        if (isNaN(mousePosition)) {
     301            this.dispatchEventToListeners(WI.TimelineView.Event.ScannerHide);
     302            return;
     303        }
     304
     305        let secondsPerPixel = this._timelineRuler.secondsPerPixel;
     306        let time = this.startTime + (mousePosition * secondsPerPixel);
     307
     308        this.dispatchEventToListeners(WI.TimelineView.Event.ScannerShow, {time});
     309    }
     310
    281311    _clearUsageLegend()
    282312    {

  • trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css

    r239760 r242194  
    2929    bottom: 0;
    3030
    31     --border-start-style: 1px solid lightgrey;;
     31    --border-start-style: 1px solid lightgrey;
    3232}
    3333

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js

    r241953 r242194  
    361361        for (let overviewGraph of this._overviewGraphsByTypeMap.values())
    362362            overviewGraph.hidden();
     363
     364        this.hideScanner();
    363365    }
    364366
    … …  
    408410
    409411        overviewGraph.selectedRecord = record;
     412    }
     413
     414    showScanner(time)
     415    {
     416        this._timelineRuler.showScanner(time);
     417    }
     418
     419    hideScanner()
     420    {
     421        this._timelineRuler.hideScanner();
    410422    }
    411423

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

    r242104 r242194  
    9999        WI.TimelineView.addEventListener(WI.TimelineView.Event.RecordWasFiltered, this._handleTimelineViewRecordFiltered, this);
    100100        WI.TimelineView.addEventListener(WI.TimelineView.Event.RecordWasSelected, this._handleTimelineViewRecordSelected, this);
     101        WI.TimelineView.addEventListener(WI.TimelineView.Event.ScannerShow, this._handleTimelineViewScannerShow, this);
     102        WI.TimelineView.addEventListener(WI.TimelineView.Event.ScannerHide, this._handleTimelineViewScannerHide, this);
    101103
    102104        WI.notifications.addEventListener(WI.Notification.VisibilityStateDidChange, this._inspectorVisibilityStateChanged, this);
    … …  
    847849    }
    848850
     851    _handleTimelineViewScannerShow(event)
     852    {
     853        if (!this.visible)
     854            return;
     855
     856        let {time} = event.data;
     857        this._timelineOverview.showScanner(time);
     858    }
     859
     860    _handleTimelineViewScannerHide(event)
     861    {
     862        if (!this.visible)
     863            return;
     864
     865        this._timelineOverview.hideScanner();
     866    }
     867
    849868    _updateProgressView()
    850869    {

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css

    r241975 r242194  
    198198}
    199199
     200.timeline-ruler > .markers > .marker.scanner {
     201    color: var(--timeline-scanner-color);
     202}
     203
    200204.timeline-ruler > .selection-drag {
    201205    position: absolute;

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js

    r238484 r242194  
    5656        this._enabled = true;
    5757
     58        this._scannerMarker = null;
    5859        this._markerElementMap = new Map;
    5960        this._cachedClientWidth = 0;
    … …  
    375376
    376377        this._markerElementMap.clear();
     378
     379        this._scannerMarker = null;
    377380    }
    378381
    … …  
    380383    {
    381384        return this._markerElementMap.get(marker) || null;
     385    }
     386
     387    showScanner(time)
     388    {
     389        if (!this._scannerMarker) {
     390            this._scannerMarker = new WI.TimelineMarker(time, WI.TimelineMarker.Type.Scanner);
     391            this.addMarker(this._scannerMarker);
     392        }
     393
     394        this._scannerMarker.time = time;
     395    }
     396
     397    hideScanner()
     398    {
     399        if (this._scannerMarker)
     400            this._scannerMarker.time = -1;
    382401    }
    383402
    … …  
    625644
    626645        for (let [marker, markerElement] of this._markerElementMap) {
     646            if (marker.time < 0) {
     647                markerElement.remove();
     648                continue;
     649            }
     650
    627651            let newPosition = (marker.time - this._startTime) / duration;
    628652            let property = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left";

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

    r242104 r242194  
    338338    RecordWasFiltered: "timeline-view-record-was-filtered",
    339339    RecordWasSelected: "timeline-view-record-was-selected",
     340    ScannerShow: "timeline-view-scanner-show",
     341    ScannerHide: "timeline-view-scanner-hide",
    340342};

  • trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css

    r242118 r242194  
    111111    --timeline-even-background-color: hsl(0, 0%, 96%);
    112112
     113    --timeline-scanner-color: hsl(0, 0%, 35%);
     114
    113115    --memory-javascript-fill-color: hsl(269, 65%, 75%);
    114116    --memory-javascript-stroke-color: hsl(269, 33%, 50%);
    … …  
    292294        --timeline-even-background-color: hsl(0, 0%, 25%);
    293295
     296        --timeline-scanner-color: hsl(0, 0%, 80%);
     297
    294298        /* Invert colors yet preserve the hue */
    295299        --filter-invert: invert(100%) hue-rotate(180deg);
Note: See TracChangeset for help on using the changeset viewer.