Changeset 223322 in webkit

Timestamp:

Oct 14, 2017 12:05:16 PM (7 years ago)

Author:

Matt Baker

Message:

Web Inspector: Canvas tab: recordings should have a unique name
​https://bugs.webkit.org/show_bug.cgi?id=178188
<rdar://problem/34943364>

Reviewed by Devin Rousso.

• Localizations/en.lproj/localizedStrings.js:

New format string "Recording %d".

• UserInterface/Base/FileUtilities.js:

(WI.loadDataFromFile):
Pass chosen filename to callback.

• UserInterface/Controllers/CanvasManager.js:

(WI.CanvasManager.prototype.recordingFinished):
Create a unique name for the recording.

• UserInterface/Models/Recording.js:

(WI.Recording):
(WI.Recording.fromPayload):
(WI.Recording.prototype.get displayName):
(WI.Recording.prototype.createDisplayName):

• UserInterface/Views/RecordingContentView.js:

(WI.RecordingContentView.prototype.get saveData):
Use encodeURI so that special characters can be used in filenames, and
to be consistent with other saveData implementations.

• UserInterface/Views/RecordingNavigationSidebarPanel.js:

(WI.RecordingNavigationSidebarPanel.prototype.set recording):
(WI.RecordingNavigationSidebarPanel.prototype._importNavigationItemClicked):
Drive-by fix: wait until actions are resolved before updating UI.

• UserInterface/Views/RecordingTabContentView.js:

(WI.RecordingTabContentView.prototype._navigationSidebarImport):
Try to use the imported filename as the recording name. If the name
collides with that of another imported recording, append a unique suffix.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (1 diff)
• UserInterface/Base/FileUtilities.js (modified) (1 diff)
• UserInterface/Controllers/CanvasManager.js (modified) (1 diff)
• UserInterface/Models/Recording.js (modified) (5 diffs)
• UserInterface/Views/RecordingContentView.js (modified) (1 diff)
• UserInterface/Views/RecordingNavigationSidebarPanel.js (modified) (3 diffs)
• UserInterface/Views/RecordingTabContentView.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-10-14  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Canvas tab: recordings should have a unique name
+        https://bugs.webkit.org/show_bug.cgi?id=178188
+        <rdar://problem/34943364>
+
+        Reviewed by Devin Rousso.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        New format string "Recording %d".
+
+        * UserInterface/Base/FileUtilities.js:
+        (WI.loadDataFromFile):
+        Pass chosen filename to callback.
+
+        * UserInterface/Controllers/CanvasManager.js:
+        (WI.CanvasManager.prototype.recordingFinished):
+        Create a unique name for the recording.
+
+        * UserInterface/Models/Recording.js:
+        (WI.Recording):
+        (WI.Recording.fromPayload):
+        (WI.Recording.prototype.get displayName):
+        (WI.Recording.prototype.createDisplayName):
+
+        * UserInterface/Views/RecordingContentView.js:
+        (WI.RecordingContentView.prototype.get saveData):
+        Use encodeURI so that special characters can be used in filenames, and
+        to be consistent with other `saveData` implementations.
+
+        * UserInterface/Views/RecordingNavigationSidebarPanel.js:
+        (WI.RecordingNavigationSidebarPanel.prototype.set recording):
+        (WI.RecordingNavigationSidebarPanel.prototype._importNavigationItemClicked):
+        Drive-by fix: wait until actions are resolved before updating UI.
+
+        * UserInterface/Views/RecordingTabContentView.js:
+        (WI.RecordingTabContentView.prototype._navigationSidebarImport):
+        Try to use the imported filename as the recording name. If the name
+        collides with that of another imported recording, append a unique suffix.
+
 2017-10-14  Devin Rousso  <webkit@devinrousso.com>
 

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

@@ -709 +709 @@
 localizedStrings["Recently Closed Tabs"] = "Recently Closed Tabs";
 localizedStrings["Recording"] = "Recording";
+localizedStrings["Recording %d"] = "Recording %d";
 localizedStrings["Recording Timeline Data"] = "Recording Timeline Data";
 localizedStrings["Recording error: %s"] = "Recording error: %s";

trunk/Source/WebInspectorUI/UserInterface/Base/FileUtilities.js

@@ -77 +77 @@
         }
 
+        let file = inputElement.files[0];
         let reader = new FileReader;
         reader.addEventListener("loadend", (event) => {
-            callback(reader.result);
+            callback(reader.result, file.name);
         });
-        reader.readAsText(inputElement.files[0]);
+        reader.readAsText(file);
     });
     inputElement.click();

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

@@ -159 +159 @@
             return;
 
-        let recording = recordingPayload ? WI.Recording.fromPayload(recordingPayload) : null;
-        if (recording)
+        let recording = recordingPayload ? WI.Recording.fromPayload(recordingPayload) : null
+        if (recording) {
             recording.source = canvas;
+            recording.createDisplayName();
+        }
 
         this.dispatchEventToListeners(WI.CanvasManager.Event.RecordingStopped, {canvas, recording});

trunk/Source/WebInspectorUI/UserInterface/Models/Recording.js

@@ -33 +33 @@
         this._frames = frames;
         this._data = data;
+        this._displayName = WI.UIString("Recording");
 
         this._swizzle = [];
@@ -64 +65 @@
     }
 
-    // Static
-
     static fromPayload(payload)
     {
         if (typeof payload !== "object" || payload === null)
-            payload = {};
+            return null;
 
         if (isNaN(payload.version) || payload.version <= 0)
@@ -166 +165 @@
     // Public
 
+    get displayName() { return this._displayName; }
     get type() { return this._type; }
     get initialState() { return this._initialState; }
@@ -175 +175 @@
     get source() { return this._source; }
     set source(source) { this._source = source; }
+
+    createDisplayName(suggestedName)
+    {
+        let recordingNameSet;
+        if (this._source) {
+            recordingNameSet = this._source[WI.Recording.CanvasRecordingNamesSymbol];
+            if (!recordingNameSet)
+                this._source[WI.Recording.CanvasRecordingNamesSymbol] = recordingNameSet = new Set;
+        } else
+            recordingNameSet = WI.Recording._importedRecordingNameSet;
+
+        let name;
+        if (suggestedName) {
+            name = suggestedName;
+            let duplicateNumber = 2;
+            while (recordingNameSet.has(name))
+                name = `${suggestedName} (${duplicateNumber++})`;
+        } else {
+            let recordingNumber = 1;
+            do {
+                name = WI.UIString("Recording %d").format(recordingNumber++);
+            } while (recordingNameSet.has(name));
+        }
+
+        recordingNameSet.add(name);
+        this._displayName = name;
+    }
 
     async swizzle(index, type)
@@ -282 +309 @@
     }
 };
+
+WI.Recording._importedRecordingNameSet = new Set;
+
+WI.Recording.CanvasRecordingNamesSymbol = Symbol("canvas-recording-names");
 
 WI.Recording.Type = {

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

@@ -149 +149 @@
     get saveData()
     {
+        let filename = this.representedObject.displayName;
+        if (!filename.endsWith(".json"))
+            filename += ".json";
+
         return {
-            url: "web-inspector:///Recording.json",
+            url: "web-inspector:///" + encodeURI(filename),
             content: JSON.stringify(this.representedObject.toJSON()),
             forceSaveAs: true,

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

@@ -57 +57 @@
         this._recording = recording;
 
-        if (this._recording) {
-            this._recording.actions.then((actions) => {
-                this.contentTreeOutline.element.dataset.indent = Number.countDigits(actions.length);
-
-                if (actions[0] instanceof WI.RecordingInitialStateAction)
-                    this.contentTreeOutline.appendChild(new WI.RecordingActionTreeElement(actions[0], 0, this._recording.type));
-
-                let cumulativeActionIndex = 1;
-                this._recording.frames.forEach((frame, frameIndex) => {
-                    let folder = new WI.FolderTreeElement(WI.UIString("Frame %d").format((frameIndex + 1).toLocaleString()));
-                    this.contentTreeOutline.appendChild(folder);
-
-                    for (let i = 0; i < frame.actions.length; ++i)
-                        folder.appendChild(new WI.RecordingActionTreeElement(frame.actions[i], cumulativeActionIndex + i, this._recording.type));
-
-                    if (frame.incomplete)
-                        folder.subtitle = WI.UIString("Incomplete");
-
-                    if (this._recording.frames.length === 1)
-                        folder.expand();
-
-                    cumulativeActionIndex += frame.actions.length;
-                });
+        this.updateEmptyContentPlaceholder(WI.UIString("No Recording Data"));
+
+        if (!this._recording) {
+            if (this._exportButton)
+                this._exportButton.disabled = true;
+            return;
+        }
+
+        this._recording.actions.then((actions) => {
+            this.contentTreeOutline.element.dataset.indent = Number.countDigits(actions.length);
+
+            if (actions[0] instanceof WI.RecordingInitialStateAction)
+                this.contentTreeOutline.appendChild(new WI.RecordingActionTreeElement(actions[0], 0, this._recording.type));
+
+            let cumulativeActionIndex = 1;
+            this._recording.frames.forEach((frame, frameIndex) => {
+                let folder = new WI.FolderTreeElement(WI.UIString("Frame %d").format((frameIndex + 1).toLocaleString()));
+                this.contentTreeOutline.appendChild(folder);
+
+                for (let i = 0; i < frame.actions.length; ++i)
+                    folder.appendChild(new WI.RecordingActionTreeElement(frame.actions[i], cumulativeActionIndex + i, this._recording.type));
+
+                if (frame.incomplete)
+                    folder.subtitle = WI.UIString("Incomplete");
+
+                if (this._recording.frames.length === 1)
+                    folder.expand();
+
+                cumulativeActionIndex += frame.actions.length;
             });
-        }
-
-        this.updateEmptyContentPlaceholder(WI.UIString("No Recording Data"));
-
-        if (this._exportButton)
-            this._exportButton.disabled = !this.contentTreeOutline.children.length;
+
+            this._exportButton.disabled = !actions.length;
+        });
     }
 
@@ -175 +178 @@
     _importNavigationItemClicked(event)
     {
-        WI.loadDataFromFile((data) => {
+        WI.loadDataFromFile((data, filename) => {
             if (!data)
                 return;
@@ -187 +190 @@
             }
 
-            this.dispatchEventToListeners(WI.RecordingNavigationSidebarPanel.Event.Import, {payload});
+            this.dispatchEventToListeners(WI.RecordingNavigationSidebarPanel.Event.Import, {payload, filename});
         });
     }

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

@@ -163 +163 @@
     _navigationSidebarImport(event)
     {
-        let recording = WI.Recording.fromPayload(event.data.payload);
+        let {filename, payload} = event.data;
+        let recording = WI.Recording.fromPayload(payload);
         if (!recording) {
             WI.Recording.synthesizeError(WI.UIString("unsupported version."));
             return;
         }
+
+        let extensionStart = filename.lastIndexOf(".");
+        if (extensionStart !== -1)
+            filename = filename.substring(0, extensionStart);
+
+        recording.createDisplayName(filename);
 
         this.showRepresentedObject(recording);