⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 294166 in webkit


Ignore:
Timestamp:
May 13, 2022, 11:06:14 AM (4 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: [Meta] Implement Timelines Film Strip
​https://bugs.webkit.org/show_bug.cgi?id=239350

Patch by Anjali Kumar <​anjalik_22@apple.com> on 2022-05-13
Reviewed by Devin Rousso and Patrick Angle.

Source/JavaScriptCore:

  • inspector/protocol/Timeline.json:

Source/WebCore:

Test: inspector/timeline/timeline-event-screenshots.html

  • inspector/TimelineRecordFactory.cpp:

(WebCore::TimelineRecordFactory::createScreenshotData):

  • inspector/TimelineRecordFactory.h:
  • inspector/agents/InspectorTimelineAgent.cpp:

(WebCore::InspectorTimelineAgent::didComposite):
(WebCore::InspectorTimelineAgent::willPaint):
(WebCore::InspectorTimelineAgent::didPaint):
(WebCore::InspectorTimelineAgent::toggleInstruments):
(WebCore::InspectorTimelineAgent::captureScreenshot):
(WebCore::toProtocol):
(WebCore::InspectorTimelineAgent::createRecordEntry):
(WebCore::InspectorTimelineAgent::pushCurrentRecord):

  • inspector/agents/InspectorTimelineAgent.h:

Source/WebInspectorUI:

Add the ability to see screenshots taken of the viewport within the Timelines tab. The purpose of the
screenshots is to provide more context to the other data presented within the Timelines tab, so that
developers can improve the efficiency of their page loading times. They can see what is painting on their
pages in addition to when the paints are occuring.

The screenshots presented are taken immediately after each composite. They are designed to be layered
on top of one another as opposed to being presented in a non-overlapping fashion in order to provide developers
with the exact screenshot that occured during a particular point in time on the timeline. This allows developers
to zoom in and pinpoint the exact moment the page looked like that particularly rendered screenshot.

When a screenshot is clicked on, the details section opens up to an enlarged view of that particular image.
Developers can utilize this to view each screenshot in greater detail.

This feature is named "Screenshots" (one word), as in the UI we currently have existing strings for "Capture
Screenshot" and "Could not capture screenshot".

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Base/Setting.js:
  • UserInterface/Controllers/TimelineManager.js:

(WI.TimelineManager.defaultTimelineTypes):
(WI.TimelineManager.prototype._processRecord):
(WI.TimelineManager.prototype._updateAutoCaptureInstruments):

  • UserInterface/Images/IdentifierIcons.svg:
  • UserInterface/Main.html:
  • UserInterface/Models/Instrument.js:

(WI.Instrument.createForTimelineType):

  • UserInterface/Models/ScreenshotsInstrument.js: Added.

(WI.ScreenshotsInstrument):
(WI.ScreenshotsInstrument.supported):
(WI.ScreenshotsInstrument.prototype.get timelineRecordType):

  • UserInterface/Models/ScreenshotsTimelineRecord.js: Added.

(WI.ScreenshotsTimelineRecord):
(WI.ScreenshotsTimelineRecord.async fromJSON):
(WI.ScreenshotsTimelineRecord.prototype.toJSON):
(WI.ScreenshotsTimelineRecord.prototype.get imageData):
(WI.ScreenshotsTimelineRecord.prototype.get width):
(WI.ScreenshotsTimelineRecord.prototype.get height):

  • UserInterface/Models/TimelineRecord.js:

(WI.TimelineRecord.async fromJSON):

  • UserInterface/Models/TimelineRecording.js:

(WI.TimelineRecording.prototype.addRecord):

  • UserInterface/Test.html:
  • UserInterface/Views/ContentView.js:

(WI.ContentView.createFromRepresentedObject):

  • UserInterface/Views/ScreenshotsTimelineOverviewGraph.css: Added.

(body .sidebar > .panel.navigation.timeline > .timelines-content li.item.screenshots,):
(.timeline-overview-graph.screenshots > img):
(.timeline-overview-graph.screenshots > img.selected):

  • UserInterface/Views/ScreenshotsTimelineOverviewGraph.js: Added.

(WI.ScreenshotsTimelineOverviewGraph):
(WI.ScreenshotsTimelineOverviewGraph.prototype.get height):
(WI.ScreenshotsTimelineOverviewGraph.prototype.layout):
(WI.ScreenshotsTimelineOverviewGraph.prototype.updateSelectedRecord):
(WI.ScreenshotsTimelineOverviewGraph.prototype._visibleRecords):

  • UserInterface/Views/ScreenshotsTimelineView.css: Added.

(.timeline-view.screenshots):
(.timeline-view.screenshots > img):
(.timeline-view.screenshots > img.selected):

  • UserInterface/Views/ScreenshotsTimelineView.js: Added.

(WI.ScreenshotsTimelineView):
(WI.ScreenshotsTimelineView.prototype.reset):
(WI.ScreenshotsTimelineView.prototype.clear):
(WI.ScreenshotsTimelineView.prototype.get showsFilterBar):
(WI.ScreenshotsTimelineView.prototype.layout):
(WI.ScreenshotsTimelineView.prototype.selectRecord):
(WI.ScreenshotsTimelineView.prototype._selectTimelineRecord):
(WI.ScreenshotsTimelineView.prototype._visibleRecords):

  • UserInterface/Views/SettingsTabContentView.js:

(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

  • UserInterface/Views/TimelineIcons.css:

(.screenshots-icon .icon):
(@media (prefers-color-scheme: dark) .screenshots-icon .icon):

  • UserInterface/Views/TimelineOverviewGraph.js:

(WI.TimelineOverviewGraph.createForTimeline):

  • UserInterface/Views/TimelineTabContentView.js:

(WI.TimelineTabContentView.displayNameForTimelineType):
(WI.TimelineTabContentView.iconClassNameForTimelineType):
(WI.TimelineTabContentView.genericClassNameForTimelineType):
(WI.TimelineTabContentView.iconClassNameForRecord):
(WI.TimelineTabContentView.displayNameForRecord):

LayoutTests:

  • inspector/timeline/resources/timeline-event-utilities.js:

(TestPage.registerInitializer.InspectorTest.TimelineEvent.captureTimelineWithScript):
(TestPage.registerInitializer):

  • inspector/timeline/timeline-event-screenshots-expected.txt: Added.
  • inspector/timeline/timeline-event-screenshots.html: Added.
  • inspector/timeline/timeline-recording-expected.txt:
Location:
trunk
Files:
8 added
26 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r294156 r294166  
     12022-05-13  Anjali Kumar  <anjalik_22@apple.com>
     2
     3        Web Inspector: [Meta] Implement Timelines Film Strip
     4        https://bugs.webkit.org/show_bug.cgi?id=239350
     5
     6        Reviewed by Devin Rousso and Patrick Angle.
     7
     8        * inspector/timeline/resources/timeline-event-utilities.js:
     9        (TestPage.registerInitializer.InspectorTest.TimelineEvent.captureTimelineWithScript):
     10        (TestPage.registerInitializer):
     11        * inspector/timeline/timeline-event-screenshots-expected.txt: Added.
     12        * inspector/timeline/timeline-event-screenshots.html: Added.
     13        * inspector/timeline/timeline-recording-expected.txt:
     14
    1152022-05-13  Tim Nguyen  <ntim@apple.com>
    216

  • trunk/LayoutTests/inspector/timeline/resources/timeline-event-utilities.js

    r251856 r294166  
    66    InspectorTest.TimelineEvent = {};
    77
    8     InspectorTest.TimelineEvent.captureTimelineWithScript = function({expression, eventType}) {
     8    InspectorTest.TimelineEvent.captureTimelineWithScript = function({expression, eventType, timelineType}) {
    99        let savePageDataPromise = InspectorTest.awaitEvent("SavePageData").then((event) => {
    1010            return event.data;
    … …  
    1616            if (WI.timelineManager.capturingState === WI.TimelineManager.CapturingState.Active) {
    1717                let recording = WI.timelineManager.activeRecording;
    18                 let scriptTimeline = recording.timelines.get(WI.TimelineRecord.Type.Script);
     18                let timeline = recording.timelines.get(timelineType ?? WI.TimelineRecord.Type.Script);
    1919
    20                 let recordAddedListener = scriptTimeline.addEventListener(WI.Timeline.Event.RecordAdded, (recordAddedEvent) => {
     20                let recordAddedListener = timeline.addEventListener(WI.Timeline.Event.RecordAdded, (recordAddedEvent) => {
    2121                    let {record} = recordAddedEvent.data;
    22                     if (record.eventType !== eventType)
     22                    if (eventType && record.eventType !== eventType)
    2323                        return;
    2424
    25                     scriptTimeline.removeEventListener(WI.Timeline.Event.RecordAdded, recordAddedListener);
     25                    timeline.removeEventListener(WI.Timeline.Event.RecordAdded, recordAddedListener);
    2626
    2727                    InspectorTest.log("Stopping Capture...");

  • trunk/LayoutTests/inspector/timeline/timeline-recording-expected.txt

    r261121 r294166  
    3636  "discontinuities": [],
    3737  "instrumentTypes": [
     38    "timeline-record-type-screenshots",
    3839    "timeline-record-type-network",
    3940    "timeline-record-type-layout",

  • trunk/LayoutTests/platform/gtk/TestExpectations

    r294146 r294166  
    12001200webkit.org/b/147229 inspector/css/modify-rule-selector.html [ Skip ] # Timeout
    12011201
     1202webkit.org/b/240349 inspector/timeline/timeline-event-screenshots.html [ Skip ]
     1203
    12021204webkit.org/b/142292 fast/images/animated-gif-zooming.html [ Timeout ]
    12031205

  • trunk/Source/JavaScriptCore/ChangeLog

    r294154 r294166  
     12022-05-13  Anjali Kumar  <anjalik_22@apple.com>
     2
     3        Web Inspector: [Meta] Implement Timelines Film Strip
     4        https://bugs.webkit.org/show_bug.cgi?id=239350
     5
     6        Reviewed by Devin Rousso and Patrick Angle.
     7
     8        * inspector/protocol/Timeline.json:
     9
    1102022-05-13  Lauro Moura  <lmoura@igalia.com>
    211

  • trunk/Source/JavaScriptCore/inspector/protocol/Timeline.json

    r251959 r294166  
    3131                "CancelAnimationFrame",
    3232                "FireAnimationFrame",
    33                 "ObserverCallback"
     33                "ObserverCallback",
     34                "Screenshot"
    3435            ]
    3536        },
    … …  
    4445                "Memory",
    4546                "Heap",
    46                 "Animation"
     47                "Animation",
     48                "Screenshot"
    4749            ]
    4850        },

  • trunk/Source/WebCore/ChangeLog

    r294164 r294166  
     12022-05-13  Anjali Kumar  <anjalik_22@apple.com>
     2
     3        Web Inspector: [Meta] Implement Timelines Film Strip
     4        https://bugs.webkit.org/show_bug.cgi?id=239350
     5
     6        Reviewed by Devin Rousso and Patrick Angle.
     7
     8        Test: inspector/timeline/timeline-event-screenshots.html
     9
     10        * inspector/TimelineRecordFactory.cpp:
     11        (WebCore::TimelineRecordFactory::createScreenshotData):
     12        * inspector/TimelineRecordFactory.h:
     13        * inspector/agents/InspectorTimelineAgent.cpp:
     14        (WebCore::InspectorTimelineAgent::didComposite):
     15        (WebCore::InspectorTimelineAgent::willPaint):
     16        (WebCore::InspectorTimelineAgent::didPaint):
     17        (WebCore::InspectorTimelineAgent::toggleInstruments):
     18        (WebCore::InspectorTimelineAgent::captureScreenshot):
     19        (WebCore::toProtocol):
     20        (WebCore::InspectorTimelineAgent::createRecordEntry):
     21        (WebCore::InspectorTimelineAgent::pushCurrentRecord):
     22        * inspector/agents/InspectorTimelineAgent.h:
     23
    1242022-05-13  Michael Catanzaro  <mcatanzaro@redhat.com>
    225

  • trunk/Source/WebCore/inspector/TimelineRecordFactory.cpp

    r266885 r294166  
    162162}
    163163
     164Ref<JSON::Object> TimelineRecordFactory::createScreenshotData(const String& imageData, int width, int height)
     165{
     166    Ref<JSON::Object> data = JSON::Object::create();
     167    data->setString("imageData"_s, imageData);
     168    data->setInteger("width"_s, width);
     169    data->setInteger("height"_s, height);
     170    return data;
     171}
     172
    164173void TimelineRecordFactory::appendLayoutRoot(JSON::Object& data, const FloatQuad& quad)
    165174{

  • trunk/Source/WebCore/inspector/TimelineRecordFactory.h

    r266885 r294166  
    5959    static Ref<JSON::Object> createObserverCallbackData(const String& callbackType);
    6060    static Ref<JSON::Object> createPaintData(const FloatQuad&);
     61    static Ref<JSON::Object> createScreenshotData(const String& imageData, int width, int height);
    6162
    6263    static void appendLayoutRoot(JSON::Object& data, const FloatQuad&);

  • trunk/Source/WebCore/inspector/agents/InspectorTimelineAgent.cpp

    r287486 r294166  
    5656#include <JavaScriptCore/InspectorScriptProfilerAgent.h>
    5757#include <JavaScriptCore/ScriptArguments.h>
     58#include <wtf/SetForScope.h>
    5859#include <wtf/Stopwatch.h>
    5960
    … …  
    424425        didCompleteCurrentRecord(TimelineRecordType::Composite);
    425426    m_startedComposite = false;
     427
     428    if (m_instruments.contains(Protocol::Timeline::Instrument::Screenshot))
     429        captureScreenshot();
    426430}
    427431
    428432void InspectorTimelineAgent::willPaint(Frame& frame)
    429433{
     434    if (m_isCapturingScreenshot)
     435        return;
     436
    430437    pushCurrentRecord(JSON::Object::create(), TimelineRecordType::Paint, true, &frame);
    431438}
    … …  
    433440void InspectorTimelineAgent::didPaint(RenderObject& renderer, const LayoutRect& clipRect)
    434441{
     442    if (m_isCapturingScreenshot)
     443        return;
     444
    435445    if (m_recordStack.isEmpty())
    436446        return;
    … …  
    579589            toggleAnimationInstrument(state);
    580590            break;
     591        case Protocol::Timeline::Instrument::Screenshot: {
     592            break;
     593        }
    581594        }
    582595    }
    … …  
    647660        else
    648661            animationAgent->stopTracking();
     662    }
     663}
     664
     665void InspectorTimelineAgent::captureScreenshot()
     666{
     667    SetForScope isTakingScreenshot(m_isCapturingScreenshot, true);
     668
     669    auto snapshotStartTime = timestamp();
     670    auto& frame = m_inspectedPage.mainFrame();
     671    auto viewportRect = m_inspectedPage.mainFrame().view()->unobscuredContentRect();
     672    if (auto snapshot = snapshotFrameRect(frame, viewportRect, { { }, PixelFormat::BGRA8, DestinationColorSpace::SRGB() })) {
     673        auto snapshotRecord = TimelineRecordFactory::createScreenshotData(snapshot->toDataURL("image/png"_s), viewportRect.width(), viewportRect.height());
     674        pushCurrentRecord(WTFMove(snapshotRecord), TimelineRecordType::Screenshot, false, &frame, snapshotStartTime);
     675        didCompleteCurrentRecord(TimelineRecordType::Screenshot);
    649676    }
    650677}
    … …  
    738765    case TimelineRecordType::ObserverCallback:
    739766        return Protocol::Timeline::EventType::ObserverCallback;
     767
     768    case TimelineRecordType::Screenshot:
     769        return Protocol::Timeline::EventType::Screenshot;
    740770    }
    741771
    … …  
    814844}
    815845
    816 InspectorTimelineAgent::TimelineRecordEntry InspectorTimelineAgent::createRecordEntry(Ref<JSON::Object>&& data, TimelineRecordType type, bool captureCallStack, Frame* frame)
    817 {
    818     Ref<JSON::Object> record = TimelineRecordFactory::createGenericRecord(timestamp(), captureCallStack ? m_maxCallStackDepth : 0);
     846InspectorTimelineAgent::TimelineRecordEntry InspectorTimelineAgent::createRecordEntry(Ref<JSON::Object>&& data, TimelineRecordType type, bool captureCallStack, Frame* frame, std::optional<double> startTime)
     847{
     848    Ref<JSON::Object> record = TimelineRecordFactory::createGenericRecord(startTime.value_or(timestamp()), captureCallStack ? m_maxCallStackDepth : 0);
    819849    setFrameIdentifier(&record.get(), frame);
    820850    return TimelineRecordEntry(WTFMove(record), WTFMove(data), JSON::Array::create(), type);
    821851}
    822852
    823 void InspectorTimelineAgent::pushCurrentRecord(Ref<JSON::Object>&& data, TimelineRecordType type, bool captureCallStack, Frame* frame)
    824 {
    825     pushCurrentRecord(createRecordEntry(WTFMove(data), type, captureCallStack, frame));
     853void InspectorTimelineAgent::pushCurrentRecord(Ref<JSON::Object>&& data, TimelineRecordType type, bool captureCallStack, Frame* frame, std::optional<double> startTime)
     854{
     855    pushCurrentRecord(createRecordEntry(WTFMove(data), type, captureCallStack, frame, startTime));
    826856}
    827857

  • trunk/Source/WebCore/inspector/agents/InspectorTimelineAgent.h

    r278253 r294166  
    8080   
    8181    ObserverCallback,
     82
     83    Screenshot,
    8284};
    8385
    … …  
    156158    void enableBreakpoints();
    157159
     160    void captureScreenshot();
     161
    158162    friend class TimelineRecordStack;
    159163
    … …  
    179183    void sendEvent(Ref<JSON::Object>&&);
    180184    void appendRecord(Ref<JSON::Object>&& data, TimelineRecordType, bool captureCallStack, Frame*);
    181     void pushCurrentRecord(Ref<JSON::Object>&&, TimelineRecordType, bool captureCallStack, Frame*);
     185    void pushCurrentRecord(Ref<JSON::Object>&&, TimelineRecordType, bool captureCallStack, Frame*, std::optional<double> startTime = std::nullopt);
    182186    void pushCurrentRecord(const TimelineRecordEntry& record) { m_recordStack.append(record); }
    183187
    184     TimelineRecordEntry createRecordEntry(Ref<JSON::Object>&& data, TimelineRecordType, bool captureCallStack, Frame*);
     188    TimelineRecordEntry createRecordEntry(Ref<JSON::Object>&& data, TimelineRecordType, bool captureCallStack, Frame*, std::optional<double> startTime = std::nullopt);
    185189
    186190    void setFrameIdentifier(JSON::Object* record, Frame*);
    … …  
    217221#endif
    218222    bool m_startedComposite { false };
     223    bool m_isCapturingScreenshot { false };
    219224};
    220225

  • trunk/Source/WebInspectorUI/ChangeLog

    r293727 r294166  
     12022-05-13  Anjali Kumar  <anjalik_22@apple.com>
     2
     3        Web Inspector: [Meta] Implement Timelines Film Strip
     4        https://bugs.webkit.org/show_bug.cgi?id=239350
     5
     6        Reviewed by Devin Rousso and Patrick Angle.
     7
     8        Add the ability to see screenshots taken of the viewport within the Timelines tab. The purpose of the
     9        screenshots is to provide more context to the other data presented within the Timelines tab, so that
     10        developers can improve the efficiency of their page loading times. They can see what is painting on their
     11        pages in addition to when the paints are occuring.
     12
     13        The screenshots presented are taken immediately after each composite. They are designed to be layered
     14        on top of one another as opposed to being presented in a non-overlapping fashion in order to provide developers
     15        with the exact screenshot that occured during a particular point in time on the timeline. This allows developers
     16        to zoom in and pinpoint the exact moment the page looked like that particularly rendered screenshot.
     17
     18        When a screenshot is clicked on, the details section opens up to an enlarged view of that particular image.
     19        Developers can utilize this to view each screenshot in greater detail.
     20
     21        This feature is named "Screenshots" (one word), as in the UI we currently have existing strings for "Capture
     22        Screenshot" and "Could not capture screenshot".
     23
     24        * Localizations/en.lproj/localizedStrings.js:
     25        * UserInterface/Base/Setting.js:
     26        * UserInterface/Controllers/TimelineManager.js:
     27        (WI.TimelineManager.defaultTimelineTypes):
     28        (WI.TimelineManager.prototype._processRecord):
     29        (WI.TimelineManager.prototype._updateAutoCaptureInstruments):
     30        * UserInterface/Images/IdentifierIcons.svg:
     31        * UserInterface/Main.html:
     32        * UserInterface/Models/Instrument.js:
     33        (WI.Instrument.createForTimelineType):
     34        * UserInterface/Models/ScreenshotsInstrument.js: Added.
     35        (WI.ScreenshotsInstrument):
     36        (WI.ScreenshotsInstrument.supported):
     37        (WI.ScreenshotsInstrument.prototype.get timelineRecordType):
     38        * UserInterface/Models/ScreenshotsTimelineRecord.js: Added.
     39        (WI.ScreenshotsTimelineRecord):
     40        (WI.ScreenshotsTimelineRecord.async fromJSON):
     41        (WI.ScreenshotsTimelineRecord.prototype.toJSON):
     42        (WI.ScreenshotsTimelineRecord.prototype.get imageData):
     43        (WI.ScreenshotsTimelineRecord.prototype.get width):
     44        (WI.ScreenshotsTimelineRecord.prototype.get height):
     45        * UserInterface/Models/TimelineRecord.js:
     46        (WI.TimelineRecord.async fromJSON):
     47        * UserInterface/Models/TimelineRecording.js:
     48        (WI.TimelineRecording.prototype.addRecord):
     49        * UserInterface/Test.html:
     50        * UserInterface/Views/ContentView.js:
     51        (WI.ContentView.createFromRepresentedObject):
     52        * UserInterface/Views/ScreenshotsTimelineOverviewGraph.css: Added.
     53        (body .sidebar > .panel.navigation.timeline > .timelines-content li.item.screenshots,):
     54        (.timeline-overview-graph.screenshots > img):
     55        (.timeline-overview-graph.screenshots > img.selected):
     56        * UserInterface/Views/ScreenshotsTimelineOverviewGraph.js: Added.
     57        (WI.ScreenshotsTimelineOverviewGraph):
     58        (WI.ScreenshotsTimelineOverviewGraph.prototype.get height):
     59        (WI.ScreenshotsTimelineOverviewGraph.prototype.layout):
     60        (WI.ScreenshotsTimelineOverviewGraph.prototype.updateSelectedRecord):
     61        (WI.ScreenshotsTimelineOverviewGraph.prototype._visibleRecords):
     62        * UserInterface/Views/ScreenshotsTimelineView.css: Added.
     63        (.timeline-view.screenshots):
     64        (.timeline-view.screenshots > img):
     65        (.timeline-view.screenshots > img.selected):
     66        * UserInterface/Views/ScreenshotsTimelineView.js: Added.
     67        (WI.ScreenshotsTimelineView):
     68        (WI.ScreenshotsTimelineView.prototype.reset):
     69        (WI.ScreenshotsTimelineView.prototype.clear):
     70        (WI.ScreenshotsTimelineView.prototype.get showsFilterBar):
     71        (WI.ScreenshotsTimelineView.prototype.layout):
     72        (WI.ScreenshotsTimelineView.prototype.selectRecord):
     73        (WI.ScreenshotsTimelineView.prototype._selectTimelineRecord):
     74        (WI.ScreenshotsTimelineView.prototype._visibleRecords):
     75        * UserInterface/Views/SettingsTabContentView.js:
     76        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
     77        * UserInterface/Views/TimelineIcons.css:
     78        (.screenshots-icon .icon):
     79        (@media (prefers-color-scheme: dark) .screenshots-icon .icon):
     80        * UserInterface/Views/TimelineOverviewGraph.js:
     81        (WI.TimelineOverviewGraph.createForTimeline):
     82        * UserInterface/Views/TimelineTabContentView.js:
     83        (WI.TimelineTabContentView.displayNameForTimelineType):
     84        (WI.TimelineTabContentView.iconClassNameForTimelineType):
     85        (WI.TimelineTabContentView.genericClassNameForTimelineType):
     86        (WI.TimelineTabContentView.iconClassNameForRecord):
     87        (WI.TimelineTabContentView.displayNameForRecord):
     88
    1892022-05-03  Patrick Angle  <pangle@apple.com>
    290

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

    r293409 r294166  
    106106localizedStrings["2D"] = "2D";
    107107localizedStrings["720p"] = "720p";
    108 /* Text indicating that the local override intercepts the request phase of network activity. */
     108/* Text indicating that the local override will block the network activity with an access error. */
    109109localizedStrings["Access Control @ Local Override Type"] = "Access Control";
    110110localizedStrings["Accessibility"] = "Accessibility";
    … …  
    281281/* Tooltip for a timestamp marker that represents when a CSS animation/transition is canceled */
    282282localizedStrings["Canceled"] = "Canceled";
    283 /* Text indicating that the local override will always block the network activity. */
     283/* Text indicating that the local override will block the network activity with a cancellation error. */
    284284localizedStrings["Cancellation @ Local Override Type"] = "Cancellation";
    285285localizedStrings["Canvas"] = "Canvas";
    … …  
    606606localizedStrings["Enable Inspector Bootstrap Script"] = "Enable Inspector Bootstrap Script";
    607607localizedStrings["Enable Local Override"] = "Enable Local Override";
    608 localizedStrings["Enable Preview Features"] = "Enable Preview Features";
    609608localizedStrings["Enable Program"] = "Enable Program";
    610609localizedStrings["Enable Rule"] = "Enable Rule";
    … …  
    733732localizedStrings["Garbage Collection"] = "Garbage Collection";
    734733localizedStrings["General"] = "General";
    735 /* Text indicating that the local override intercepts the response phase of network activity. */
     734/* Text indicating that the local override will block the network activity with a general error. */
    736735localizedStrings["General @ Local Override Type"] = "General";
    737736localizedStrings["Getter"] = "Getter";
    … …  
    13061305localizedStrings["Screen Shot %s-%s-%s at %s.%s.%s"] = "Screen Shot %s-%s-%s at %s.%s.%s";
    13071306localizedStrings["Screen size:"] = "Screen size:";
     1307localizedStrings["Screenshots"] = "Screenshots";
    13081308localizedStrings["Script"] = "Script";
    13091309localizedStrings["Script Element %d"] = "Script Element %d";
    … …  
    13821382localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
    13831383localizedStrings["Show Scope Chain on pause"] = "Show Scope Chain on pause";
     1384localizedStrings["Show Screenshots"] = "Show Screenshots";
    13841385localizedStrings["Show all actions"] = "Show all actions";
    13851386localizedStrings["Show all resources"] = "Show all resources";
    … …  
    14431444/* Property value for `font-variant-numeric: stacked-fractions`. */
    14441445localizedStrings["Stacked Fractions @ Font Details Sidebar Property Value"] = "Stacked Fractions";
    1445 localizedStrings["Staging:"] = "Staging:";
    14461446localizedStrings["Stalled"] = "Stalled";
    14471447localizedStrings["Start"] = "Start";
    … …  
    15871587/* Name of Timelines Tab */
    15881588localizedStrings["Timelines Tab Name"] = "Timelines";
    1589 /* Text indicating that the local override will skip all network activity and instead immediately serve the response. */
     1589localizedStrings["Timelines:"] = "Timelines:";
     1590/* Text indicating that the local override will block the network activity with an timeout error. */
    15901591localizedStrings["Timeout @ Local Override Type"] = "Timeout";
    15911592localizedStrings["Timer %d Fired"] = "Timer %d Fired";

  • trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

    r292156 r294166  
    233233    experimentalAllowInspectingInspector: new WI.Setting("experimental-allow-inspecting-inspector", false),
    234234    experimentalCSSCompletionFuzzyMatching: new WI.Setting("experimental-css-completion-fuzzy-matching", true),
     235    experimentalShowScreenshotsTimeline: new WI.Setting("experimental-show-screenshots-timeline", false),
    235236
    236237    // Protocol

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js

    r269359 r294166  
    118118        }
    119119
    120         let defaultTypes = [
    121             WI.TimelineRecord.Type.Network,
    122             WI.TimelineRecord.Type.Layout,
    123             WI.TimelineRecord.Type.Script,
    124             WI.TimelineRecord.Type.RenderingFrame,
    125         ];
     120        let defaultTypes = [];
     121
     122        if (WI.ScreenshotsInstrument.supported())
     123            defaultTypes.push(WI.TimelineRecord.Type.Screenshots);
     124
     125        defaultTypes.push(WI.TimelineRecord.Type.Network);
     126        defaultTypes.push(WI.TimelineRecord.Type.Layout);
     127        defaultTypes.push(WI.TimelineRecord.Type.Script);
     128        defaultTypes.push(WI.TimelineRecord.Type.RenderingFrame);
    126129
    127130        if (WI.CPUInstrument.supported())
    … …  
    987990            return new WI.ScriptTimelineRecord(WI.ScriptTimelineRecord.EventType.AnimationFrameCanceled, startTime, startTime, callFrames, sourceCodeLocation, recordPayload.data.id);
    988991
     992        case InspectorBackend.Enum.Timeline.EventType.Screenshot:
     993            console.assert(isNaN(endTime));
     994
     995            return new WI.ScreenshotsTimelineRecord(startTime, recordPayload.data.imageData, recordPayload.data.width, recordPayload.data.height);
     996
    989997        default:
    990998            console.error("Missing handling of Timeline Event Type: " + recordPayload.type);
    … …  
    13451353                    instrumentSet.add(InspectorBackend.Enum.Timeline.Instrument.CPU);
    13461354                    break;
     1355                case WI.TimelineRecord.Type.Screenshots:
     1356                    instrumentSet.add(InspectorBackend.Enum.Timeline.Instrument.Screenshot);
     1357                    break;
    13471358                case WI.TimelineRecord.Type.Memory:
    13481359                    instrumentSet.add(InspectorBackend.Enum.Timeline.Instrument.Memory);

  • trunk/Source/WebInspectorUI/UserInterface/Images/IdentifierIcons.svg

    r258039 r294166  
    2929
    3030            .dark.red {
     31                --fill: hsl(359, 69%, 25%);
     32                --outline: hsl(357, 77%, 59%);
     33            }
     34
     35            .light.pink {
     36                --fill: hsl(360, 64%, 75%);
     37                --stroke: hsl(360, 54%, 62%);
     38                --outline: hsl(360, 54%, 62%);
     39            }
     40
     41            .dark.pink {
    3142                --fill: hsl(359, 69%, 25%);
    3243                --outline: hsl(357, 77%, 59%);
    … …  
    132143    </symbol>
    133144
     145    <symbol id="screenshot" viewBox="0 0 16 16">
     146        <path d="M10.5,4.94 L10.1875,4.26205342 C10.1875,4.26205342 9.92668194,3.69 9.5625,3.69 L6.4375,3.69 C6.07272974,3.69 5.8125,4.2620534 5.8125,4.2620534 L5.5,4.94 L4.48858987,4.94 C4.48858987,4.94 3.3125,5.03898711 3.3125,6.19 L3.3125,10.565 C3.3125,11.7160129 4.48858987,11.815 4.48858987,11.815 L11.4375,11.815 C11.4375,11.815 12.6875,11.7160129 12.6875,10.565 L12.6875,6.19 C12.6875,5.03898711 11.4375,4.94 11.4375,4.94 L10.5,4.94 Z" fill="white" stroke="var(--stroke)" stroke-width="0.625"/>
     147        <path d="M8,10.565 C9.38071187,10.565 10.5,9.44571188 10.5,8.065 C10.5,6.68428812 9.38071187,5.565 8,5.565 C6.61928812,5.565 5.5,6.68428812 5.5,8.065 C5.5,9.44571188 6.61928812,10.565 8,10.565 Z" fill="white" stroke="var(--stroke)" stroke-width="0.625"/>
     148        <path d="M8,9.315 C8.69035594,9.315 9.25,8.75535594 9.25,8.065 C9.25,7.37464406 8.69035594,6.815 8,6.815 C7.30964406,6.815 6.75,7.37464406 6.75,8.065 C6.75,8.75535594 7.30964406,9.315 8,9.315 Z" fill="white" stroke="var(--stroke)" stroke-width="0.625"/>
     149    </symbol>
     150
    134151    <symbol id="barchart" viewBox="0 0 16 16">
    135152        <rect stroke-linejoin="round" fill="white" x="9.5" y="4" width="3" height="8" stroke="var(--stroke)"/>
    … …  
    166183    <g id="RenderingFramesInstrument-light" class="light red"><use href="#circle"/><use href="#barchart"/></g>
    167184    <g id="RenderingFramesInstrument-dark" class="dark red"><use href="#circle"/><use href="#barchart"/></g>
     185    <g id="ScreenshotsInstrument-light" class="light pink"><use href="#circle"/><use href="#screenshot"/></g>
     186    <g id="ScreenshotsInstrument-dark" class="dark pink"><use href="#circle"/><use href="#screenshot"/></g>
    168187    <g id="ScriptsInstrument-light" class="light purple"><use href="#circle"/><use href="#script"/></g>
    169188    <g id="ScriptsInstrument-dark" class="dark purple"><use href="#circle"/><use href="#script"/></g>

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r292781 r294166  
    209209    <link rel="stylesheet" href="Views/ScopeBar.css">
    210210    <link rel="stylesheet" href="Views/ScopeChainDetailsSidebarPanel.css">
     211    <link rel="stylesheet" href="Views/ScreenshotsTimelineOverviewGraph.css">
     212    <link rel="stylesheet" href="Views/ScreenshotsTimelineView.css">
    211213    <link rel="stylesheet" href="Views/ScriptContentView.css">
    212214    <link rel="stylesheet" href="Views/ScriptDetailsTimelineView.css">
    … …  
    492494    <script src="Models/Revision.js"></script>
    493495    <script src="Models/ScopeChainNode.js"></script>
     496    <script src="Models/ScreenshotsInstrument.js"></script>
     497    <script src="Models/ScreenshotsTimelineRecord.js"></script>
    494498    <script src="Models/ScriptInstrument.js"></script>
    495499    <script src="Models/ScriptSyntaxTree.js"></script>
    … …  
    843847    <script src="Views/ScopeBarItem.js"></script>
    844848    <script src="Views/ScopeChainDetailsSidebarPanel.js"></script>
     849    <script src="Views/ScreenshotsTimelineOverviewGraph.js"></script>
     850    <script src="Views/ScreenshotsTimelineView.js"></script>
    845851    <script src="Views/ScriptClusterTimelineView.js"></script>
    846852    <script src="Views/ScriptContentView.js"></script>

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

    r251227 r294166  
    4747        case WI.TimelineRecord.Type.Media:
    4848            return new WI.MediaInstrument;
     49        case WI.TimelineRecord.Type.Screenshots:
     50            return new WI.ScreenshotsInstrument;
    4951        default:
    5052            console.error("Unknown TimelineRecord.Type: " + type);

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

    r251959 r294166  
    6464        case WI.TimelineRecord.Type.Media:
    6565            return WI.MediaTimelineRecord.fromJSON(json);
     66        case WI.TimelineRecord.Type.Screenshots:
     67            return WI.ScreenshotsTimelineRecord.fromJSON(json);
    6668        default:
    6769            console.error("Unknown TimelineRecord.Type: " + json.type, json);
    … …  
    206208    HeapAllocations: "timeline-record-type-heap-allocations",
    207209    Media: "timeline-record-type-media",
     210    Screenshots: "timeline-record-type-screenshots",
    208211};
    209212

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

    r261108 r294166  
    340340            || record.type === WI.TimelineRecord.Type.CPU
    341341            || record.type === WI.TimelineRecord.Type.Memory
    342             || record.type === WI.TimelineRecord.Type.HeapAllocations)
     342            || record.type === WI.TimelineRecord.Type.HeapAllocations
     343            || record.type === WI.TimelineRecord.Type.Screenshots)
    343344            return;
    344345

  • trunk/Source/WebInspectorUI/UserInterface/Test.html

    r292781 r294166  
    215215    <script src="Models/Revision.js"></script>
    216216    <script src="Models/ScopeChainNode.js"></script>
     217    <script src="Models/ScreenshotsInstrument.js"></script>
     218    <script src="Models/ScreenshotsTimelineRecord.js"></script>
    217219    <script src="Models/ScriptInstrument.js"></script>
    218220    <script src="Models/ScriptSyntaxTree.js"></script>

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

    r293409 r294166  
    101101            if (timelineType === WI.TimelineRecord.Type.Media)
    102102                return new WI.MediaTimelineView(representedObject, extraArguments);
     103           
     104            if (timelineType === WI.TimelineRecord.Type.Screenshots)
     105                return new WI.ScreenshotsTimelineView(representedObject, extraArguments);
    103106        }
    104107

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

    r292156 r294166  
    401401        experimentalSettingsView.addSeparator();
    402402
     403        let timelinesGroup = experimentalSettingsView.addGroup(WI.UIString("Timelines:"));
     404        timelinesGroup.addSetting(WI.settings.experimentalShowScreenshotsTimeline, WI.UIString("Show Screenshots"));
     405
    403406        let reloadInspectorButton = document.createElement("button");
    404407        reloadInspectorButton.textContent = WI.UIString("Reload Web Inspector");
    … …  
    416419            }, reloadInspectorContainerElement);
    417420        }
     421
     422        listenForChange(WI.settings.experimentalShowScreenshotsTimeline);
    418423
    419424        if (hasCSSDomain) {

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

    r258039 r294166  
    3636}
    3737
     38.screenshots-icon .icon {
     39    content: url(../Images/IdentifierIcons.svg#ScreenshotsInstrument-light);
     40}
     41
    3842.memory-icon .icon {
    3943    content: url(../Images/IdentifierIcons.svg#MemoryInstrument-light);
    … …  
    155159    }
    156160
     161    .screenshots-icon .icon {
     162        content: url(../Images/IdentifierIcons.svg#ScreenshotsInstrument-dark);
     163    }
     164
    157165    .memory-icon .icon {
    158166        content: url(../Images/IdentifierIcons.svg#MemoryInstrument-dark);

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

    r270134 r294166  
    7676            return new WI.MediaTimelineOverviewGraph(timeline, timelineOverview);
    7777
     78        if (timelineType === WI.TimelineRecord.Type.Screenshots)
     79            return new WI.ScreenshotsTimelineOverviewGraph(timeline, timelineOverview);
     80
    7881        throw new Error("Can't make a graph for an unknown timeline.");
    7982    }

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

    r270134 r294166  
    133133                return WI.UIString("Media & Animations");
    134134            return WI.UIString("Media");
     135        case WI.TimelineRecord.Type.Screenshots:
     136            return WI.UIString("Screenshots");
    135137        default:
    136138            console.error("Unknown Timeline type:", timelineType);
    … …  
    159161        case WI.TimelineRecord.Type.Media:
    160162            return "media-icon";
     163        case WI.TimelineRecord.Type.Screenshots:
     164            return "screenshots-icon";
    161165        default:
    162166            console.error("Unknown Timeline type:", timelineType);
    … …  
    185189        case WI.TimelineRecord.Type.Media:
    186190            return "media";
     191        case WI.TimelineRecord.Type.Screenshots:
     192            return "screenshots";
    187193        default:
    188194            console.error("Unknown Timeline type:", timelineType);
    … …  
    267273        case WI.TimelineRecord.Type.CPU:
    268274        case WI.TimelineRecord.Type.Memory:
     275        case WI.TimelineRecord.Type.Screenshots:
    269276            // Not used. Fall through to error just in case.
    270277
    … …  
    303310        case WI.TimelineRecord.Type.CPU:
    304311        case WI.TimelineRecord.Type.Memory:
     312        case WI.TimelineRecord.Type.Screenshots:
    305313            // Not used. Fall through to error just in case.
    306314        default:
Note: See TracChangeset for help on using the changeset viewer.