Web Inspector: Local Resource Overrides: automatically create an image/font local...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 15 Oct 2019 17:15:40 +0000 (17:15 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 15 Oct 2019 17:15:40 +0000 (17:15 +0000)
https://bugs.webkit.org/show_bug.cgi?id=202957

Reviewed by Joseph Pecoraro.

Since non-text resources aren't editable, some users of local resource overrides kept trying
to drag image/font files over the actual resource content view (not the local override),
which didn't do anything. Rather than having to click "Create Local Override" and then do a
drag/drop, we should support the "shorter" workflow of drag/drop over the actual resource.

* UserInterface/Base/FileUtilities.js:
(WI.FileUtilities.import): Added.
(WI.FileUtilities.importText):
(WI.FileUtilities.importJSON):
(WI.FileUtilities.importData): Added.
(WI.FileUtilities.async readText):
(WI.FileUtilities.async readJSON):
(WI.FileUtilities.async readData): Added.
(WI.FileUtilities.async _read): Added.
Create utility functions for importing non-text content as data.
Drive-by: fix a bug in the `import*` functions where the `callback` would be bound on the
          first call, meaning that since the `<input>` was cached for all calls, we'd only
          ever use the first `callback` in subsequent calls.

* UserInterface/Views/DropZoneView.js:
(WI.DropZoneView):
(WI.DropZoneView.prototype.set text): Added.
Support the text content of the drop zone changing after it's initialized.

* UserInterface/Views/FontResourceContentView.js:
(WI.FontResourceContentView):
(WI.FontResourceContentView.prototype.contentAvailable):
(WI.FontResourceContentView.prototype.dropZoneHandleDragEnter): Added.
(WI.FontResourceContentView.prototype.dropZoneHandleDrop):
(WI.FontResourceContentView.prototype._handleLocalResourceContentDidChange): Added.
* UserInterface/Views/ImageResourceContentView.js:
(WI.ImageResourceContentView):
(WI.ImageResourceContentView.prototype.contentAvailable):
(WI.ImageResourceContentView.prototype.dropZoneHandleDragEnter): Added.
(WI.ImageResourceContentView.prototype.dropZoneHandleDrop):
(WI.ImageResourceContentView.prototype._handleLocalResourceContentDidChange): Added.
Support drag/drop on non-override image/font content views, which will create/update the
local resource override for that resource.

* UserInterface/Views/ResourceContentView.js:
(WI.ResourceContentView):
(WI.ResourceContentView.prototype.get navigationItems):
(WI.ResourceContentView.prototype._handleImportLocalResourceOverride): Added.
When viewing a local resource override, add an "Import" navigation item for non-drag/drop
updating of the contents of the local resource override. This is also exposed for text-based
local resource overrides, since drag/drop inserts the contents of the file (if it's text),
which attempts to determine whether the dropped file is text or data based on the MIME type.

* UserInterface/Views/AuditNavigationSidebarPanel.js:
(WI.AuditNavigationSidebarPanel.prototype._handleImportButtonNavigationItemClicked):
* UserInterface/Views/CanvasOverviewContentView.js:
(WI.CanvasOverviewContentView.prototype._handleImportButtonNavigationItemClicked):
* UserInterface/Views/CanvasSidebarPanel.js:
(WI.CanvasSidebarPanel.prototype._handleImportButtonNavigationItemClicked):
* UserInterface/Views/HeapAllocationsTimelineView.js:
(WI.HeapAllocationsTimelineView.prototype._importButtonNavigationItemClicked):
* UserInterface/Views/NetworkTableContentView.js:
(WI.NetworkTableContentView.prototype._importHAR):
* UserInterface/Views/TimelineRecordingContentView.js:
(WI.TimelineRecordingContentView.prototype._importButtonNavigationItemClicked):
Explicitly allow multiple files to be imported at the same time.

* UserInterface/Base/BlobUtilities.js:
(WI.BlobUtilities.blobForContent):
Drive-by: remove extra `base64Encoded` argument when calling `decodeBase64ToBlob`, which
          caused SVG-based image local resource overrides to show a broken image when
          closing and reopening Web Inspector.

* Localizations/en.lproj/localizedStrings.js:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@251144 268f45cc-cd09-0410-ab3c-d52691b4dbfc

14 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/BlobUtilities.js
Source/WebInspectorUI/UserInterface/Base/FileUtilities.js
Source/WebInspectorUI/UserInterface/Views/AuditNavigationSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js
Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/DropZoneView.js
Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.js
Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineView.js
Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.js
Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
Source/WebInspectorUI/UserInterface/Views/ResourceContentView.js
Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js

index 0552085..9fa2e7a 100644 (file)
@@ -1,3 +1,80 @@
+2019-10-15  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Local Resource Overrides: automatically create an image/font local override when dragging content over a non-overridden resource
+        https://bugs.webkit.org/show_bug.cgi?id=202957
+
+        Reviewed by Joseph Pecoraro.
+
+        Since non-text resources aren't editable, some users of local resource overrides kept trying
+        to drag image/font files over the actual resource content view (not the local override),
+        which didn't do anything. Rather than having to click "Create Local Override" and then do a
+        drag/drop, we should support the "shorter" workflow of drag/drop over the actual resource.
+
+        * UserInterface/Base/FileUtilities.js:
+        (WI.FileUtilities.import): Added.
+        (WI.FileUtilities.importText):
+        (WI.FileUtilities.importJSON):
+        (WI.FileUtilities.importData): Added.
+        (WI.FileUtilities.async readText):
+        (WI.FileUtilities.async readJSON):
+        (WI.FileUtilities.async readData): Added.
+        (WI.FileUtilities.async _read): Added.
+        Create utility functions for importing non-text content as data.
+        Drive-by: fix a bug in the `import*` functions where the `callback` would be bound on the
+                  first call, meaning that since the `<input>` was cached for all calls, we'd only
+                  ever use the first `callback` in subsequent calls.
+
+        * UserInterface/Views/DropZoneView.js:
+        (WI.DropZoneView):
+        (WI.DropZoneView.prototype.set text): Added.
+        Support the text content of the drop zone changing after it's initialized.
+
+        * UserInterface/Views/FontResourceContentView.js:
+        (WI.FontResourceContentView):
+        (WI.FontResourceContentView.prototype.contentAvailable):
+        (WI.FontResourceContentView.prototype.dropZoneHandleDragEnter): Added.
+        (WI.FontResourceContentView.prototype.dropZoneHandleDrop):
+        (WI.FontResourceContentView.prototype._handleLocalResourceContentDidChange): Added.
+        * UserInterface/Views/ImageResourceContentView.js:
+        (WI.ImageResourceContentView):
+        (WI.ImageResourceContentView.prototype.contentAvailable):
+        (WI.ImageResourceContentView.prototype.dropZoneHandleDragEnter): Added.
+        (WI.ImageResourceContentView.prototype.dropZoneHandleDrop):
+        (WI.ImageResourceContentView.prototype._handleLocalResourceContentDidChange): Added.
+        Support drag/drop on non-override image/font content views, which will create/update the
+        local resource override for that resource.
+
+        * UserInterface/Views/ResourceContentView.js:
+        (WI.ResourceContentView):
+        (WI.ResourceContentView.prototype.get navigationItems):
+        (WI.ResourceContentView.prototype._handleImportLocalResourceOverride): Added.
+        When viewing a local resource override, add an "Import" navigation item for non-drag/drop
+        updating of the contents of the local resource override. This is also exposed for text-based
+        local resource overrides, since drag/drop inserts the contents of the file (if it's text),
+        which attempts to determine whether the dropped file is text or data based on the MIME type.
+
+        * UserInterface/Views/AuditNavigationSidebarPanel.js:
+        (WI.AuditNavigationSidebarPanel.prototype._handleImportButtonNavigationItemClicked):
+        * UserInterface/Views/CanvasOverviewContentView.js:
+        (WI.CanvasOverviewContentView.prototype._handleImportButtonNavigationItemClicked):
+        * UserInterface/Views/CanvasSidebarPanel.js:
+        (WI.CanvasSidebarPanel.prototype._handleImportButtonNavigationItemClicked):
+        * UserInterface/Views/HeapAllocationsTimelineView.js:
+        (WI.HeapAllocationsTimelineView.prototype._importButtonNavigationItemClicked):
+        * UserInterface/Views/NetworkTableContentView.js:
+        (WI.NetworkTableContentView.prototype._importHAR):
+        * UserInterface/Views/TimelineRecordingContentView.js:
+        (WI.TimelineRecordingContentView.prototype._importButtonNavigationItemClicked):
+        Explicitly allow multiple files to be imported at the same time.
+
+        * UserInterface/Base/BlobUtilities.js:
+        (WI.BlobUtilities.blobForContent):
+        Drive-by: remove extra `base64Encoded` argument when calling `decodeBase64ToBlob`, which
+                  caused SVG-based image local resource overrides to show a broken image when
+                  closing and reopening Web Inspector.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
 2019-10-14  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: REGRESSION(r250991): Sources: local resource overrides should be enabled when not in tests
index 78a889b..f19f154 100644 (file)
@@ -382,8 +382,6 @@ localizedStrings["Domain"] = "Domain";
 localizedStrings["Done"] = "Done";
 localizedStrings["Download"] = "Download";
 localizedStrings["Download Web Archive"] = "Download Web Archive";
-localizedStrings["Drop Font"] = "Drop Font";
-localizedStrings["Drop Image"] = "Drop Image";
 localizedStrings["Dropped Element"] = "Dropped Element";
 localizedStrings["Dropped Node"] = "Dropped Node";
 localizedStrings["Duplicate Selector"] = "Duplicate Selector";
@@ -1217,6 +1215,9 @@ localizedStrings["Unknown node"] = "Unknown node";
 localizedStrings["Unsupported property name"] = "Unsupported property name";
 localizedStrings["Unsupported property value"] = "Unsupported property value";
 localizedStrings["Untitled"] = "Untitled";
+localizedStrings["Update Font"] = "Update Font";
+localizedStrings["Update Image"] = "Update Image";
+localizedStrings["Update Local Override"] = "Update Local Override";
 localizedStrings["Usage: %s"] = "Usage: %s";
 localizedStrings["Use Default Appearance"] = "Use Default Appearance";
 localizedStrings["Use Mock Capture Devices"] = "Use Mock Capture Devices";
index 08c60b0..da6f055 100644 (file)
@@ -27,7 +27,7 @@ WI.BlobUtilities = class BlobUtilities {
     static blobForContent(content, base64Encoded, mimeType)
     {
         if (base64Encoded)
-            return BlobUtilities.decodeBase64ToBlob(content, base64Encoded, mimeType);
+            return BlobUtilities.decodeBase64ToBlob(content, mimeType);
         return BlobUtilities.textToBlob(content, mimeType);
     }
 
index ff7d8d0..68a0275 100644 (file)
@@ -91,38 +91,105 @@ WI.FileUtilities = class FileUtilities {
         fileReader.readAsDataURL(saveData.content);
     }
 
-    static importText(callback)
+    static import(callback, {multiple} = {})
     {
-        if (!FileUtilities._importTextInputElement) {
-            let inputElement = FileUtilities._importTextInputElement = document.createElement("input");
-            inputElement.type = "file";
-            inputElement.multiple = true;
-            inputElement.addEventListener("change", (event) => {
-                WI.FileUtilities.readText(inputElement.files, callback);
-            });
-        }
+        let inputElement = document.createElement("input");
+        inputElement.type = "file";
+        inputElement.value = null;
+        inputElement.multiple = !!multiple;
+        inputElement.addEventListener("change", (event) => {
+            callback(inputElement.files);
+        });
+
+        inputElement.click();
 
-        FileUtilities._importTextInputElement.value = null;
-        FileUtilities._importTextInputElement.click();
+        // Cache the last used import element so that it doesn't get GCd while the native file
+        // picker is shown, which would prevent the "change" event listener from firing.
+        FileUtilities.importInputElement = inputElement;
     }
 
-    static importJSON(callback)
+    static importText(callback, options = {})
     {
-        if (!FileUtilities._importJSONInputElement) {
-            let inputElement = FileUtilities._importJSONInputElement = document.createElement("input");
-            inputElement.type = "file";
-            inputElement.multiple = true;
-            inputElement.addEventListener("change", (event) => {
-                WI.FileUtilities.readJSON(inputElement.files, callback);
-            });
-        }
+        FileUtilities.import((files) => {
+            FileUtilities.readText(files, callback);
+        }, options);
+    }
 
-        FileUtilities._importJSONInputElement.value = null;
-        FileUtilities._importJSONInputElement.click();
+    static importJSON(callback, options = {})
+    {
+        FileUtilities.import((files) => {
+            FileUtilities.readJSON(files, callback);
+        }, options);
+    }
+
+    static importData(callback, options = {})
+    {
+        FileUtilities.import((files) => {
+            FileUtilities.readData(files, callback);
+        }, options);
     }
 
     static async readText(fileOrList, callback)
     {
+        await FileUtilities._read(fileOrList, async (file, result) => {
+            await new Promise((resolve, reject) => {
+                let reader = new FileReader;
+                reader.addEventListener("loadend", (event) => {
+                    result.text = reader.result;
+                    resolve(event);
+                });
+                reader.addEventListener("error", reject);
+                reader.readAsText(file);
+            });
+        }, callback);
+    }
+
+    static async readJSON(fileOrList, callback)
+    {
+        await WI.FileUtilities.readText(fileOrList, async (result) => {
+            if (result.text && !result.error) {
+                try {
+                    result.json = JSON.parse(result.text);
+                } catch (e) {
+                    result.error = e;
+                }
+            }
+
+            await callback(result);
+        });
+    }
+
+    static async readData(fileOrList, callback)
+    {
+        await FileUtilities._read(fileOrList, async (file, result) => {
+            await new Promise((resolve, reject) => {
+                let reader = new FileReader;
+                reader.addEventListener("loadend", (event) => {
+                    let {mimeType, base64, data} = parseDataURL(reader.result);
+
+                    // In case no mime type was determined, try to derive one from the file extension.
+                    if (!mimeType || mimeType === "text/plain") {
+                        let extension = WI.fileExtensionForFilename(result.filename);
+                        if (extension)
+                            mimeType = WI.mimeTypeForFileExtension(extension);
+                    }
+
+                    result.mimeType = mimeType;
+                    result.base64Encoded = base64;
+                    result.content = data;
+
+                    resolve(event);
+                });
+                reader.addEventListener("error", reject);
+                reader.readAsDataURL(file);
+            });
+        }, callback);
+    }
+
+    // Private
+
+    static async _read(fileOrList, operation, callback)
+    {
         console.assert(fileOrList instanceof File || fileOrList instanceof FileList);
 
         let files = [];
@@ -137,37 +204,12 @@ WI.FileUtilities = class FileUtilities {
             };
 
             try {
-                await new Promise((resolve, reject) => {
-                    let reader = new FileReader;
-                    reader.addEventListener("loadend", (event) => {
-                        result.text = reader.result;
-                        resolve(event);
-                    });
-                    reader.addEventListener("error", reject);
-                    reader.readAsText(file);
-                });
+                await operation(file, result);
             } catch (e) {
                 result.error = e;
             }
 
-            let promise = callback(result);
-            if (promise instanceof Promise)
-                await promise;
+            await callback(result);
         }
     }
-
-    static async readJSON(fileOrList, callback)
-    {
-        return WI.FileUtilities.readText(fileOrList, (result) => {
-            if (result.text && !result.error) {
-                try {
-                    result.json = JSON.parse(result.text);
-                } catch (e) {
-                    result.error = e;
-                }
-            }
-
-            return callback(result);
-        });
-    }
 };
index b5c196d..65c9336 100644 (file)
@@ -315,7 +315,7 @@ WI.AuditNavigationSidebarPanel = class AuditNavigationSidebarPanel extends WI.Na
 
     _handleImportButtonNavigationItemClicked(event)
     {
-        WI.FileUtilities.importJSON((result) => WI.auditManager.processJSON(result));
+        WI.FileUtilities.importJSON((result) => WI.auditManager.processJSON(result), {multiple: true});
     }
 
     _handleEditButtonNavigationItemClicked(event)
index 964cc5f..959aa94 100644 (file)
@@ -336,7 +336,7 @@ WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
 
     _handleImportButtonNavigationItemClicked(event)
     {
-        WI.FileUtilities.importJSON((result) => WI.canvasManager.processJSON(result));
+        WI.FileUtilities.importJSON((result) => WI.canvasManager.processJSON(result), {multiple: true});
     }
 
     _handleRecordingSaved(event)
index 3159f03..c2bbdc0 100644 (file)
@@ -322,7 +322,7 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
 
     _handleImportButtonNavigationItemClicked(event)
     {
-        WI.FileUtilities.importJSON((result) => WI.canvasManager.processJSON(result));
+        WI.FileUtilities.importJSON((result) => WI.canvasManager.processJSON(result), {multiple: true});
     }
 
     _treeSelectionDidChange(event)
index ea35d7d..a772dd7 100644 (file)
@@ -30,7 +30,7 @@
 
 WI.DropZoneView = class DropZoneView extends WI.View
 {
-    constructor(delegate, {text} = {})
+    constructor(delegate)
     {
         console.assert(delegate);
         console.assert(typeof delegate.dropZoneShouldAppearForDragEvent === "function");
@@ -41,9 +41,6 @@ WI.DropZoneView = class DropZoneView extends WI.View
         this._targetElement = null;
         this._activelyHandlingDrag = false;
 
-        if (text)
-            this.element.textContent = text;
-
         this.element.classList.add("drop-zone");
     }
 
@@ -75,6 +72,11 @@ WI.DropZoneView = class DropZoneView extends WI.View
             this._targetElement.addEventListener("dragenter", this._boundHandleDragEnter);
     }
 
+    set text(text)
+    {
+        this.element.textContent = text;
+    }
+
     // Protected
 
     initialLayout()
index 112d98f..8993e5e 100644 (file)
@@ -32,9 +32,6 @@ WI.FontResourceContentView = class FontResourceContentView extends WI.ResourceCo
         this._styleElement = null;
         this._previewElement = null;
         this._previewContainer = null;
-
-        if (this.showingLocalResourceOverride)
-            this._dropZoneView = new WI.DropZoneView(this, {text: WI.UIString("Drop Font")});
     }
 
     // Public
@@ -68,9 +65,13 @@ WI.FontResourceContentView = class FontResourceContentView extends WI.ResourceCo
 
         this._updatePreviewElement();
 
-        if (this._dropZoneView) {
-            this._dropZoneView.targetElement = this._previewContainer;
-            this.addSubview(this._dropZoneView);
+        if (WI.NetworkManager.supportsLocalResourceOverrides()) {
+            let dropZoneView = new WI.DropZoneView(this);
+            dropZoneView.targetElement = this._previewContainer;
+            this.addSubview(dropZoneView);
+
+            if (this.showingLocalResourceOverride)
+                this.resource.addEventListener(WI.SourceCode.Event.ContentDidChange, this._handleLocalResourceContentDidChange, this);
         }
     }
 
@@ -118,38 +119,39 @@ WI.FontResourceContentView = class FontResourceContentView extends WI.ResourceCo
         return event.dataTransfer.types.includes("Files");
     }
 
+    dropZoneHandleDragEnter(dropZone, event)
+    {
+        if (this.showingLocalResourceOverride)
+            dropZone.text = WI.UIString("Update Font");
+        else if (WI.networkManager.localResourceOverrideForURL(this.resource.url))
+            dropZone.text = WI.UIString("Update Local Override");
+        else
+            dropZone.text = WI.UIString("Create Local Override");
+    }
+
     dropZoneHandleDrop(dropZone, event)
     {
         let files = event.dataTransfer.files;
-        let file = files.length === 1 ? files[0] : null;
-        if (!file) {
+        if (files.length !== 1) {
             InspectorFrontendHost.beep();
             return;
         }
 
-        let fileReader = new FileReader;
-        fileReader.addEventListener("loadend", (event) => {
+        WI.FileUtilities.readData(files, async ({dataURL, mimeType, base64Encoded, content}) => {
             let localResourceOverride = WI.networkManager.localResourceOverrideForURL(this.resource.url);
-            if (!localResourceOverride)
-                return;
-
-            let dataURL = fileReader.result;
-            let {base64, data, mimeType} = parseDataURL(dataURL);
-
-            // In case no mime type was determined, try to derive one from the file extension.
-            if (!mimeType || mimeType === "text/plain") {
-                let extension = WI.fileExtensionForFilename(file.name);
-                if (extension)
-                    mimeType = WI.mimeTypeForFileExtension(extension);
+            if (!localResourceOverride && !this.showingLocalResourceOverride) {
+                localResourceOverride = await this.resource.createLocalResourceOverride();
+                WI.networkManager.addLocalResourceOverride(localResourceOverride);
             }
 
+            console.assert(localResourceOverride);
+
             let revision = localResourceOverride.localResource.currentRevision;
-            revision.updateRevisionContent(data, {base64Encoded: base64, mimeType});
+            revision.updateRevisionContent(content, {base64Encoded, mimeType});
 
-            this._fontObjectURL = this.resource.createObjectURL();
-            this._updatePreviewElement();
+            if (!this.showingLocalResourceOverride)
+                WI.showLocalResourceOverride(localResourceOverride);
         });
-        fileReader.readAsDataURL(file);
     }
 
     // Private
@@ -208,6 +210,12 @@ WI.FontResourceContentView = class FontResourceContentView extends WI.ResourceCo
 
         this.sizeToFit();
     }
+
+    _handleLocalResourceContentDidChange(event)
+    {
+        this._fontObjectURL = this.resource.createObjectURL();
+        this._updatePreviewElement();
+    }
 };
 
 WI.FontResourceContentView._uniqueFontIdentifier = 0;
index d1f32dc..ec5145a 100644 (file)
@@ -403,7 +403,7 @@ WI.HeapAllocationsTimelineView = class HeapAllocationsTimelineView extends WI.Ti
                 WI.timelineManager.heapSnapshotAdded(timestamp, snapshot);
                 this.dispatchEventToListeners(WI.TimelineView.Event.NeedsEntireSelectedRange);
             });
-        });
+        }, {multiple: true});
     }
 
     _takeHeapSnapshotClicked()
index 58f499b..a302b17 100644 (file)
@@ -40,9 +40,6 @@ WI.ImageResourceContentView = class ImageResourceContentView extends WI.Resource
         this._showGridButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
         this._showGridButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._showGridButtonClicked, this);
         this._showGridButtonNavigationItem.activated = !!WI.settings.showImageGrid.value;
-
-        if (this.showingLocalResourceOverride)
-            this._dropZoneView = new WI.DropZoneView(this, {text: WI.UIString("Drop Image")});
     }
 
     // Public
@@ -89,9 +86,13 @@ WI.ImageResourceContentView = class ImageResourceContentView extends WI.Resource
             this._draggingInternalImageElement = false;
         });
 
-        if (this._dropZoneView) {
-            this._dropZoneView.targetElement = imageContainer;
-            this.addSubview(this._dropZoneView);
+        if (WI.NetworkManager.supportsLocalResourceOverrides()) {
+            let dropZoneView = new WI.DropZoneView(this);
+            dropZoneView.targetElement = imageContainer;
+            this.addSubview(dropZoneView);
+
+            if (this.showingLocalResourceOverride)
+                this.resource.addEventListener(WI.SourceCode.Event.ContentDidChange, this._handleLocalResourceContentDidChange, this);
         }
     }
 
@@ -132,37 +133,39 @@ WI.ImageResourceContentView = class ImageResourceContentView extends WI.Resource
         return event.dataTransfer.types.includes("Files");
     }
 
+    dropZoneHandleDragEnter(dropZone, event)
+    {
+        if (this.showingLocalResourceOverride)
+            dropZone.text = WI.UIString("Update Image");
+        else if (WI.networkManager.localResourceOverrideForURL(this.resource.url))
+            dropZone.text = WI.UIString("Update Local Override");
+        else
+            dropZone.text = WI.UIString("Create Local Override");
+    }
+
     dropZoneHandleDrop(dropZone, event)
     {
         let files = event.dataTransfer.files;
-        let file = files.length === 1 ? files[0] : null;
-        if (!file) {
+        if (files.length !== 1) {
             InspectorFrontendHost.beep();
             return;
         }
 
-        let fileReader = new FileReader;
-        fileReader.addEventListener("loadend", (event) => {
+        WI.FileUtilities.readData(files, async ({dataURL, mimeType, base64Encoded, content}) => {
             let localResourceOverride = WI.networkManager.localResourceOverrideForURL(this.resource.url);
-            if (!localResourceOverride)
-                return;
-
-            let dataURL = fileReader.result;
-            this._imageElement.src = dataURL;
-
-            let {base64, data, mimeType} = parseDataURL(dataURL);
-
-            // In case no mime type was determined, try to derive one from the file extension.
-            if (!mimeType || mimeType === "text/plain") {
-                let extension = WI.fileExtensionForFilename(file.name);
-                if (extension)
-                    mimeType = WI.mimeTypeForFileExtension(extension);
+            if (!localResourceOverride && !this.showingLocalResourceOverride) {
+                localResourceOverride = await this.resource.createLocalResourceOverride();
+                WI.networkManager.addLocalResourceOverride(localResourceOverride);
             }
 
+            console.assert(localResourceOverride);
+
             let revision = localResourceOverride.localResource.currentRevision;
-            revision.updateRevisionContent(data, {base64Encoded: base64, mimeType});
+            revision.updateRevisionContent(content, {base64Encoded, mimeType});
+
+            if (!this.showingLocalResourceOverride)
+                WI.showLocalResourceOverride(localResourceOverride);
         });
-        fileReader.readAsDataURL(file);
     }
 
     // Private
@@ -183,4 +186,9 @@ WI.ImageResourceContentView = class ImageResourceContentView extends WI.Resource
 
         this._updateImageGrid();
     }
+
+    _handleLocalResourceContentDidChange(event)
+    {
+        this._imageElement.src = this.resource.createObjectURL();
+    }
 };
index 2796713..b8d7a29 100644 (file)
@@ -2150,7 +2150,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
 
     _importHAR()
     {
-        WI.FileUtilities.importJSON((result) => this.processHAR(result));
+        WI.FileUtilities.importJSON((result) => this.processHAR(result), {multiple: true});
     }
 
     _waterfallPopoverContent()
index 82b361b..2e7b2ce 100644 (file)
@@ -66,9 +66,13 @@ WI.ResourceContentView = class ResourceContentView extends WI.ContentView
 
                 this._localResourceOverrideBannerView = new WI.LocalResourceOverrideLabelView(resource);
 
+                this._importLocalResourceOverrideButtonNavigationItem = new WI.ButtonNavigationItem("import-local-resource-override", WI.UIString("Import"), "Images/Import.svg", 15, 15);
+                this._importLocalResourceOverrideButtonNavigationItem.buttonStyle = WI.ButtonNavigationItem.Style.ImageAndText;
+                this._importLocalResourceOverrideButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
+                this._importLocalResourceOverrideButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._handleImportLocalResourceOverride, this);
+
                 this._removeLocalResourceOverrideButtonNavigationItem = new WI.ButtonNavigationItem("remove-local-resource-override", WI.UIString("Remove Local Override"), "Images/NavigationItemTrash.svg", 15, 15);
                 this._removeLocalResourceOverrideButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._handleRemoveLocalResourceOverride, this);
-                this._removeLocalResourceOverrideButtonNavigationItem.enabled = true;
                 this._removeLocalResourceOverrideButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
             } else {
                 this._localResourceOverrideBannerView = new WI.LocalResourceOverrideWarningView(resource);
@@ -93,6 +97,8 @@ WI.ResourceContentView = class ResourceContentView extends WI.ContentView
     {
         let items = [];
 
+        if (this._importLocalResourceOverrideButtonNavigationItem)
+            items.push(this._importLocalResourceOverrideButtonNavigationItem, new WI.DividerNavigationItem);
         if (this._removeLocalResourceOverrideButtonNavigationItem)
             items.push(this._removeLocalResourceOverrideButtonNavigationItem);
         if (this._createLocalResourceOverrideButtonNavigationItem)
@@ -232,6 +238,35 @@ WI.ResourceContentView = class ResourceContentView extends WI.ContentView
         WI.showLocalResourceOverride(localResourceOverride);
     }
 
+    _handleImportLocalResourceOverride(event)
+    {
+        console.assert(this._showingLocalResourceOverride);
+
+        WI.FileUtilities.import(async (fileList) => {
+            console.assert(fileList.length === 1);
+
+            let localResourceOverride = WI.networkManager.localResourceOverrideForURL(this.resource.url);
+            console.assert(localResourceOverride);
+
+            let revision = localResourceOverride.localResource.currentRevision;
+
+            let file = fileList[0];
+            let mimeType = file.type || WI.mimeTypeForFileExtension(WI.fileExtensionForFilename(file.name));
+            if (WI.shouldTreatMIMETypeAsText(mimeType)) {
+                await WI.FileUtilities.readText(file, ({text}) => {
+                    revision.updateRevisionContent(text, {base64Encoded: false, mimeType});
+                });
+            } else {
+                await WI.FileUtilities.readData(file, ({dataURL, mimeType, base64Encoded, content}) => {
+                    revision.updateRevisionContent(content, {base64Encoded, mimeType});
+                });
+            }
+
+            if (!this.showingLocalResourceOverride)
+                WI.showLocalResourceOverride(localResourceOverride);
+        });
+    }
+
     _handleRemoveLocalResourceOverride(event)
     {
         console.assert(this._showingLocalResourceOverride);
index 7c76711..1cecfff 100644 (file)
@@ -621,7 +621,7 @@ WI.TimelineRecordingContentView = class TimelineRecordingContentView extends WI.
 
     _importButtonNavigationItemClicked(event)
     {
-        WI.FileUtilities.importJSON((result) => WI.timelineManager.processJSON(result));
+        WI.FileUtilities.importJSON((result) => WI.timelineManager.processJSON(result), {multiple: true});
     }
 
     _clearTimeline(event)