Changeset 219017 in webkit

Timestamp:

Jun 30, 2017, 2:57:09 PM (8 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Add small delay before showing the progress spinner when loading resources
​https://bugs.webkit.org/show_bug.cgi?id=173437

Reviewed by Joseph Pecoraro.

• UserInterface/Views/ResourceContentView.js:

(WebInspector.ResourceContentView):
(WebInspector.ResourceContentView.prototype.removeLoadingIndicator): Added.
(WebInspector.ResourceContentView.prototype._contentError):
(WebInspector.ResourceContentView.prototype._hasContent):
Delay the creation of the spinner for 100ms. If the content is available before then, just
clear the timeout and the spinner will never be created/shown.

We measured an average of 35ms to load and display images with slow cases being around 55ms.
100ms was chosen for the timeout to give some room to allow for abnormally slow loading
while not being too long as to be outright noticable.

• UserInterface/Views/FontResourceContentView.js:

(WebInspector.FontResourceContentView.prototype.contentAvailable):

• UserInterface/Views/ImageResourceContentView.js:

(WebInspector.ImageResourceContentView.prototype.contentAvailable):

• UserInterface/Views/TextResourceContentView.js:

(WebInspector.TextResourceContentView.prototype._contentWillPopulate):
Calls the new protected function removeLoadingIndicator to ensure that the spinner (and any
other element) is removed.

This is necessary because TextResourceContentView effectively has two phases of loading its
content: getting the content and formatting it for display. The first follows the same path
as the other ResourceContentView subclasses, the second waits for the ContentWillPopulate
event on SourceCodeTextEditor before it actually adds the content as a subview. In this
case, the spinner should only be removed right before the content is actually added, not
once it's ready.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/FontResourceContentView.js (modified) (1 diff)
• UserInterface/Views/ImageResourceContentView.js (modified) (1 diff)
• UserInterface/Views/ResourceContentView.js (modified) (4 diffs)
• UserInterface/Views/TextResourceContentView.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-06-30  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Add small delay before showing the progress spinner when loading resources
+        https://bugs.webkit.org/show_bug.cgi?id=173437
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/ResourceContentView.js:
+        (WebInspector.ResourceContentView):
+        (WebInspector.ResourceContentView.prototype.removeLoadingIndicator): Added.
+        (WebInspector.ResourceContentView.prototype._contentError):
+        (WebInspector.ResourceContentView.prototype._hasContent):
+        Delay the creation of the spinner for 100ms.  If the content is available before then, just
+        clear the timeout and the spinner will never be created/shown.
+
+        We measured an average of 35ms to load and display images with slow cases being around 55ms.
+        100ms was chosen for the timeout to give some room to allow for abnormally slow loading
+        while not being too long as to be outright noticable.
+
+        * UserInterface/Views/FontResourceContentView.js:
+        (WebInspector.FontResourceContentView.prototype.contentAvailable):
+        * UserInterface/Views/ImageResourceContentView.js:
+        (WebInspector.ImageResourceContentView.prototype.contentAvailable):
+        * UserInterface/Views/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype._contentWillPopulate):
+        Calls the new protected function removeLoadingIndicator to ensure that the spinner (and any
+        other element) is removed.
+
+        This is necessary because TextResourceContentView effectively has two phases of loading its
+        content: getting the content and formatting it for display.  The first follows the same path
+        as the other ResourceContentView subclasses, the second waits for the ContentWillPopulate
+        event on SourceCodeTextEditor before it actually adds the content as a subview.  In this
+        case, the spinner should only be removed right before the content is actually added, not
+        once it's ready.
+
 2017-06-30  Commit Queue  <commit-queue@webkit.org>
 

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

@@ -73 +73 @@
             this._styleElement.parentNode.removeChild(this._styleElement);
 
-        this.element.removeChildren();
+        this.removeLoadingIndicator();
 
         this._styleElement = document.createElement("style");

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

@@ -54 +54 @@
         }
 
-        this.element.removeChildren();
+        this.removeLoadingIndicator();
 
         this._imageElement = document.createElement("img");

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

@@ -37 +37 @@
         this.element.classList.add(styleClassName, "resource");
 
-        // Append a spinner while waiting for contentAvailable. The subclasses are responsible for removing
-        // the spinner before showing the resource content.
-        var spinner = new WebInspector.IndeterminateProgressSpinner;
-        this.element.appendChild(spinner.element);
+        this._spinnerTimeout = setTimeout(() => {
+            // Append a spinner while waiting for contentAvailable. Subclasses are responsible for
+            // removing the spinner before showing the resource content by calling removeLoadingIndicator.
+            let spinner = new WebInspector.IndeterminateProgressSpinner;
+            this.element.appendChild(spinner.element);
+
+            this._spinnerTimeout = undefined;
+        }, 100);
 
         this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
@@ -98 +102 @@
     }
 
+    // Protected
+
+    removeLoadingIndicator()
+    {
+        if (this._spinnerTimeout) {
+            clearTimeout(this._spinnerTimeout);
+            this._spinnerTimeout = undefined;
+        }
+
+        this.element.removeChildren();
+    }
+
     // Private
 
@@ -118 +134 @@
             return;
 
-        this.element.removeChildren();
+        this.removeLoadingIndicator();
+
         this.element.appendChild(WebInspector.createMessageTextView(error, true));
 
@@ -126 +143 @@
     _hasContent()
     {
-        return !this.element.querySelector(".indeterminate-progress-spinner");
+        return this.element.hasChildNodes() && !this.element.querySelector(".indeterminate-progress-spinner");
     }
 

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

@@ -192 +192 @@
             return;
 
-        this.element.removeChildren();
+        this.removeLoadingIndicator();
+
         this.addSubview(this._textEditor);
     }