Changeset 244560 in webkit


Ignore:
Timestamp:
Apr 23, 2019 1:31:02 PM (5 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Canvas: no obvious way of switching to the overview when viewing an imported recording
​https://bugs.webkit.org/show_bug.cgi?id=197178
<rdar://problem/50106641>

Reviewed by Timothy Hatcher.

Expand the idea of "imported" recordings to include "saved" recordings, ones whose
underlying <canvas> was destroyed.

  • UserInterface/Views/CanvasTabContentView.js:

(WI.CanvasTabContentView):
(WI.CanvasTabContentView.prototype.attached):
(WI.CanvasTabContentView.prototype._removeCanvas):
(WI.CanvasTabContentView.prototype._addRecording):
(WI.CanvasTabContentView.prototype._handleRecordingSavedOrStopped): Added.
(WI.CanvasTabContentView.prototype.initialLayout): Deleted.
(WI.CanvasTabContentView.prototype._recordingImportedOrStopped): Deleted.
Make the "Saved Recordings" folder a child of the "Overview" so that the "Overview" path
component is always visible/clickable.

  • UserInterface/Views/CanvasOverviewContentView.js:

(WI.CanvasOverviewContentView):
(WI.CanvasOverviewContentView.prototype.contentViewAdded):
(WI.CanvasOverviewContentView.prototype.attached):
(WI.CanvasOverviewContentView.prototype.detached):
(WI.CanvasOverviewContentView.prototype._addSavedRecording): Added.
(WI.CanvasOverviewContentView.prototype._handleRecordingSaved): Added.
(WI.CanvasOverviewContentView.prototype._handleSavedRecordingClicked): Added.

  • UserInterface/Views/CanvasOverviewContentView.css:

(.content-view.canvas-overview .content-view.canvas.saved-recordings): Added.
(.content-view.canvas-overview .content-view.canvas.saved-recordings .tree-outline): Added.
(.content-view.canvas-overview .content-view.canvas.saved-recordings .tree-outline > .item.recording > .icon): Added.
Add a card for "Saved Recordings" that mimics the style of regular canvas cards.

  • UserInterface/Controllers/CanvasManager.js:

(WI.CanvasManager):
(WI.CanvasManager.prototype.get savedRecordings): Added.
(WI.CanvasManager.prototype.async processJSON):
(WI.CanvasManager.prototype.disable):
(WI.CanvasManager.prototype._removeCanvas):
(WI.CanvasManager.prototype.get importedRecordings): Deleted.

  • Localizations/en.lproj/localizedStrings.js:
Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r244514 r244560  
     12019-04-23  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Canvas: no obvious way of switching to the overview when viewing an imported recording
     4        https://bugs.webkit.org/show_bug.cgi?id=197178
     5        <rdar://problem/50106641>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        Expand the idea of "imported" recordings to include "saved" recordings, ones whose
     10        underlying <canvas> was destroyed.
     11
     12        * UserInterface/Views/CanvasTabContentView.js:
     13        (WI.CanvasTabContentView):
     14        (WI.CanvasTabContentView.prototype.attached):
     15        (WI.CanvasTabContentView.prototype._removeCanvas):
     16        (WI.CanvasTabContentView.prototype._addRecording):
     17        (WI.CanvasTabContentView.prototype._handleRecordingSavedOrStopped): Added.
     18        (WI.CanvasTabContentView.prototype.initialLayout): Deleted.
     19        (WI.CanvasTabContentView.prototype._recordingImportedOrStopped): Deleted.
     20        Make the "Saved Recordings" folder a child of the "Overview" so that the "Overview" path
     21        component is always visible/clickable.
     22
     23        * UserInterface/Views/CanvasOverviewContentView.js:
     24        (WI.CanvasOverviewContentView):
     25        (WI.CanvasOverviewContentView.prototype.contentViewAdded):
     26        (WI.CanvasOverviewContentView.prototype.attached):
     27        (WI.CanvasOverviewContentView.prototype.detached):
     28        (WI.CanvasOverviewContentView.prototype._addSavedRecording): Added.
     29        (WI.CanvasOverviewContentView.prototype._handleRecordingSaved): Added.
     30        (WI.CanvasOverviewContentView.prototype._handleSavedRecordingClicked): Added.
     31        * UserInterface/Views/CanvasOverviewContentView.css:
     32        (.content-view.canvas-overview .content-view.canvas.saved-recordings): Added.
     33        (.content-view.canvas-overview .content-view.canvas.saved-recordings .tree-outline): Added.
     34        (.content-view.canvas-overview .content-view.canvas.saved-recordings .tree-outline > .item.recording > .icon): Added.
     35        Add a card for "Saved Recordings" that mimics the style of regular canvas cards.
     36
     37        * UserInterface/Controllers/CanvasManager.js:
     38        (WI.CanvasManager):
     39        (WI.CanvasManager.prototype.get savedRecordings): Added.
     40        (WI.CanvasManager.prototype.async processJSON):
     41        (WI.CanvasManager.prototype.disable):
     42        (WI.CanvasManager.prototype._removeCanvas):
     43        (WI.CanvasManager.prototype.get importedRecordings): Deleted.
     44
     45        * Localizations/en.lproj/localizedStrings.js:
     46
    1472019-04-22  Devin Rousso  <drousso@apple.com>
    248

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

    r244411 r244560  
    563563localizedStrings["Imported"] = "Imported";
    564564localizedStrings["Imported - %s"] = "Imported - %s";
    565 localizedStrings["Imported Recordings"] = "Imported Recordings";
    566565localizedStrings["Imported \u2014 %s"] = "Imported \u2014 %s";
    567566localizedStrings["Incomplete"] = "Incomplete";
    … …  
    880879localizedStrings["Save Selected"] = "Save Selected";
    881880localizedStrings["Save configuration"] = "Save configuration";
     881localizedStrings["Saved Recordings"] = "Saved Recordings";
    882882localizedStrings["Saved States"] = "Saved States";
    883883localizedStrings["Scheduling:"] = "Scheduling:";

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

    r244278 r244560  
    3535        this._canvasIdentifierMap = new Map;
    3636        this._shaderProgramIdentifierMap = new Map;
    37         this._importedRecordings = new Set;
     37        this._savedRecordings = new Set;
    3838
    3939        WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
    … …  
    6464    // Public
    6565
    66     get importedRecordings() { return this._importedRecordings; }
     66    get savedRecordings() { return this._savedRecordings; }
    6767
    6868    get canvases()
    … …  
    9797        recording.createDisplayName(filename);
    9898
    99         this._importedRecordings.add(recording);
    100 
    101         this.dispatchEventToListeners(WI.CanvasManager.Event.RecordingImported, {recording, initiatedByUser: true});
     99        this._savedRecordings.add(recording);
     100
     101        this.dispatchEventToListeners(WI.CanvasManager.Event.RecordingSaved, {recording, imported: true, initiatedByUser: true});
    102102    }
    103103
    … …  
    123123        this._canvasIdentifierMap.clear();
    124124        this._shaderProgramIdentifierMap.clear();
    125         this._importedRecordings.clear();
     125        this._savedRecordings.clear();
    126126
    127127        this._enabled = false;
    … …  
    278278            recording.source = null;
    279279            recording.createDisplayName(recording.displayName);
     280            this._savedRecordings.add(recording);
     281            this.dispatchEventToListeners(WI.CanvasManager.Event.RecordingSaved, {recording});
    280282        }
    281283
    … …  
    302304    CanvasAdded: "canvas-manager-canvas-was-added",
    303305    CanvasRemoved: "canvas-manager-canvas-was-removed",
    304     RecordingImported: "canvas-manager-recording-imported",
     306    RecordingSaved: "canvas-manager-recording-saved",
    305307};

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

    r242737 r244560  
    174174}
    175175
     176.content-view.canvas-overview .content-view.canvas.saved-recordings {
     177    height: 340px;
     178}
     179
     180.content-view.canvas-overview .content-view.canvas.saved-recordings .tree-outline {
     181    overflow-y: scroll;
     182}
     183
     184.content-view.canvas-overview .content-view.canvas.saved-recordings .tree-outline > .item.recording > .icon {
     185    content: url(../Images/Recording.svg);
     186}
     187
    176188.navigation-bar > .item.canvas-recording-auto-capture > label {
    177189    display: flex;

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

    r243720 r244560  
    7878        importNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._handleImportButtonNavigationItemClicked, this);
    7979        this._importButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._handleImportButtonNavigationItemClicked, this);
     80
     81        this._savedRecordingsContentView = null;
     82        this._savedRecordingsTreeOutline = null;
    8083    }
    8184
    … …  
    108111        contentView.element.addEventListener("mouseleave", this._contentViewMouseLeave);
    109112
     113        if (this._savedRecordingsContentView) {
     114            // Ensure that the imported recordings are always last.
     115            this.removeSubview(this._savedRecordingsContentView);
     116            this.addSubview(this._savedRecordingsContentView);
     117        }
     118
    110119        this._updateNavigationItems();
    111120    }
    … …  
    126135        WI.settings.canvasRecordingAutoCaptureEnabled.addEventListener(WI.Setting.Event.Changed, this._handleCanvasRecordingAutoCaptureEnabledChanged, this);
    127136        WI.settings.canvasRecordingAutoCaptureFrameCount.addEventListener(WI.Setting.Event.Changed, this._handleCanvasRecordingAutoCaptureFrameCountChanged, this);
     137
     138        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingSaved, this._handleRecordingSaved, this);
     139
     140        if (this._savedRecordingsTreeOutline)
     141            this._savedRecordingsTreeOutline.removeChildren();
     142        for (let recording of WI.canvasManager.savedRecordings)
     143            this._addSavedRecording(recording);
    128144    }
    129145
    130146    detached()
    131147    {
     148        WI.canvasManager.removeEventListener(null, null, this);
     149
    132150        WI.settings.canvasRecordingAutoCaptureFrameCount.removeEventListener(null, null, this);
    133151        WI.settings.canvasRecordingAutoCaptureEnabled.removeEventListener(null, null, this);
    … …  
    262280    }
    263281
     282    _addSavedRecording(recording)
     283    {
     284        console.assert(!recording.source);
     285
     286        if (!this._savedRecordingsContentView) {
     287            this._savedRecordingsContentView = new WI.ContentView;
     288            this._savedRecordingsContentView.element.classList.add("canvas", "saved-recordings");
     289            this.addSubview(this._savedRecordingsContentView);
     290
     291            let header = this._savedRecordingsContentView.element.appendChild(document.createElement("header"));
     292            header.textContent = WI.UIString("Saved Recordings");
     293        }
     294
     295        if (!this._savedRecordingsTreeOutline) {
     296            const selectable = false;
     297            this._savedRecordingsTreeOutline = new WI.TreeOutline(selectable);
     298            this._savedRecordingsTreeOutline.addEventListener(WI.TreeOutline.Event.ElementClicked, this._handleSavedRecordingClicked, this);
     299            this._savedRecordingsContentView.element.appendChild(this._savedRecordingsTreeOutline.element);
     300        }
     301
     302        const subtitle = null;
     303        let recordingTreeElement = new WI.GeneralTreeElement(["recording"], recording.displayName, subtitle, recording);
     304        recordingTreeElement.selectable = false;
     305        this._savedRecordingsTreeOutline.appendChild(recordingTreeElement);
     306    }
     307
    264308    _handleRecordingAutoCaptureInput(event)
    265309    {
    … …  
    293337        WI.FileUtilities.importJSON((result) => WI.canvasManager.processJSON(result));
    294338    }
     339
     340    _handleRecordingSaved(event)
     341    {
     342        this._addSavedRecording(event.data.recording);
     343    }
     344
     345    _handleSavedRecordingClicked(event)
     346    {
     347        WI.showRepresentedObject(event.data.treeElement.representedObject);
     348    }
    295349};

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

    r244278 r244560  
    4545        this._canvasTreeOutline.appendChild(this._overviewTreeElement);
    4646
    47         this._importedRecordingsTreeElement = new WI.FolderTreeElement(WI.UIString("Imported Recordings"), WI.RecordingCollection);
    48         this._importedRecordingsTreeElement.hidden = true;
    49         this._canvasTreeOutline.appendChild(this._importedRecordingsTreeElement);
     47        this._savedRecordingsTreeElement = new WI.FolderTreeElement(WI.UIString("Saved Recordings"), WI.RecordingCollection);
     48        this._savedRecordingsTreeElement.hidden = true;
     49        this._overviewTreeElement.appendChild(this._savedRecordingsTreeElement);
    5050
    5151        this._recordShortcut = new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Space, this._handleSpace.bind(this));
    … …  
    146146    // Protected
    147147
    148     initialLayout()
    149     {
    150         super.initialLayout();
     148    attached()
     149    {
     150        super.attached();
     151
     152        WI.canvasManager.addEventListener(WI.CanvasManager.Event.CanvasAdded, this._handleCanvasAdded, this);
     153        WI.canvasManager.addEventListener(WI.CanvasManager.Event.CanvasRemoved, this._handleCanvasRemoved, this);
     154        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingSaved, this._handleRecordingSavedOrStopped, this);
     155        WI.Canvas.addEventListener(WI.Canvas.Event.RecordingStopped, this._handleRecordingSavedOrStopped, this);
     156
     157        let canvases = WI.canvasManager.canvases;
     158
     159        for (let canvas of this._canvasCollection) {
     160            if (!canvases.includes(canvas))
     161                this._removeCanvas(canvas);
     162        }
     163
     164        for (let canvas of canvases) {
     165            if (!this._canvasCollection.has(canvas))
     166                this._addCanvas(canvas);
     167        }
     168
     169        this._savedRecordingsTreeElement.removeChildren();
     170        for (let recording of WI.canvasManager.savedRecordings)
     171            this._addRecording(recording, {suppressShowRecording: true});
     172    }
     173
     174    detached()
     175    {
     176        WI.Canvas.removeEventListener(null, null, this);
     177        WI.canvasManager.removeEventListener(null, null, this);
     178
     179        super.detached();
     180    }
     181
     182    // Private
     183
     184    _addCanvas(canvas)
     185    {
     186        this._overviewTreeElement.appendChild(new WI.CanvasTreeElement(canvas));
     187        this._canvasCollection.add(canvas);
    151188
    152189        const options = {
    … …  
    154191        };
    155192
    156         for (let recording of WI.canvasManager.importedRecordings)
    157             this._addRecording(recording, options);
    158     }
    159 
    160     attached()
    161     {
    162         super.attached();
    163 
    164         WI.canvasManager.addEventListener(WI.CanvasManager.Event.CanvasAdded, this._handleCanvasAdded, this);
    165         WI.canvasManager.addEventListener(WI.CanvasManager.Event.CanvasRemoved, this._handleCanvasRemoved, this);
    166         WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingImported, this._recordingImportedOrStopped, this);
    167         WI.Canvas.addEventListener(WI.Canvas.Event.RecordingStopped, this._recordingImportedOrStopped, this);
    168 
    169         let canvases = WI.canvasManager.canvases;
    170 
    171         for (let canvas of this._canvasCollection) {
    172             if (!canvases.includes(canvas))
    173                 this._removeCanvas(canvas);
    174         }
    175 
    176         for (let canvas of canvases) {
    177             if (!this._canvasCollection.has(canvas))
    178                 this._addCanvas(canvas);
    179         }
    180     }
    181 
    182     detached()
    183     {
    184         WI.Canvas.removeEventListener(null, null, this);
    185         WI.canvasManager.removeEventListener(null, null, this);
    186 
    187         super.detached();
    188     }
    189 
    190     // Private
    191 
    192     _addCanvas(canvas)
    193     {
    194         this._overviewTreeElement.appendChild(new WI.CanvasTreeElement(canvas));
    195         this._canvasCollection.add(canvas);
    196 
    197         const options = {
    198             suppressShowRecording: true,
    199         };
    200 
    201193        for (let recording of canvas.recordingCollection)
    202194            this._addRecording(recording, options);
    … …  
    213205
    214206        this._canvasCollection.remove(canvas);
    215 
    216         const options = {
    217             suppressShowRecording: true,
    218         };
    219 
    220         for (let recording of canvas.recordingCollection)
    221             this._addRecording(recording, options);
    222207
    223208        let currentContentView = this.contentBrowser.currentContentView;
    … …  
    230215        if (navigationSidebarPanel instanceof WI.CanvasSidebarPanel && navigationSidebarPanel.visible)
    231216            navigationSidebarPanel.updateRepresentedObjects();
     217
     218        this.showDetailsSidebarPanels();
    232219    }
    233220
    … …  
    237224            const subtitle = null;
    238225            let recordingTreeElement = new WI.GeneralTreeElement(["recording"], recording.displayName, subtitle, recording);
    239             this._importedRecordingsTreeElement.hidden = false;
    240             this._importedRecordingsTreeElement.appendChild(recordingTreeElement);
     226            this._savedRecordingsTreeElement.hidden = false;
     227            this._savedRecordingsTreeElement.appendChild(recordingTreeElement);
    241228        }
    242229
    … …  
    270257    }
    271258
    272     _recordingImportedOrStopped(event)
    273     {
    274         let {recording, initiatedByUser} = event.data;
     259    _handleRecordingSavedOrStopped(event)
     260    {
     261        let {recording, initiatedByUser, imported} = event.data;
    275262        if (!recording)
    276263            return;
    … …  
    279266
    280267        // Always show imported recordings.
    281         if (recording.source)
     268        if (recording.source || !imported)
    282269            options.suppressShowRecording = !initiatedByUser || this.contentBrowser.currentRepresentedObjects.some((representedObject) => representedObject instanceof WI.Recording);
    283270
Note: See TracChangeset for help on using the changeset viewer.