Attachment 362636 Details for Bug 194721 – Patch

[patch] Patch

bug-194721-20190221131923.patch (text/plain), 85.12 KB, created by Devin Rousso on 2019-02-21 13:19:24 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-02-21 13:19:24 PST

Size: 85.12 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index f312d12b2f35a72cc12b94ff538bb6fdc986e10b..42c5c738e5b6120fd560a8bf97f0cf2b0ac7ec86 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,92 @@
>+2019-02-21  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: make debounce Proxy into its own class
>+        https://bugs.webkit.org/show_bug.cgi?id=194721
>+
>+        Reviewed by Joseph Pecoraro.
>+
>+        The `debounce`/`throttle` functions leveraged a `Proxy` to intercept the function call and
>+        replace it with a "delayed" version. The issue with this is that it set the identifier for
>+        the timer on the function itself, which is shared across all instances of a given class.
>+        When different instances call the same delayed function, they'd clobber eachother's attempts
>+        to delay work.
>+
>+        * UserInterface/Base/Debouncer.js: Added.
>+        (Debouncer):
>+        (Debouncer.prototype.force):
>+        (Debouncer.prototype.delayForTime):
>+        (Debouncer.prototype.delayForFrame):
>+        (Debouncer.prototype.delayForMicrotask):
>+        (Debouncer.prototype.cancel):
>+        (Debouncer.prototype._execute):
>+        * UserInterface/Base/Throttler.js: Added.
>+        (Throttler):
>+        (Throttler.prototype.force):
>+        (Throttler.prototype.fire):
>+        (Throttler.prototype.cancel):
>+        (Throttler.prototype._execute):
>+        * UserInterface/Base/Utilities.js:
>+
>+        * UserInterface/Views/BezierEditor.js:
>+        (WI.BezierEditor):
>+        * UserInterface/Views/ContentBrowser.js:
>+        (WI.ContentBrowser):
>+        (WI.ContentBrowser.prototype._contentViewSelectionPathComponentDidChange):
>+        (WI.ContentBrowser.prototype._contentViewSupplementalRepresentedObjectsDidChange):
>+        (WI.ContentBrowser.prototype._currentContentViewDidChange):
>+        (WI.ContentBrowser.prototype._dispatchCurrentRepresentedObjectsDidChangeEvent): Deleted.
>+        * UserInterface/Views/DOMTreeUpdater.js:
>+        (WI.DOMTreeUpdater):
>+        (WI.DOMTreeUpdater.prototype._nodeAttributeModified):
>+        (WI.DOMTreeUpdater.prototype._nodeInserted):
>+        (WI.DOMTreeUpdater.prototype._nodeRemoved):
>+        * UserInterface/Views/NavigationSidebarPanel.js:
>+        (WI.NavigationSidebarPanel):
>+        (WI.NavigationSidebarPanel.prototype.closed):
>+        (WI.NavigationSidebarPanel.prototype.showEmptyContentPlaceholder):
>+        (WI.NavigationSidebarPanel.prototype.hideEmptyContentPlaceholder):
>+        (WI.NavigationSidebarPanel.prototype.updateFilter):
>+        (WI.NavigationSidebarPanel.prototype.shown):
>+        (WI.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):
>+        (WI.NavigationSidebarPanel.prototype._treeElementAddedOrChanged):
>+        (WI.NavigationSidebarPanel.prototype._treeElementDisclosureDidChange):
>+        * UserInterface/Views/RecordingContentView.js:
>+        (WI.RecordingContentView):
>+        (WI.RecordingContentView.prototype.updateActionIndex):
>+        (WI.RecordingContentView.prototype.hidden):
>+        * UserInterface/Views/ResourceDetailsSidebarPanel.js:
>+        (WI.ResourceDetailsSidebarPanel.prototype._refreshRelatedResourcesSection):
>+        (WI.ResourceDetailsSidebarPanel.prototype._applyResourceEventListeners):
>+        (WI.ResourceDetailsSidebarPanel):
>+        * UserInterface/Views/ShaderProgramContentView.js:
>+        (WI.ShaderProgramContentView):
>+        * UserInterface/Views/SpringEditor.js:
>+        (WI.SpringEditor.prototype._resetPreviewAnimation):
>+        * UserInterface/Views/TreeElement.js:
>+        (WI.TreeElement.prototype.set hidden):
>+        (WI.TreeElement.prototype.didChange):
>+        (WI.TreeElement.prototype._attach):
>+        (WI.TreeElement.prototype._detach):
>+        (WI.TreeElement.prototype.collapse):
>+        (WI.TreeElement.prototype.expand):
>+        (WI.TreeElement.prototype.reveal):
>+        * UserInterface/Views/TreeOutline.js:
>+        (WI.TreeOutline):
>+        (WI.TreeOutline.prototype.registerScrollVirtualizer):
>+        (WI.TreeOutline.prototype.get updateVirtualizedElementsDebouncer): Added.
>+        (WI.TreeOutline.prototype._updateVirtualizedElements): Added.
>+        (WI.TreeOutline.prototype.updateVirtualizedElements.walk): Deleted.
>+        (WI.TreeOutline.prototype.updateVirtualizedElements): Deleted.
>+        * UserInterface/Views/WebSocketContentView.js:
>+        (WI.WebSocketContentView):
>+        (WI.WebSocketContentView.prototype.shown):
>+        (WI.WebSocketContentView.prototype._updateFramesSoon):
>+        (WI.WebSocketContentView.prototype._updateFrames):
>+
>+        * UserInterface/Main.html:
>+        * UserInterface/Test.html:
>+        * .eslintrc:
>+
> 2019-02-21  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: macOS user agent option should be available in device settings menu
>diff --git a/Source/WebInspectorUI/.eslintrc b/Source/WebInspectorUI/.eslintrc
>index a8c04ddc0627ac05842fd2b00d83fd5631bda40a..d20104356d8d3a131618794f34e436ccac16934e 100644
>--- a/Source/WebInspectorUI/.eslintrc
>+++ b/Source/WebInspectorUI/.eslintrc
>@@ -64,6 +64,7 @@
> 
>         // WebInspector
>         "AsyncTestSuite": true,
>+        "Debouncer": true,
>         "Formatter": true,
>         "FormatterContentBuilder": true,
>         "FrontendTestHarness": true,
>@@ -80,6 +81,7 @@
>         "SyncTestSuite": true,
>         "TestHarness": true,
>         "TestSuite": true,
>+        "Throttler": true,
> 
>         // Externals
>         "CodeMirror": true,
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Debouncer.js b/Source/WebInspectorUI/UserInterface/Base/Debouncer.js
>new file mode 100644
>index 0000000000000000000000000000000000000000..fe77b5268a14960a204ae8cf6d54785f35521e9a
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Base/Debouncer.js
>@@ -0,0 +1,134 @@
>+/*
>+ * Copyright (C) 2019 Apple Inc. All rights reserved.
>+ *
>+ * Redistribution and use in source and binary forms, with or without
>+ * modification, are permitted provided that the following conditions
>+ * are met:
>+ * 1. Redistributions of source code must retain the above copyright
>+ *    notice, this list of conditions and the following disclaimer.
>+ * 2. Redistributions in binary form must reproduce the above copyright
>+ *    notice, this list of conditions and the following disclaimer in the
>+ *    documentation and/or other materials provided with the distribution.
>+ *
>+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
>+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
>+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
>+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
>+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
>+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
>+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
>+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
>+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
>+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
>+ * THE POSSIBILITY OF SUCH DAMAGE.
>+ */
>+
>+// Debouncer wraps a function and continues to delay its invocation as long as
>+// clients continue to delay its firing. The most recent delay call overrides
>+// previous calls. Delays may be timeouts, animation frames, or microtasks.
>+//
>+// Example:
>+//
>+//     let debouncer = new Debouncer(() => { this.refresh() });
>+//     element.addEventListener("keydown", (event) => { debouncer.delayForTime(100); });
>+//
>+// Will ensure `refresh` will not happen until no keyevent has happened in 100ms:
>+//
>+//               0ms          100ms         200ms         300ms         400ms
>+//     time:      |-------------|-------------|-------------|-------------|
>+//     delay:     ^     ^ ^        ^      ^        ^    ^   ^
>+//     refreshes:                                                         * (1)
>+//
>+// When the wrapped function is actually called, it will be given the most recent set of arguments.
>+
>+class Debouncer
>+{
>+    constructor(callback)
>+    {
>+        console.assert(typeof callback === "function");
>+
>+        this._callback = callback;
>+        this._lastArguments = [];
>+
>+        this._timeoutIdentifier = undefined;
>+        this._animationFrameIdentifier = undefined;
>+        this._promiseIdentifier = undefined;
>+    }
>+
>+    // Public
>+
>+    force()
>+    {
>+        this._lastArguments = arguments;
>+        this._execute();
>+    }
>+
>+    delayForTime(time, ...args)
>+    {
>+        console.assert(time >= 0);
>+
>+        this.cancel();
>+
>+        this._lastArguments = args;
>+
>+        this._timeoutIdentifier = setTimeout(() => {
>+            this._execute();
>+        }, time);
>+    }
>+
>+    delayForFrame()
>+    {
>+        this.cancel();
>+
>+        this._lastArguments = arguments;
>+
>+        this._animationFrameIdentifier = requestAnimationFrame(() => {
>+            this._execute();
>+        });
>+    }
>+
>+    delayForMicrotask()
>+    {
>+        this.cancel();
>+
>+        this._lastArguments = arguments;
>+
>+        let promiseIdentifier = Symbol("next-microtask");
>+
>+        this._promiseIdentifier = promiseIdentifier;
>+
>+        queueMicrotask(() => {
>+            if (this._promiseIdentifier === promiseIdentifier)
>+                this._execute();
>+        });
>+    }
>+
>+    cancel()
>+    {
>+        this._lastArguments = [];
>+
>+        if (this._timeoutIdentifier) {
>+            clearTimeout(this._timeoutIdentifier);
>+            this._timeoutIdentifier = undefined;
>+        }
>+
>+        if (this._animationFrameIdentifier) {
>+            cancelAnimationFrame(this._animationFrameIdentifier);
>+            this._animationFrameIdentifier = undefined;
>+        }
>+
>+        if (this._promiseIdentifier)
>+            this._promiseIdentifier = undefined;
>+    }
>+
>+    // Private
>+
>+    _execute()
>+    {
>+        let args = this._lastArguments;
>+
>+        this.cancel();
>+
>+        this._callback.apply(undefined, args);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Throttler.js b/Source/WebInspectorUI/UserInterface/Base/Throttler.js
>new file mode 100644
>index 0000000000000000000000000000000000000000..0399bf1428ebc1e88bb1564982a12ce25f3ad84b
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Base/Throttler.js
>@@ -0,0 +1,108 @@
>+/*
>+ * Copyright (C) 2019 Apple Inc. All rights reserved.
>+ *
>+ * Redistribution and use in source and binary forms, with or without
>+ * modification, are permitted provided that the following conditions
>+ * are met:
>+ * 1. Redistributions of source code must retain the above copyright
>+ *    notice, this list of conditions and the following disclaimer.
>+ * 2. Redistributions in binary form must reproduce the above copyright
>+ *    notice, this list of conditions and the following disclaimer in the
>+ *    documentation and/or other materials provided with the distribution.
>+ *
>+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
>+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
>+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
>+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
>+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
>+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
>+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
>+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
>+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
>+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
>+ * THE POSSIBILITY OF SUCH DAMAGE.
>+ */
>+
>+// Throttler wraps a function and ensures it doesn't get called more than once every `delay` ms.
>+// The first fire will always trigger synchronous, and subsequent calls that need to be throttled
>+// will happen later asynchronously.
>+//
>+// Example:
>+//
>+//     let throttler = new Throttler(250, () => { this.refresh() });
>+//     element.addEventListener("keydown", (event) => { throttler.fire(); });
>+//
>+// Will ensure `refresh` happens no more than once every 250ms no matter how often `fire` is called:
>+//
>+//               0ms                        250ms                       500ms
>+//     time:      |---------------------------|---------------------------|
>+//     fire:      ^     ^ ^        ^      ^        ^    ^   ^
>+//     refreshes: * (1)                       * (2)                       * (3)
>+//
>+// When the wrapped function is actually called, it will be given the most recent set of arguments.
>+
>+class Throttler
>+{
>+    constructor(callback, delay)
>+    {
>+        console.assert(typeof callback === "function");
>+        console.assert(delay >= 0);
>+
>+        this._callback = callback;
>+        this._delay = delay;
>+
>+        this._lastArguments = [];
>+
>+        this._timeoutIdentifier = undefined;
>+        this._lastFireTime = -this._delay;
>+    }
>+
>+    // Public
>+
>+    force()
>+    {
>+        this._lastArguments = arguments;
>+        this._execute();
>+    }
>+
>+    fire()
>+    {
>+        this._lastArguments = arguments;
>+
>+        let remaining = this._delay - (Date.now() - this._lastFireTime);
>+        if (remaining <= 0) {
>+            this._execute();
>+            return;
>+        }
>+
>+        if (this._timeoutIdentifier)
>+            return;
>+
>+        this._timeoutIdentifier = setTimeout(() => {
>+            this._execute();
>+        }, remaining);
>+    }
>+
>+    cancel()
>+    {
>+        this._lastArguments = [];
>+
>+        if (this._timeoutIdentifier) {
>+            clearTimeout(this._timeoutIdentifier);
>+            this._timeoutIdentifier = undefined;
>+        }
>+    }
>+
>+    // Private
>+
>+    _execute()
>+    {
>+        this._lastFireTime = Date.now();
>+
>+        let args = this._lastArguments;
>+
>+        this.cancel();
>+
>+        this._callback.apply(undefined, args);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Utilities.js b/Source/WebInspectorUI/UserInterface/Base/Utilities.js
>index 4f28dccdb38d44e8082eaf2aece973c4949f257e..0c97dddef2510b8618e5b79aafd16835382b4c6b 100644
>--- a/Source/WebInspectorUI/UserInterface/Base/Utilities.js
>+++ b/Source/WebInspectorUI/UserInterface/Base/Utilities.js
>@@ -1519,155 +1519,6 @@ Object.defineProperty(Promise, "delay",
>     }
> });
> 
>-(function() {
>-    // The `debounce` function lets you call any function on an object with a delay
>-    // and if the function keeps getting called, the delay gets reset. Since `debounce`
>-    // returns a Proxy, you can cache it and call multiple functions with the same delay.
>-
>-    // Use: object.debounce(200).foo("Argument 1", "Argument 2")
>-    // Note: The last call's arguments get used for the delayed call.
>-
>-    const debounceTimeoutSymbol = Symbol("debounce-timeout");
>-    const debounceSoonProxySymbol = Symbol("debounce-soon-proxy");
>-
>-    Object.defineProperty(Object.prototype, "soon",
>-    {
>-        get()
>-        {
>-            if (!this[debounceSoonProxySymbol])
>-                this[debounceSoonProxySymbol] = this.debounce(0);
>-            return this[debounceSoonProxySymbol];
>-        }
>-    });
>-
>-    Object.defineProperty(Object.prototype, "debounce",
>-    {
>-        value(delay)
>-        {
>-            console.assert(delay >= 0);
>-
>-            return new Proxy(this, {
>-                get(target, property, receiver) {
>-                    return (...args) => {
>-                        let original = target[property];
>-                        console.assert(typeof original === "function");
>-
>-                        if (original[debounceTimeoutSymbol])
>-                            clearTimeout(original[debounceTimeoutSymbol]);
>-
>-                        let performWork = () => {
>-                            original[debounceTimeoutSymbol] = undefined;
>-                            original.apply(target, args);
>-                        };
>-
>-                        original[debounceTimeoutSymbol] = setTimeout(performWork, delay);
>-                    };
>-                }
>-            });
>-        }
>-    });
>-
>-    Object.defineProperty(Function.prototype, "cancelDebounce",
>-    {
>-        value()
>-        {
>-            if (!this[debounceTimeoutSymbol])
>-                return;
>-
>-            clearTimeout(this[debounceTimeoutSymbol]);
>-            this[debounceTimeoutSymbol] = undefined;
>-        }
>-    });
>-
>-    const requestAnimationFrameSymbol = Symbol("peform-on-animation-frame");
>-    const requestAnimationFrameProxySymbol = Symbol("perform-on-animation-frame-proxy");
>-
>-    Object.defineProperty(Object.prototype, "onNextFrame",
>-    {
>-        get()
>-        {
>-            if (!this[requestAnimationFrameProxySymbol]) {
>-                this[requestAnimationFrameProxySymbol] = new Proxy(this, {
>-                    get(target, property, receiver) {
>-                        return (...args) => {
>-                            let original = target[property];
>-                            console.assert(typeof original === "function");
>-
>-                            if (original[requestAnimationFrameSymbol])
>-                                return;
>-
>-                            let performWork = () => {
>-                                original[requestAnimationFrameSymbol] = undefined;
>-                                original.apply(target, args);
>-                            };
>-
>-                            original[requestAnimationFrameSymbol] = requestAnimationFrame(performWork);
>-                        };
>-                    }
>-                });
>-            }
>-
>-            return this[requestAnimationFrameProxySymbol];
>-        }
>-    });
>-
>-    const throttleTimeoutSymbol = Symbol("throttle-timeout");
>-
>-    Object.defineProperty(Object.prototype, "throttle",
>-    {
>-        value(delay)
>-        {
>-            console.assert(delay >= 0);
>-
>-            let lastFireTime = NaN;
>-            let mostRecentArguments = null;
>-
>-            return new Proxy(this, {
>-                get(target, property, receiver) {
>-                    return (...args) => {
>-                        let original = target[property];
>-                        console.assert(typeof original === "function");
>-                        mostRecentArguments = args;
>-
>-                        function performWork() {
>-                            lastFireTime = Date.now();
>-                            original[throttleTimeoutSymbol] = undefined;
>-                            original.apply(target, mostRecentArguments);
>-                        }
>-
>-                        if (isNaN(lastFireTime)) {
>-                            performWork();
>-                            return;
>-                        }
>-
>-                        let remaining = delay - (Date.now() - lastFireTime);
>-                        if (remaining <= 0) {
>-                            original.cancelThrottle();
>-                            performWork();
>-                            return;
>-                        }
>-
>-                        if (!original[throttleTimeoutSymbol])
>-                            original[throttleTimeoutSymbol] = setTimeout(performWork, remaining);
>-                    };
>-                }
>-            });
>-        }
>-    });
>-
>-    Object.defineProperty(Function.prototype, "cancelThrottle",
>-    {
>-        value()
>-        {
>-            if (!this[throttleTimeoutSymbol])
>-                return;
>-
>-            clearTimeout(this[throttleTimeoutSymbol]);
>-            this[throttleTimeoutSymbol] = undefined;
>-        }
>-    });
>-})();
>-
> function appendWebInspectorSourceURL(string)
> {
>     if (string.includes("//# sourceURL"))
>diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
>index ceb24265e9886b643ab66c1490fcdfbe79799b96..34096046f0870de2f756f4561c53ab28580ed6cd 100644
>--- a/Source/WebInspectorUI/UserInterface/Main.html
>+++ b/Source/WebInspectorUI/UserInterface/Main.html
>@@ -275,10 +275,12 @@
> 
>     <script src="Base/WebInspector.js"></script>
>     <script src="Base/Platform.js"></script>
>+    <script src="Base/Debouncer.js"></script>
>     <script src="Base/DebuggableType.js"></script>
>     <script src="Base/LinkedList.js"></script>
>     <script src="Base/ListMultimap.js"></script>
>     <script src="Base/Object.js"></script>
>+    <script src="Base/Throttler.js"></script>
> 
>     <script src="Base/DOMUtilities.js"></script>
>     <script src="Base/EventListener.js"></script>
>diff --git a/Source/WebInspectorUI/UserInterface/Test.html b/Source/WebInspectorUI/UserInterface/Test.html
>index 3c474c54aed0d188ece5654ed661f51dec2b2e18..1b4d6dece552822d9fd97b31aa02409ef1d2faa5 100644
>--- a/Source/WebInspectorUI/UserInterface/Test.html
>+++ b/Source/WebInspectorUI/UserInterface/Test.html
>@@ -37,10 +37,12 @@
> 
>     <script src="Base/WebInspector.js"></script>
>     <script src="Base/Platform.js"></script>
>+    <script src="Base/Debouncer.js"></script>
>     <script src="Base/DebuggableType.js"></script>
>     <script src="Base/LinkedList.js"></script>
>     <script src="Base/ListMultimap.js"></script>
>     <script src="Base/Object.js"></script>
>+    <script src="Base/Throttler.js"></script>
> 
>     <script src="Test/TestHarness.js"></script>
>     <script src="Test/FrontendTestHarness.js"></script>
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js
>index 1322859a60816fbaf200b3113b271c6e849d9828..395a15bdcd597f46486b9934f48fae5291f0b5ec 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js
>@@ -101,7 +101,7 @@ WI.BezierEditor = class BezierEditor extends WI.Object
>             if (!isNaN(max))
>                 this[key].max = max;
> 
>-            this[key].addEventListener("input", this.debounce(250)._handleNumberInputInput);
>+            this[key].addEventListener("input", this._handleNumberInputInput.bind(this));
>             this[key].addEventListener("keydown", this._handleNumberInputKeydown.bind(this));
>         }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js b/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js
>index 35e7b5652e66a05da4b2f7bc7b14983305c4e3ac..7e9a2f91eff48cb0fe4bb61e608a5675bf5f026e 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js
>@@ -91,6 +91,10 @@ WI.ContentBrowser = class ContentBrowser extends WI.View
>         this._delegate = delegate || null;
> 
>         this._currentContentViewNavigationItems = [];
>+
>+        this._dispatchCurrentRepresentedObjectsDidChangeDebouncer = new Debouncer(() => {
>+            this.dispatchEventToListeners(WI.ContentBrowser.Event.CurrentRepresentedObjectsDidChange);
>+        });
>     }
> 
>     // Public
>@@ -469,13 +473,6 @@ WI.ContentBrowser = class ContentBrowser extends WI.View
>         }
>     }
> 
>-    _dispatchCurrentRepresentedObjectsDidChangeEvent()
>-    {
>-        this._dispatchCurrentRepresentedObjectsDidChangeEvent.cancelDebounce();
>-
>-        this.dispatchEventToListeners(WI.ContentBrowser.Event.CurrentRepresentedObjectsDidChange);
>-    }
>-
>     _contentViewSelectionPathComponentDidChange(event)
>     {
>         if (event.target !== this.currentContentView)
>@@ -492,7 +489,7 @@ WI.ContentBrowser = class ContentBrowser extends WI.View
> 
>         this._navigationBar.needsLayout();
> 
>-        this.soon._dispatchCurrentRepresentedObjectsDidChangeEvent();
>+        this._dispatchCurrentRepresentedObjectsDidChangeDebouncer.delayForTime(0);
>     }
> 
>     _contentViewSupplementalRepresentedObjectsDidChange(event)
>@@ -504,7 +501,7 @@ WI.ContentBrowser = class ContentBrowser extends WI.View
>         if (event.target.parentContainer !== this._contentViewContainer)
>             return;
> 
>-        this.soon._dispatchCurrentRepresentedObjectsDidChangeEvent();
>+        this._dispatchCurrentRepresentedObjectsDidChangeDebouncer.delayForTime(0);
>     }
> 
>     _currentContentViewDidChange(event)
>@@ -522,7 +519,7 @@ WI.ContentBrowser = class ContentBrowser extends WI.View
> 
>         this.dispatchEventToListeners(WI.ContentBrowser.Event.CurrentContentViewDidChange);
> 
>-        this._dispatchCurrentRepresentedObjectsDidChangeEvent();
>+        this._dispatchCurrentRepresentedObjectsDidChangeDebouncer.force();
>     }
> 
>     _contentViewNavigationItemsDidChange(event)
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeUpdater.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeUpdater.js
>index a5460266e35d281e368161baee628eff2cf19f15..c2455a663d59420b55e5374a2c5f13ccd0e2a6fe 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeUpdater.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeUpdater.js
>@@ -48,6 +48,10 @@ WI.DOMTreeUpdater = function(treeOutline)
> 
>     // Dummy "attribute" that is used to track textContent changes.
>     this._textContentAttributeSymbol = Symbol("text-content-attribute");
>+
>+    this._updateModifiedNodesDebouncer = new Debouncer(() => {
>+        this._updateModifiedNodes();
>+    });
> };
> 
> WI.DOMTreeUpdater.prototype = {
>@@ -81,21 +85,21 @@ WI.DOMTreeUpdater.prototype = {
>         this._recentlyModifiedNodes.add(node);
> 
>         if (this._treeOutline._visible)
>-            this.onNextFrame._updateModifiedNodes();
>+            this._updateModifiedNodesDebouncer.delayForFrame();
>       },
> 
>     _nodeInserted: function(event)
>     {
>         this._recentlyInsertedNodes.set(event.data.node, {parent: event.data.parent});
>         if (this._treeOutline._visible)
>-            this.onNextFrame._updateModifiedNodes();
>+            this._updateModifiedNodesDebouncer.delayForFrame();
>     },
> 
>     _nodeRemoved: function(event)
>     {
>         this._recentlyDeletedNodes.set(event.data.node, {parent: event.data.parent});
>         if (this._treeOutline._visible)
>-            this.onNextFrame._updateModifiedNodes();
>+            this._updateModifiedNodesDebouncer.delayForFrame();
>     },
> 
>     _childNodeCountUpdated: function(event)
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
>index c53df4ae3a637b445c7ba1c6003094f379f3204c..139e7f62b94b729dff6083fd250f2abc2cd40718 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
>@@ -31,7 +31,14 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
> 
>         this.element.classList.add("navigation");
> 
>-        this.contentView.element.addEventListener("scroll", this.soon._updateContentOverflowShadowVisibility);
>+        this._updateContentOverflowShadowVisibilityDebouncer = new Debouncer(() => {
>+            this._updateContentOverflowShadowVisibility();
>+        });
>+        this._boundUpdateContentOverflowShadowVisibilitySoon = (event) => {
>+            this._updateContentOverflowShadowVisibilityDebouncer.delayForTime(0);
>+        };
>+
>+        this.contentView.element.addEventListener("scroll", this._boundUpdateContentOverflowShadowVisibilitySoon);
> 
>         this._contentTreeOutlineGroup = new WI.TreeOutlineGroup;
>         this._contentTreeOutline = this.createContentTreeOutline();
>@@ -49,8 +56,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>             this._topOverflowShadowElement.classList.add(WI.NavigationSidebarPanel.OverflowShadowElementStyleClassName, "top");
>         }
> 
>-        this._boundUpdateContentOverflowShadowVisibility = this.soon._updateContentOverflowShadowVisibility;
>-        window.addEventListener("resize", this._boundUpdateContentOverflowShadowVisibility);
>+        window.addEventListener("resize", this._boundUpdateContentOverflowShadowVisibilitySoon);
> 
>         this._filtersSetting = new WI.Setting(identifier + "-navigation-sidebar-filters", {});
>         this._filterBar.filters = this._filtersSetting.value;
>@@ -77,7 +83,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
> 
>     closed()
>     {
>-        window.removeEventListener("resize", this._boundUpdateContentOverflowShadowVisibility);
>+        window.removeEventListener("resize", this._boundUpdateContentOverflowShadowVisibilitySoon);
>         WI.Frame.removeEventListener(null, null, this);
>     }
> 
>@@ -273,7 +279,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>         let emptyContentPlaceholderParentElement = treeOutline.element.parentNode;
>         emptyContentPlaceholderParentElement.appendChild(emptyContentPlaceholderElement);
> 
>-        this._updateContentOverflowShadowVisibility();
>+        this._updateContentOverflowShadowVisibilityDebouncer.force();
> 
>         return emptyContentPlaceholderElement;
>     }
>@@ -289,7 +295,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>         emptyContentPlaceholderElement.remove();
>         this._emptyContentPlaceholderElements.delete(treeOutline);
> 
>-        this._updateContentOverflowShadowVisibility();
>+        this._updateContentOverflowShadowVisibilityDebouncer.force();
>     }
> 
>     updateEmptyContentPlaceholder(message, treeOutline)
>@@ -345,7 +351,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>         }
> 
>         this._checkForEmptyFilterResults();
>-        this._updateContentOverflowShadowVisibility();
>+        this._updateContentOverflowShadowVisibilityDebouncer.force();
>     }
> 
>     resetFilter()
>@@ -468,7 +474,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>     {
>         super.shown();
> 
>-        this._updateContentOverflowShadowVisibility();
>+        this._updateContentOverflowShadowVisibilityDebouncer.force();
>     }
> 
>     // Protected
>@@ -503,8 +509,6 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>         if (!this.visible)
>             return;
> 
>-        this._updateContentOverflowShadowVisibility.cancelDebounce();
>-
>         let scrollHeight = this.contentView.element.scrollHeight;
>         let offsetHeight = this.contentView.element.offsetHeight;
> 
>@@ -607,7 +611,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>         this._checkForEmptyFilterResults();
> 
>         if (this.visible)
>-            this.soon._updateContentOverflowShadowVisibility();
>+            this._updateContentOverflowShadowVisibilityDebouncer.delayForTime(0);
> 
>         if (this.selected)
>             this._checkElementsForPendingViewStateCookie([treeElement]);
>@@ -615,7 +619,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
> 
>     _treeElementDisclosureDidChange(event)
>     {
>-        this.soon._updateContentOverflowShadowVisibility();
>+        this._updateContentOverflowShadowVisibilityDebouncer.delayForTime(0);
>     }
> 
>     _checkForStaleResourcesIfNeeded()
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js b/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js
>index e8f7db1397eea530fd9d03582ca7b7e4114dab1a..137c9578f451240274732d18458da536c6fcd85d 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js
>@@ -35,7 +35,12 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
>         this._action = null;
>         this._snapshots = [];
>         this._initialContent = null;
>-        this._throttler = this.throttle(200);
>+        this._generateContentThrottler = new Throttler(() => {
>+            if (this.representedObject.type === WI.Recording.Type.Canvas2D)
>+                this._generateContentCanvas2D(this._index);
>+            else if (this.representedObject.type === WI.Recording.Type.CanvasBitmapRenderer || this.representedObject.type === WI.Recording.Type.CanvasWebGL)
>+                this._generateContentFromSnapshot(this._index);
>+        }, 200);
> 
>         this.element.classList.add("recording", this.representedObject.type);
> 
>@@ -103,10 +108,7 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
> 
>         this._updateSliderValue();
> 
>-        if (this.representedObject.type === WI.Recording.Type.Canvas2D)
>-            this._throttler._generateContentCanvas2D(index);
>-        else if (this.representedObject.type === WI.Recording.Type.CanvasBitmapRenderer || this.representedObject.type === WI.Recording.Type.CanvasWebGL)
>-            this._throttler._generateContentFromSnapshot(index);
>+        this._generateContentThrottler.fire();
> 
>         this._action = this.representedObject.actions[this._index];
> 
>@@ -131,8 +133,7 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
>     {
>         super.hidden();
> 
>-        this._generateContentCanvas2D.cancelThrottle();
>-        this._generateContentFromSnapshot.cancelThrottle();
>+        this._generateContentThrottler.cancel();
>     }
> 
>     // Protected
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js
>index 4cf9b8ac5a99189b15b9e0fedbefb37e19f24cdc..759e5d65874b99cb2e7948799c2db2b5fae929aa 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js
>@@ -263,8 +263,6 @@ WI.ResourceDetailsSidebarPanel = class ResourceDetailsSidebarPanel extends WI.De
> 
>     _refreshRelatedResourcesSection()
>     {
>-        this._refreshRelatedResourcesSection.cancelThrottle();
>-
>         // Hide the section if we don't have anything to show.
>         let groups = this._locationSection.groups;
>         let isSectionVisible = groups.includes(this._relatedResourcesGroup);
>@@ -607,8 +605,11 @@ WI.ResourceDetailsSidebarPanel = class ResourceDetailsSidebarPanel extends WI.De
> 
>     _applyResourceEventListeners()
>     {
>-        if (!this._throttler)
>-            this._throttler = this.throttle(250);
>+        if (!this._refreshRelatedResourcesSectionThrottler) {
>+            this._refreshRelatedResourcesSectionThrottler = new Throttler(() => {
>+                this._refreshRelatedResourcesSection();
>+            }, 250);
>+        }
> 
>         this._resource.addEventListener(WI.Resource.Event.URLDidChange, this._refreshURL, this);
>         this._resource.addEventListener(WI.Resource.Event.MIMETypeDidChange, this._refreshMIMEType, this);
>@@ -620,7 +621,9 @@ WI.ResourceDetailsSidebarPanel = class ResourceDetailsSidebarPanel extends WI.De
>         this._resource.addEventListener(WI.Resource.Event.MetricsDidChange, this._refreshRequestAndResponse, this);
>         this._resource.addEventListener(WI.Resource.Event.SizeDidChange, this._refreshDecodedSize, this);
>         this._resource.addEventListener(WI.Resource.Event.TransferSizeDidChange, this._refreshTransferSize, this);
>-        this._resource.addEventListener(WI.Resource.Event.InitiatedResourcesDidChange, this._throttler._refreshRelatedResourcesSection, this);
>+        this._resource.addEventListener(WI.Resource.Event.InitiatedResourcesDidChange, () => {
>+            this._refreshRelatedResourcesSectionThrottler.fire();
>+        }, this);
> 
>         this._needsToRemoveResourceEventListeners = true;
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.js b/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.js
>index 167969095defb7ee569249f7e7ba5d7450f2f83f..283ec49907717c85ddadbbc0e2a5dcb29aae0532 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.js
>@@ -31,6 +31,10 @@ WI.ShaderProgramContentView = class ShaderProgramContentView extends WI.ContentV
> 
>         super(shaderProgram);
> 
>+        let contentDidChangeDebouncer = new Debouncer((event) => {
>+            this._contentDidChange(event);
>+        });
>+
>         this.element.classList.add("shader-program");
> 
>         let createEditor = (shaderType) => {
>@@ -38,7 +42,9 @@ WI.ShaderProgramContentView = class ShaderProgramContentView extends WI.ContentV
>             textEditor.readOnly = false;
>             textEditor.addEventListener(WI.TextEditor.Event.Focused, this._editorFocused, this);
>             textEditor.addEventListener(WI.TextEditor.Event.NumberOfSearchResultsDidChange, this._numberOfSearchResultsDidChange, this);
>-            textEditor.addEventListener(WI.TextEditor.Event.ContentDidChange, this.debounce(250)._contentDidChange, this);
>+            textEditor.addEventListener(WI.TextEditor.Event.ContentDidChange, (event) => {
>+                contentDidChangeDebouncer.delayForTime(250, event);
>+            }, this);
>             textEditor.element.classList.add("shader");
> 
>             let shaderTypeContainer = textEditor.element.insertAdjacentElement("afterbegin", document.createElement("div"));
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpringEditor.js b/Source/WebInspectorUI/UserInterface/Views/SpringEditor.js
>index 63daf7a52cfd9b672cb692e0b1256b5560241075..d060fd5ed40f102a652f940f88f10beb3ca4e406 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpringEditor.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpringEditor.js
>@@ -29,15 +29,19 @@ WI.SpringEditor = class SpringEditor extends WI.Object
>     {
>         super();
> 
>+        let boundResetPreviewAnimation = (event) => {
>+            this._resetPreviewAnimation(event);
>+        };
>+
>         this._element = document.createElement("div");
>         this._element.classList.add("spring-editor");
> 
>         this._previewContainer = this._element.createChild("div", "spring-preview");
>         this._previewContainer.title = WI.UIString("Restart animation");
>-        this._previewContainer.addEventListener("mousedown", this._resetPreviewAnimation.bind(this));
>+        this._previewContainer.addEventListener("mousedown", boundResetPreviewAnimation);
> 
>         this._previewElement = this._previewContainer.createChild("div");
>-        this._previewElement.addEventListener("transitionend", this.debounce(500)._resetPreviewAnimation);
>+        this._previewElement.addEventListener("transitionend", boundResetPreviewAnimation);
> 
>         this._timingContainer = this._element.createChild("div", "spring-timing");
> 
>@@ -213,7 +217,7 @@ WI.SpringEditor = class SpringEditor extends WI.Object
>         if (!event)
>             this._timingContainer.dataset.duration = "0";
> 
>-        this.debounce(500)._updatePreviewAnimation(event);
>+        this._updatePreviewAnimation(event);
>     }
> 
>     _updatePreviewAnimation(event)
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeElement.js b/Source/WebInspectorUI/UserInterface/Views/TreeElement.js
>index d3b892943527766129b244affb9a969e0026a02a..eff98e8fbee7ffcd638a5b31f2f89dc61bf33a39 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/TreeElement.js
>@@ -165,10 +165,12 @@ WI.TreeElement = class TreeElement extends WI.Object
>             this._childrenListNode.hidden = this._hidden;
> 
>         if (this.treeOutline) {
>-            let focusedTreeElement = null;
>-            if (!this._hidden && this.selected)
>-                focusedTreeElement = this;
>-            this.treeOutline.soon.updateVirtualizedElements(focusedTreeElement);
>+            if (this.treeOutline.virtualized) {
>+                let focusedTreeElement = null;
>+                if (!this._hidden && this.selected)
>+                    focusedTreeElement = this;
>+                this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0, focusedTreeElement);
>+            }
> 
>             this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementVisibilityDidChange, {element: this});
>         }
>@@ -203,7 +205,13 @@ WI.TreeElement = class TreeElement extends WI.Object
>         if (!this.treeOutline)
>             return;
> 
>-        this.onNextFrame._fireDidChange();
>+        if (!this._fireDidChangeDebouncer) {
>+            this._fireDidChangeDebouncer = new Debouncer(() => {
>+                this._fireDidChange();
>+            });
>+        }
>+
>+        this._fireDidChangeDebouncer.delayForFrame();
>     }
> 
>     _setListItemNodeContent()
>@@ -261,8 +269,8 @@ WI.TreeElement = class TreeElement extends WI.Object
>                 this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
>         }
> 
>-        if (this.treeOutline)
>-            this.treeOutline.soon.updateVirtualizedElements();
>+        if (this.treeOutline && this.treeOutline.virtualized)
>+            this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0);
> 
>         if (this.selected)
>             this.select();
>@@ -279,8 +287,8 @@ WI.TreeElement = class TreeElement extends WI.Object
>         if (this._childrenListNode && this._childrenListNode.parentNode)
>             this._childrenListNode.parentNode.removeChild(this._childrenListNode);
> 
>-        if (this.treeOutline)
>-            this.treeOutline.soon.updateVirtualizedElements();
>+        if (this.treeOutline && this.treeOutline.virtualized)
>+            this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0);
>     }
> 
>     static treeElementToggled(event)
>@@ -346,8 +354,8 @@ WI.TreeElement = class TreeElement extends WI.Object
>         if (this.oncollapse)
>             this.oncollapse(this);
> 
>-        if (this.treeOutline) {
>-            this.treeOutline.soon.updateVirtualizedElements(this);
>+        if (this.treeOutline && this.treeOutline.virtualized) {
>+            this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0, this);
> 
>             this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementDisclosureDidChanged, {element: this});
>         }
>@@ -413,8 +421,8 @@ WI.TreeElement = class TreeElement extends WI.Object
>         if (this.onexpand)
>             this.onexpand(this);
> 
>-        if (this.treeOutline) {
>-            this.treeOutline.soon.updateVirtualizedElements(this);
>+        if (this.treeOutline && this.treeOutline.virtualized) {
>+            this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0, this);
> 
>             this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementDisclosureDidChanged, {element: this});
>         }
>@@ -466,8 +474,8 @@ WI.TreeElement = class TreeElement extends WI.Object
> 
>         // This must be called before onreveal, as some subclasses will scrollIntoViewIfNeeded and
>         // we should update the visible elements before attempting to scroll.
>-        if (this.treeOutline)
>-            this.treeOutline.updateVirtualizedElements(this);
>+        if (this.treeOutline && this.treeOutline.virtualized)
>+            this.treeOutline.updateVirtualizedElementsDebouncer.force(this);
> 
>         if (this.onreveal)
>             this.onreveal(this);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
>index 98159e79cc9772e222b0f5d88e12bff165ebac30..50b17fce4e761825f7fbab3e78ad252bc49b18f4 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
>@@ -109,6 +109,7 @@ WI.TreeOutline = class TreeOutline extends WI.Object
>         this._processingSelectionChange = false;
>         this._suppressNextSelectionDidChangeEvent = false;
> 
>+        this._virtualizedDebouncer = null;
>         this._virtualizedVisibleTreeElements = null;
>         this._virtualizedAttachedTreeElements = null;
>         this._virtualizedScrollContainer = null;
>@@ -725,6 +726,11 @@ WI.TreeOutline = class TreeOutline extends WI.Object
>     {
>         console.assert(!isNaN(treeItemHeight));
> 
>+        let boundUpdateVirtualizedElements = (focusedTreeElement) => {
>+            this._updateVirtualizedElements(focusedTreeElement);
>+        };
>+
>+        this._virtualizedDebouncer = new Debouncer(boundUpdateVirtualizedElements);
>         this._virtualizedVisibleTreeElements = new Set;
>         this._virtualizedAttachedTreeElements = new Set;
>         this._virtualizedScrollContainer = scrollContainer;
>@@ -732,104 +738,15 @@ WI.TreeOutline = class TreeOutline extends WI.Object
>         this._virtualizedTopSpacer = document.createElement("div");
>         this._virtualizedBottomSpacer = document.createElement("div");
> 
>-        let throttler = this.throttle(1000 / 16);
>+        let throttler = new Throttler(boundUpdateVirtualizedElements, 1000 / 16);
>         this._virtualizedScrollContainer.addEventListener("scroll", (event) => {
>-            throttler.updateVirtualizedElements();
>+            throttler.fire();
>         });
>     }
> 
>-    updateVirtualizedElements(focusedTreeElement)
>+    get updateVirtualizedElementsDebouncer()
>     {
>-        if (!this.virtualized)
>-            return;
>-
>-        function walk(parent, callback, count = 0) {
>-            let shouldReturn = false;
>-            for (let child of parent.children) {
>-                if (!child.revealed(false))
>-                    continue;
>-
>-                shouldReturn = callback(child, count);
>-                if (shouldReturn)
>-                    break;
>-
>-                ++count;
>-                if (child.expanded) {
>-                    let result = walk(child, callback, count);
>-                    count = result.count;
>-                    if (result.shouldReturn)
>-                        break;
>-                }
>-            }
>-            return {count, shouldReturn};
>-        }
>-
>-        let {numberVisible, extraRows, firstItem, lastItem} = this._calculateVirtualizedValues();
>-
>-        let shouldScroll = false;
>-        if (focusedTreeElement && focusedTreeElement.revealed(false)) {
>-            let index = walk(this, (treeElement) => treeElement === focusedTreeElement).count;
>-            if (index < firstItem) {
>-                firstItem = index - extraRows;
>-                lastItem = index + numberVisible + extraRows;
>-            } else if (index > lastItem) {
>-                firstItem = index - numberVisible - extraRows;
>-                lastItem = index + extraRows;
>-            }
>-
>-            // Only scroll if the `focusedTreeElement` is outside the visible items, not including
>-            // the added buffer `extraRows`.
>-            shouldScroll = (index < firstItem + extraRows) || (index > lastItem - extraRows);
>-        }
>-
>-        console.assert(firstItem < lastItem);
>-
>-        let visibleTreeElements = new Set;
>-        let treeElementsToAttach = new Set;
>-        let treeElementsToDetach = new Set;
>-        let totalItems = walk(this, (treeElement, count) => {
>-            if (count >= firstItem && count <= lastItem) {
>-                treeElementsToAttach.add(treeElement);
>-                if (count >= firstItem + extraRows && count <= lastItem - extraRows)
>-                    visibleTreeElements.add(treeElement);
>-            } else if (treeElement.element.parentNode)
>-                treeElementsToDetach.add(treeElement);
>-
>-            return false;
>-        }).count;
>-
>-        // Redraw if we are about to scroll.
>-        if (!shouldScroll) {
>-            // Redraw if all of the previously centered `WI.TreeElement` are no longer centered.
>-            if (visibleTreeElements.intersects(this._virtualizedVisibleTreeElements)) {
>-                // Redraw if there is a `WI.TreeElement` that should be shown that isn't attached.
>-                if (visibleTreeElements.isSubsetOf(this._virtualizedAttachedTreeElements))
>-                    return;
>-            }
>-        }
>-
>-        this._virtualizedVisibleTreeElements = visibleTreeElements;
>-        this._virtualizedAttachedTreeElements = treeElementsToAttach;
>-
>-        for (let treeElement of treeElementsToDetach)
>-            treeElement.element.remove();
>-
>-        for (let treeElement of treeElementsToAttach) {
>-            treeElement.parent._childrenListNode.appendChild(treeElement.element);
>-            if (treeElement._childrenListNode)
>-                treeElement.parent._childrenListNode.appendChild(treeElement._childrenListNode);
>-        }
>-
>-        this._virtualizedTopSpacer.style.height = (Math.max(firstItem, 0) * this._virtualizedTreeItemHeight) + "px";
>-        if (this.element.previousElementSibling !== this._virtualizedTopSpacer)
>-            this.element.parentNode.insertBefore(this._virtualizedTopSpacer, this.element);
>-
>-        this._virtualizedBottomSpacer.style.height = (Math.max(totalItems - lastItem, 0) * this._virtualizedTreeItemHeight) + "px";
>-        if (this.element.nextElementSibling !== this._virtualizedBottomSpacer)
>-            this.element.parentNode.insertBefore(this._virtualizedBottomSpacer, this.element.nextElementSibling);
>-
>-        if (shouldScroll)
>-            this._virtualizedScrollContainer.scrollTop = (firstItem + extraRows) * this._virtualizedTreeItemHeight;
>+        return this._virtualizedDebouncer;
>     }
> 
>     // SelectionController delegate
>@@ -1056,6 +973,99 @@ WI.TreeOutline = class TreeOutline extends WI.Object
>         };
>     }
> 
>+    _updateVirtualizedElements(focusedTreeElement)
>+    {
>+        console.assert(this.virtualized);
>+
>+        function walk(parent, callback, count = 0) {
>+            let shouldReturn = false;
>+            for (let child of parent.children) {
>+                if (!child.revealed(false))
>+                    continue;
>+
>+                shouldReturn = callback(child, count);
>+                if (shouldReturn)
>+                    break;
>+
>+                ++count;
>+                if (child.expanded) {
>+                    let result = walk(child, callback, count);
>+                    count = result.count;
>+                    if (result.shouldReturn)
>+                        break;
>+                }
>+            }
>+            return {count, shouldReturn};
>+        }
>+
>+        let {numberVisible, extraRows, firstItem, lastItem} = this._calculateVirtualizedValues();
>+
>+        let shouldScroll = false;
>+        if (focusedTreeElement && focusedTreeElement.revealed(false)) {
>+            let index = walk(this, (treeElement) => treeElement === focusedTreeElement).count;
>+            if (index < firstItem) {
>+                firstItem = index - extraRows;
>+                lastItem = index + numberVisible + extraRows;
>+            } else if (index > lastItem) {
>+                firstItem = index - numberVisible - extraRows;
>+                lastItem = index + extraRows;
>+            }
>+
>+            // Only scroll if the `focusedTreeElement` is outside the visible items, not including
>+            // the added buffer `extraRows`.
>+            shouldScroll = (index < firstItem + extraRows) || (index > lastItem - extraRows);
>+        }
>+
>+        console.assert(firstItem < lastItem);
>+
>+        let visibleTreeElements = new Set;
>+        let treeElementsToAttach = new Set;
>+        let treeElementsToDetach = new Set;
>+        let totalItems = walk(this, (treeElement, count) => {
>+            if (count >= firstItem && count <= lastItem) {
>+                treeElementsToAttach.add(treeElement);
>+                if (count >= firstItem + extraRows && count <= lastItem - extraRows)
>+                    visibleTreeElements.add(treeElement);
>+            } else if (treeElement.element.parentNode)
>+                treeElementsToDetach.add(treeElement);
>+
>+            return false;
>+        }).count;
>+
>+        // Redraw if we are about to scroll.
>+        if (!shouldScroll) {
>+            // Redraw if all of the previously centered `WI.TreeElement` are no longer centered.
>+            if (visibleTreeElements.intersects(this._virtualizedVisibleTreeElements)) {
>+                // Redraw if there is a `WI.TreeElement` that should be shown that isn't attached.
>+                if (visibleTreeElements.isSubsetOf(this._virtualizedAttachedTreeElements))
>+                    return;
>+            }
>+        }
>+
>+        this._virtualizedVisibleTreeElements = visibleTreeElements;
>+        this._virtualizedAttachedTreeElements = treeElementsToAttach;
>+
>+        for (let treeElement of treeElementsToDetach)
>+            treeElement.element.remove();
>+
>+        for (let treeElement of treeElementsToAttach) {
>+            treeElement.parent._childrenListNode.appendChild(treeElement.element);
>+            if (treeElement._childrenListNode)
>+                treeElement.parent._childrenListNode.appendChild(treeElement._childrenListNode);
>+        }
>+
>+        this._virtualizedTopSpacer.style.height = (Math.max(firstItem, 0) * this._virtualizedTreeItemHeight) + "px";
>+        if (this.element.previousElementSibling !== this._virtualizedTopSpacer)
>+            this.element.parentNode.insertBefore(this._virtualizedTopSpacer, this.element);
>+
>+        this._virtualizedBottomSpacer.style.height = (Math.max(totalItems - lastItem, 0) * this._virtualizedTreeItemHeight) + "px";
>+        if (this.element.nextElementSibling !== this._virtualizedBottomSpacer)
>+            this.element.parentNode.insertBefore(this._virtualizedBottomSpacer, this.element.nextElementSibling);
>+
>+        if (shouldScroll)
>+            this._virtualizedScrollContainer.scrollTop = (firstItem + extraRows) * this._virtualizedTreeItemHeight;
>+    }
>+
>     _handleContextmenu(event)
>     {
>         let treeElement = this.treeElementFromEvent(event);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.js b/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.js
>index 3bf0d6463c5af77c830c4cac9100b2c1a5cac8a1..e47612397fee4e1cee84eb760ef98f32145903bc 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.js
>@@ -31,6 +31,10 @@ WI.WebSocketContentView = class WebSocketContentView extends WI.ContentView
> 
>         super(resource);
> 
>+        this._updateFramesDebouncer = new Debouncer(() => {
>+            this._updateFrames();
>+        });
>+
>         this._resource = resource;
>         this._framesRendered = 0;
>         this._lastRenderedReadyState = null;
>@@ -81,7 +85,7 @@ WI.WebSocketContentView = class WebSocketContentView extends WI.ContentView
> 
>     shown()
>     {
>-        this._updateFrames();
>+        this._updateFramesDebouncer.force();
>         this._resource.addEventListener(WI.WebSocketResource.Event.FrameAdded, this._updateFramesSoon, this);
>         this._resource.addEventListener(WI.WebSocketResource.Event.ReadyStateChanged, this._updateFramesSoon, this);
>     }
>@@ -96,7 +100,7 @@ WI.WebSocketContentView = class WebSocketContentView extends WI.ContentView
> 
>     _updateFramesSoon()
>     {
>-        this.onNextFrame._updateFrames();
>+        this._updateFramesDebouncer.delayForFrame();
>     }
> 
>     _updateFrames()
>@@ -119,8 +123,15 @@ WI.WebSocketContentView = class WebSocketContentView extends WI.ContentView
>             this._lastRenderedReadyState = this._resource.readyState;
>         }
> 
>-        if (shouldScrollToBottom)
>-            this._dataGrid.onNextFrame.scrollToLastRow();
>+        if (shouldScrollToBottom) {
>+            if (!this._scrollToLastRowDebouncer) {
>+                this._scrollToLastRowDebouncer = new Debouncer(() => {
>+                    this._dataGrid.scrollToLastRow();
>+                });
>+            }
>+
>+            this._scrollToLastRowDebouncer.delayForFrame();
>+        }
>     }
> 
>     _addFrame(data, isOutgoing, opcode, time)
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index f7b08979a665ee549b2d703aaf629fe16b3d2b25..b61fd6998cb5d0ae394d3b913430e462524c2858 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,17 @@
>+2019-02-21  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: make debounce Proxy into its own class
>+        https://bugs.webkit.org/show_bug.cgi?id=194721
>+
>+        Reviewed by Joseph Pecoraro.
>+
>+        * inspector/unit-tests/debouncer.html: Renamed from inspector/unit-tests/debounce.html:.
>+        * inspector/unit-tests/debouncer-expected.txt: Renamed from inspector/unit-tests/debounce-expected.txt.
>+        * inspector/unit-tests/throttler.html: Renamed from inspector/unit-tests/throttle.html:.
>+        * inspector/unit-tests/throttler-expected.txt: Renamed from inspector/unit-tests/throttle-expected.txt.
>+        * platform/gtk/TestExpectations:
>+        * platform/mac/TestExpectations:
>+
> 2019-02-21  Zalan Bujtas  <zalan@apple.com>
> 
>         [LFC][Floats] Add support for placing formatting roots in-between floats.
>diff --git a/LayoutTests/inspector/unit-tests/debounce-expected.txt b/LayoutTests/inspector/unit-tests/debounce-expected.txt
>deleted file mode 100644
>index 60098053236ba7c42a2cd9959170fb53dd81e493..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/unit-tests/debounce-expected.txt
>+++ /dev/null
>@@ -1,30 +0,0 @@
>-Testing debounce proxy support.
>-
>-
>-== Running test suite: Debounce
>--- Running test case: Basic Debounce
>-PASS: Debounced successfully.
>-PASS: Call delayed at least 10ms.
>-PASS: `this` is the right object.
>-PASS: Arguments length is 2.
>-PASS: First argument is 4.
>-PASS: Second argument is 'abc'.
>-
>--- Running test case: Multiple Debounce Delays
>-PASS: Debounced successfully.
>-PASS: Call delayed at least 40ms.
>-PASS: `this` is the right object.
>-PASS: Arguments length is 2.
>-PASS: First argument is 4.
>-PASS: Second argument is 'abc'.
>-
>--- Running test case: Soon Debounce
>-PASS: Debounced successfully.
>-PASS: `this` is the right object.
>-PASS: Arguments length is 2.
>-PASS: First argument is 4.
>-PASS: Second argument is 'abc'.
>-
>--- Running test case: Cancel Debounce
>-PASS: Debounced function canceled.
>-
>diff --git a/LayoutTests/inspector/unit-tests/debounce.html b/LayoutTests/inspector/unit-tests/debounce.html
>deleted file mode 100644
>index a4f00718ebf548d308b877235b727a22061e877a..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/unit-tests/debounce.html
>+++ /dev/null
>@@ -1,143 +0,0 @@
>-<!doctype html>
>-<html>
>-<head>
>-<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
>-<script>
>-function test()
>-{
>-    let suite = InspectorTest.createAsyncSuite("Debounce");
>-
>-    suite.addTestCase({
>-        name: "Basic Debounce",
>-        test(resolve, reject) {
>-            let callCount = 0;
>-            let startTime = performance.now();
>-
>-            let object = {
>-                test(foo, bar) {
>-                    if (++callCount === 1)
>-                        InspectorTest.pass("Debounced successfully.");
>-                    else
>-                        InspectorTest.fail("Debounced function called multiple times.");
>-
>-                    InspectorTest.expectThat(performance.now() - startTime >= 10, "Call delayed at least 10ms.");
>-
>-                    InspectorTest.expectThat(this === object, "`this` is the right object.");
>-                    InspectorTest.expectThat(arguments.length === 2, "Arguments length is 2.");
>-                    InspectorTest.expectThat(foo === 4, "First argument is 4.");
>-                    InspectorTest.expectThat(bar === "abc", "Second argument is 'abc'.");
>-
>-                    resolve();
>-                }
>-            };
>-
>-            let debounceProxy = object.debounce(10);
>-            debounceProxy.test(1, 'xyz');
>-            debounceProxy.test(2, 'fgh');
>-            debounceProxy.test(3, 'ert');
>-            debounceProxy.test(4, 'abc');
>-
>-            if (!callCount)
>-                return;
>-
>-            InspectorTest.fail("Debounced function called immediately.");
>-            resolve();
>-        }
>-    });
>-
>-    suite.addTestCase({
>-        name: "Multiple Debounce Delays",
>-        test(resolve, reject) {
>-            let callCount = 0;
>-            let startTime = performance.now();
>-
>-            let object = {
>-                test(foo, bar) {
>-                    if (++callCount === 1)
>-                        InspectorTest.pass("Debounced successfully.");
>-                    else
>-                        InspectorTest.fail("Debounced function called multiple times.");
>-
>-                    InspectorTest.expectThat(performance.now() - startTime >= 40, "Call delayed at least 40ms.");
>-
>-                    InspectorTest.expectThat(this === object, "`this` is the right object.");
>-                    InspectorTest.expectThat(arguments.length === 2, "Arguments length is 2.");
>-                    InspectorTest.expectThat(foo === 4, "First argument is 4.");
>-                    InspectorTest.expectThat(bar === "abc", "Second argument is 'abc'.");
>-
>-                    resolve();
>-                }
>-            };
>-
>-            object.debounce(10).test(1, 'xyz');
>-            object.debounce(20).test(2, 'fgh');
>-            object.debounce(30).test(3, 'ert');
>-            object.debounce(40).test(4, 'abc');
>-
>-            if (!callCount)
>-                return;
>-
>-            InspectorTest.fail("Debounced function called immediately.");
>-            resolve();
>-        }
>-    });
>-
>-    suite.addTestCase({
>-        name: "Soon Debounce",
>-        test(resolve, reject) {
>-            let callCount = 0;
>-
>-            let object = {
>-                test(foo, bar) {
>-                    if (++callCount === 1)
>-                        InspectorTest.pass("Debounced successfully.");
>-                    else
>-                        InspectorTest.fail("Debounced function called multiple times.");
>-
>-                    InspectorTest.expectThat(this === object, "`this` is the right object.");
>-                    InspectorTest.expectThat(arguments.length === 2, "Arguments length is 2.");
>-                    InspectorTest.expectThat(foo === 4, "First argument is 4.");
>-                    InspectorTest.expectThat(bar === "abc", "Second argument is 'abc'.");
>-
>-                    resolve();
>-                }
>-            };
>-
>-            object.soon.test(1, 'xyz');
>-            object.soon.test(2, 'fgh');
>-            object.soon.test(3, 'ert');
>-            object.soon.test(4, 'abc');
>-
>-            if (!callCount)
>-                return;
>-
>-            InspectorTest.fail("Debounced function called immediately.");
>-            resolve();
>-        }
>-    });
>-
>-    suite.addTestCase({
>-        name: "Cancel Debounce",
>-        test(resolve, reject) {
>-            let object = {
>-                test() {
>-                    InspectorTest.fail("Debounced function call should have been canceled.");
>-                    resolve();
>-                }
>-            };
>-
>-            object.debounce(10).test();
>-            object.test.cancelDebounce();
>-
>-            setTimeout(() => { InspectorTest.pass("Debounced function canceled."); resolve(); }, 20);
>-        }
>-    });
>-
>-    suite.runTestCasesAndFinish();
>-}
>-</script>
>-</head>
>-<body onload="runTest()">
>-    <p>Testing debounce proxy support.</p>
>-</body>
>-</html>
>diff --git a/LayoutTests/inspector/unit-tests/debouncer-expected.txt b/LayoutTests/inspector/unit-tests/debouncer-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..b2b254ee0f2ca7d9a3d41276fa051b7370dc51d9
>--- /dev/null
>+++ b/LayoutTests/inspector/unit-tests/debouncer-expected.txt
>@@ -0,0 +1,50 @@
>+Testing Debouncer functionality.
>+
>+
>+== Running test suite: Debouncer
>+-- Running test case: Debouncer.TimeDelay.Same
>+PASS: Call was delayed.
>+PASS: Arguments length is 2.
>+PASS: First argument is 4.
>+PASS: Second argument is 'abc'.
>+PASS: Debounced function called once.
>+
>+-- Running test case: Debouncer.TimeDelay.Different
>+PASS: Call was delayed.
>+PASS: Arguments length is 2.
>+PASS: First argument is 4.
>+PASS: Second argument is 'abc'.
>+PASS: Debounced function called once.
>+
>+-- Running test case: Debounce.TimeDelay.Zero
>+PASS: Call was delayed.
>+PASS: Arguments length is 2.
>+PASS: First argument is 4.
>+PASS: Second argument is 'abc'.
>+PASS: Debounced function called once.
>+
>+-- Running test case: Debounce.MicrotaskDelay
>+PASS: Call was delayed.
>+PASS: Arguments length is 2.
>+PASS: First argument is 4.
>+PASS: Second argument is 'abc'.
>+PASS: Debounced function called once.
>+
>+-- Running test case: Debounce.DifferentDelays
>+PASS: Call was delayed.
>+PASS: Arguments length is 2.
>+PASS: First argument is 3.
>+PASS: Second argument is 'ert'.
>+PASS: Debounced function called once.
>+
>+-- Running test case: Debounce.Force
>+PASS: Call was not delayed.
>+PASS: Arguments length is 2.
>+PASS: First argument is 2.
>+PASS: Second argument is 'fgh'.
>+PASS: Debounced function called immediately
>+PASS: Debounced function called once.
>+
>+-- Running test case: Debounce.Cancel
>+PASS: Debounced function canceled.
>+
>diff --git a/LayoutTests/inspector/unit-tests/debouncer.html b/LayoutTests/inspector/unit-tests/debouncer.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c83366fd86026013ba5b7f92c9350aa7e4022730
>--- /dev/null
>+++ b/LayoutTests/inspector/unit-tests/debouncer.html
>@@ -0,0 +1,218 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
>+<script>
>+function test()
>+{
>+    let suite = InspectorTest.createAsyncSuite("Debouncer");
>+
>+    suite.addTestCase({
>+        name: "Debouncer.TimeDelay.Same",
>+        test(resolve, reject) {
>+            let callCount = 0;
>+            let startTime = performance.now();
>+
>+            let debouncer = new Debouncer((foo, bar) => {
>+                ++callCount;
>+
>+                InspectorTest.expectGreaterThanOrEqual(performance.now() - startTime, 9, "Call was delayed.");
>+
>+                InspectorTest.expectEqual(arguments.length, 2, "Arguments length is 2.");
>+                InspectorTest.expectEqual(foo, 4, "First argument is 4.");
>+                InspectorTest.expectEqual(bar, "abc", "Second argument is 'abc'.");
>+            });
>+
>+            debouncer.delayForTime(10, 1, 'xyz');
>+            debouncer.delayForTime(10, 2, 'fgh');
>+            debouncer.delayForTime(10, 3, 'ert');
>+            debouncer.delayForTime(10, 4, 'abc');
>+
>+            if (callCount)
>+                InspectorTest.fail("Debounced function called immediately.");
>+
>+            setTimeout(() => {
>+                InspectorTest.expectEqual(callCount, 1, "Debounced function called once.");
>+                resolve();
>+            }, 20);
>+        }
>+    });
>+
>+    suite.addTestCase({
>+        name: "Debouncer.TimeDelay.Different",
>+        test(resolve, reject) {
>+            let callCount = 0;
>+            let startTime = performance.now();
>+
>+            let debouncer = new Debouncer((foo, bar) => {
>+                ++callCount;
>+
>+                InspectorTest.expectGreaterThanOrEqual(performance.now() - startTime, 39, "Call was delayed.");
>+
>+                InspectorTest.expectEqual(arguments.length, 2, "Arguments length is 2.");
>+                InspectorTest.expectEqual(foo, 4, "First argument is 4.");
>+                InspectorTest.expectEqual(bar, "abc", "Second argument is 'abc'.");
>+            });
>+
>+            debouncer.delayForTime(10, 1, 'xyz');
>+            debouncer.delayForTime(20, 2, 'fgh');
>+            debouncer.delayForTime(30, 3, 'ert');
>+            debouncer.delayForTime(40, 4, 'abc');
>+
>+            if (callCount)
>+                InspectorTest.fail("Debounced function called immediately.");
>+
>+            setTimeout(() => {
>+                InspectorTest.expectEqual(callCount, 1, "Debounced function called once.");
>+                resolve();
>+            }, 50);
>+        }
>+    });
>+
>+    suite.addTestCase({
>+        name: "Debounce.TimeDelay.Zero",
>+        test(resolve, reject) {
>+            let callCount = 0;
>+            let startTime = performance.now();
>+
>+            let debouncer = new Debouncer((foo, bar) => {
>+                ++callCount;
>+
>+                InspectorTest.expectGreaterThanOrEqual(performance.now() - startTime, 0, "Call was delayed.");
>+
>+                InspectorTest.expectEqual(arguments.length, 2, "Arguments length is 2.");
>+                InspectorTest.expectEqual(foo, 4, "First argument is 4.");
>+                InspectorTest.expectEqual(bar, "abc", "Second argument is 'abc'.");
>+            });
>+
>+            debouncer.delayForTime(0, 1, 'xyz');
>+            debouncer.delayForTime(0, 2, 'fgh');
>+            debouncer.delayForTime(0, 3, 'ert');
>+            debouncer.delayForTime(0, 4, 'abc');
>+
>+            if (callCount)
>+                InspectorTest.fail("Debounced function called immediately.");
>+
>+            setTimeout(() => {
>+                InspectorTest.expectEqual(callCount, 1, "Debounced function called once.");
>+                resolve();
>+            }, 10);
>+        }
>+    });
>+
>+    suite.addTestCase({
>+        name: "Debounce.MicrotaskDelay",
>+        test(resolve, reject) {
>+            let callCount = 0;
>+            let startTime = performance.now();
>+
>+            let debouncer = new Debouncer((foo, bar) => {
>+                ++callCount;
>+
>+                InspectorTest.expectGreaterThanOrEqual(performance.now() - startTime, 0, "Call was delayed.");
>+
>+                InspectorTest.expectEqual(arguments.length, 2, "Arguments length is 2.");
>+                InspectorTest.expectEqual(foo, 4, "First argument is 4.");
>+                InspectorTest.expectEqual(bar, "abc", "Second argument is 'abc'.");
>+            });
>+
>+            debouncer.delayForMicrotask(1, 'xyz');
>+            debouncer.delayForMicrotask(2, 'fgh');
>+            debouncer.delayForMicrotask(3, 'ert');
>+            debouncer.delayForMicrotask(4, 'abc');
>+
>+            if (callCount)
>+                InspectorTest.fail("Debounced function called immediately.");
>+
>+            setTimeout(() => {
>+                InspectorTest.expectEqual(callCount, 1, "Debounced function called once.");
>+                resolve();
>+            }, 20);
>+        }
>+    });
>+
>+    suite.addTestCase({
>+        name: "Debounce.DifferentDelays",
>+        test(resolve, reject) {
>+            let callCount = 0;
>+            let startTime = performance.now();
>+
>+            let debouncer = new Debouncer((foo, bar) => {
>+                ++callCount;
>+
>+                InspectorTest.expectGreaterThanOrEqual(performance.now() - startTime, 19, "Call was delayed.");
>+
>+                InspectorTest.expectEqual(arguments.length, 2, "Arguments length is 2.");
>+                InspectorTest.expectEqual(foo, 3, "First argument is 3.");
>+                InspectorTest.expectEqual(bar, "ert", "Second argument is 'ert'.");
>+            });
>+
>+            debouncer.delayForMicrotask(1, 'xyz');
>+            debouncer.delayForFrame(2, 'fgh');
>+            debouncer.delayForTime(20, 3, 'ert');
>+
>+            if (callCount)
>+                InspectorTest.fail("Debounced function called immediately.");
>+
>+            setTimeout(() => {
>+                InspectorTest.expectEqual(callCount, 1, "Debounced function called once.");
>+                resolve();
>+            }, 20);
>+        }
>+    });
>+
>+    suite.addTestCase({
>+        name: "Debounce.Force",
>+        test(resolve, reject) {
>+            let callCount = 0;
>+            let startTime = performance.now();
>+
>+            let debouncer = new Debouncer((foo, bar) => {
>+                ++callCount;
>+
>+                InspectorTest.expectLessThanOrEqual(performance.now() - startTime, 1, "Call was not delayed.");
>+
>+                InspectorTest.expectEqual(arguments.length, 2, "Arguments length is 2.");
>+                InspectorTest.expectEqual(foo, 2, "First argument is 2.");
>+                InspectorTest.expectEqual(bar, "fgh", "Second argument is 'fgh'.");
>+            });
>+
>+            debouncer.delayForTime(10, 1, 'xyz');
>+            debouncer.force(2, 'fgh');
>+
>+            InspectorTest.expectEqual(callCount, 1, "Debounced function called immediately");
>+
>+            setTimeout(() => {
>+                InspectorTest.expectEqual(callCount, 1, "Debounced function called once.");
>+                resolve();
>+            }, 20);
>+        }
>+    });
>+
>+    suite.addTestCase({
>+        name: "Debounce.Cancel",
>+        test(resolve, reject) {
>+            let called = false;
>+
>+            let debouncer = new Debouncer(() => {
>+                called = true;
>+            });
>+
>+            debouncer.delayForTime(10);
>+            debouncer.cancel();
>+
>+            setTimeout(() => {
>+                InspectorTest.expectFalse(called, "Debounced function canceled.");
>+                resolve();
>+            }, 20);
>+        }
>+    });
>+
>+    suite.runTestCasesAndFinish();
>+}
>+</script>
>+</head>
>+<body onload="runTest()">
>+    <p>Testing Debouncer functionality.</p>
>+</body>
>+</html>
>diff --git a/LayoutTests/inspector/unit-tests/throttle-expected.txt b/LayoutTests/inspector/unit-tests/throttle-expected.txt
>deleted file mode 100644
>index ba821c9313641fdcabff35bdc0f5f992020b4b85..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/unit-tests/throttle-expected.txt
>+++ /dev/null
>@@ -1,18 +0,0 @@
>-Test throttle proxy support.
>-
>-
>-== Running test suite: Throttle
>--- Running test case: Basic throttle
>-Call throttled function every 1 ms for 110 ms.
>-PASS: All calls delayed at least 50 ms.
>-
>--- Running test case: Throttle proxy uniqueness
>-PASS: Each call to throttle should return a new proxy.
>-
>--- Running test case: Throttled function arguments
>-PASS: Trailing call invoked with most recent arguments.
>-
>--- Running test case: Cancel throttle
>-Canceled throttled function.
>-PASS: Throttled function canceled.
>-
>diff --git a/LayoutTests/inspector/unit-tests/throttle.html b/LayoutTests/inspector/unit-tests/throttle.html
>deleted file mode 100644
>index f8d6d2d82c852d8a53d89e87d3aea6d4f72b71e0..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/unit-tests/throttle.html
>+++ /dev/null
>@@ -1,131 +0,0 @@
>-<!doctype html>
>-<html>
>-<head>
>-<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
>-<script>
>-function test()
>-{
>-    let suite = InspectorTest.createAsyncSuite("Throttle");
>-
>-    suite.addTestCase({
>-        name: "Basic throttle",
>-        test(resolve, reject) {
>-            const delay = 50;
>-            const duration = 110;
>-            const maximumNumberOfCalls = Math.ceil(duration / delay) + 1; // Add one for the leading edge. Math.ceil accounts for the trailing edge.
>-
>-            let lastCallTime = NaN;
>-            let numberOfCalls = 0;
>-
>-            let object = {
>-                test(isTrailing) {
>-                    let now = Date.now();
>-
>-                    if (++numberOfCalls > maximumNumberOfCalls) {
>-                        reject("Throttled function called too many times.");
>-                        return;
>-                    }
>-
>-                    if (!isNaN(lastCallTime)) {
>-                        let actualDelay = now - lastCallTime;
>-                        if (actualDelay < delay) {
>-                            InspectorTest.fail(`Delay should be at least ${delay} ms. Was ${actualDelay} ms.`);
>-                            reject();
>-                            return;
>-                        }
>-                    }
>-
>-                    lastCallTime = now;
>-
>-                    if (isTrailing) {
>-                        InspectorTest.pass(`All calls delayed at least ${delay} ms.`);
>-                        resolve();
>-                    }
>-                }
>-            };
>-
>-            InspectorTest.log(`Call throttled function every 1 ms for ${duration} ms.`);
>-
>-            let throttleProxy = object.throttle(delay);
>-            throttleProxy.test();
>-
>-            for (let i = 1; i <= duration; i++)
>-                setTimeout(() => { throttleProxy.test(i === duration); }, i);
>-        }
>-    });
>-
>-    suite.addTestCase({
>-        name: "Throttle proxy uniqueness",
>-        test(resolve, reject) {
>-            let object = {};
>-            let firstProxy = object.throttle(1);
>-            let secondProxy = object.throttle(1);
>-            InspectorTest.expectNotEqual(firstProxy, secondProxy, "Each call to throttle should return a new proxy.");
>-            resolve();
>-        }
>-    });
>-
>-    suite.addTestCase({
>-        name: "Throttled function arguments",
>-        test(resolve, reject) {
>-            let values = [1, 2, 3];
>-            let isLeadingCall = true;
>-
>-            let object = {
>-                test(value) {
>-                    if (isLeadingCall) {
>-                        isLeadingCall = false;
>-                        return;
>-                    }
>-
>-                    let expected = values.lastValue;
>-                    InspectorTest.expectEqual(value, expected, "Trailing call invoked with most recent arguments.");
>-                    resolve();
>-                }
>-            };
>-
>-            let i = 0;
>-            let throttleProxy = object.throttle(50);
>-            for (let value of values)
>-                setTimeout(() => { throttleProxy.test(value); }, i++);
>-        }
>-    });
>-
>-    suite.addTestCase({
>-        name: "Cancel throttle",
>-        test(resolve, reject) {
>-            let canceled = false;
>-
>-            let object = {
>-                test() {
>-                    if (!canceled)
>-                        return;
>-                    InspectorTest.fail("Called throttled function after cancel.");
>-                    reject();
>-                }
>-            };
>-
>-            let throttleProxy = object.throttle(20);
>-            throttleProxy.test();
>-            throttleProxy.test();
>-
>-            object.test.cancelThrottle();
>-            canceled = true;
>-
>-            InspectorTest.log("Canceled throttled function.");
>-
>-            setTimeout(() => {
>-                InspectorTest.pass("Throttled function canceled.");
>-                resolve();
>-            }, 50);
>-        }
>-    });
>-
>-    suite.runTestCasesAndFinish();
>-}
>-</script>
>-</head>
>-<body onload="runTest()">
>-    <p>Test throttle proxy support.</p>
>-</body>
>-</html>
>diff --git a/LayoutTests/inspector/unit-tests/throttler-expected.txt b/LayoutTests/inspector/unit-tests/throttler-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..348ee76664c5b6741bb0489458de2fe55a1ec91b
>--- /dev/null
>+++ b/LayoutTests/inspector/unit-tests/throttler-expected.txt
>@@ -0,0 +1,26 @@
>+Test Throttler functionality.
>+
>+
>+== Running test suite: Throttler
>+-- Running test case: Throttler.Fire.Basic
>+Call throttled function every 1 ms for 110 ms.
>+PASS: All calls delayed.
>+
>+-- Running test case: Throttler.Fire.LastArguments
>+PASS: Trailing call invoked with most recent arguments.
>+
>+-- Running test case: Throttler.Force
>+PASS: Arguments length is 2.
>+PASS: First argument is 1.
>+PASS: Second argument is 'xyz'.
>+PASS: Arguments length is 2.
>+PASS: First argument is 4.
>+PASS: Second argument is 'abc'.
>+PASS: Throttled function should be called twice.
>+PASS: Throttled function should not be called again after calling force.
>+
>+-- Running test case: Throttler.Cancel
>+Throttled function called.
>+Canceled throttled function.
>+PASS: Throttled function should not be called again after calling cancel.
>+
>diff --git a/LayoutTests/inspector/unit-tests/throttler.html b/LayoutTests/inspector/unit-tests/throttler.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c10a6a2c9b4f43884d8a2ab9ef4f6b88510323d5
>--- /dev/null
>+++ b/LayoutTests/inspector/unit-tests/throttler.html
>@@ -0,0 +1,149 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
>+<script>
>+function test()
>+{
>+    let suite = InspectorTest.createAsyncSuite("Throttler");
>+
>+    suite.addTestCase({
>+        name: "Throttler.Fire.Basic",
>+        test(resolve, reject) {
>+            const delay = 50;
>+            const duration = 110;
>+            const maximumNumberOfCalls = Math.ceil(duration / delay) + 1; // Add one for the leading edge. Math.ceil accounts for the trailing edge.
>+
>+            let lastCallTime = NaN;
>+            let numberOfCalls = 0;
>+
>+            let throttler = new Throttler((isTrailing) => {
>+                let now = Date.now();
>+
>+                if (++numberOfCalls > maximumNumberOfCalls) {
>+                    reject("Throttled function called too many times.");
>+                    return;
>+                }
>+
>+                if (!isNaN(lastCallTime)) {
>+                    let actualDelay = now - lastCallTime;
>+                    if (actualDelay < delay - 1) {
>+                        InspectorTest.fail(`Delay should be at least ${delay} ms. Was ${actualDelay} ms.`);
>+                        reject();
>+                        return;
>+                    }
>+                }
>+
>+                lastCallTime = now;
>+
>+                if (isTrailing) {
>+                    InspectorTest.pass(`All calls delayed.`);
>+                    resolve();
>+                }
>+            }, delay);
>+
>+            InspectorTest.log(`Call throttled function every 1 ms for ${duration} ms.`);
>+
>+            throttler.fire();
>+
>+            for (let i = 1; i <= duration; i++)
>+                setTimeout(() => { throttler.fire(i === duration); }, i);
>+        }
>+    });
>+
>+    suite.addTestCase({
>+        name: "Throttler.Fire.LastArguments",
>+        test(resolve, reject) {
>+            let values = [1, 2, 3];
>+            let isLeadingCall = true;
>+
>+            let throttler = new Throttler((value) => {
>+                if (isLeadingCall) {
>+                    isLeadingCall = false;
>+                    return;
>+                }
>+
>+                InspectorTest.expectEqual(value, values.lastValue, "Trailing call invoked with most recent arguments.");
>+                resolve();
>+            }, 50);
>+
>+            let i = 0;
>+            for (let value of values)
>+                setTimeout(() => { throttler.fire(value); }, i++);
>+        }
>+    });
>+
>+    suite.addTestCase({
>+        name: "Throttler.Force",
>+        test(resolve, reject) {
>+            let callCount = 0;
>+
>+            let throttler = new Throttler((foo, bar) => {
>+                ++callCount;
>+
>+                InspectorTest.expectEqual(arguments.length, 2, "Arguments length is 2.");
>+
>+                if (callCount === 1) {
>+                    InspectorTest.expectEqual(foo, 1, "First argument is 1.");
>+                    InspectorTest.expectEqual(bar, "xyz", "Second argument is 'xyz'.");
>+                } else {
>+                    InspectorTest.expectEqual(foo, 4, "First argument is 4.");
>+                    InspectorTest.expectEqual(bar, "abc", "Second argument is 'abc'.");
>+                }
>+            }, 20);
>+
>+            throttler.fire(1, 'xyz');
>+            throttler.fire(2, 'fgh');
>+            throttler.fire(3, 'ert');
>+
>+            throttler.force(4, 'abc');
>+            InspectorTest.expectEqual(callCount, 2, "Throttled function should be called twice.");
>+
>+            setTimeout(() => {
>+                InspectorTest.expectEqual(callCount, 2, "Throttled function should not be called again after calling force.");
>+                resolve();
>+            }, 50);
>+        }
>+    });
>+
>+    suite.addTestCase({
>+        name: "Throttler.Cancel",
>+        test(resolve, reject) {
>+            let callCount = 0;
>+            let canceled = false;
>+
>+            let throttler = new Throttler(() => {
>+                ++callCount;
>+
>+                InspectorTest.log("Throttled function called.");
>+
>+                if (!canceled)
>+                    return;
>+
>+                InspectorTest.fail("Called throttled function after cancel.");
>+                reject();
>+            }, 20);
>+
>+            throttler.fire();
>+            throttler.fire();
>+
>+            throttler.cancel();
>+            canceled = true;
>+
>+            InspectorTest.log("Canceled throttled function.");
>+
>+            setTimeout(() => {
>+                InspectorTest.expectEqual(callCount, 1, "Throttled function should not be called again after calling cancel.");
>+                resolve();
>+            }, 50);
>+        }
>+    });
>+
>+    suite.runTestCasesAndFinish();
>+}
>+</script>
>+</head>
>+<body onload="runTest()">
>+    <p>Test Throttler functionality.</p>
>+</body>
>+</html>
>diff --git a/LayoutTests/platform/gtk/TestExpectations b/LayoutTests/platform/gtk/TestExpectations
>index 19f60d96f7ad28ee1b798316e87d0360ef425ccf..658b1979b10ecf754e2a1c1996e7745b03ffc464 100644
>--- a/LayoutTests/platform/gtk/TestExpectations
>+++ b/LayoutTests/platform/gtk/TestExpectations
>@@ -1943,7 +1943,7 @@ webkit.org/b/183188 imported/blink/svg/as-image/image-change-with-equal-sizes.ht
> 
> webkit.org/b/183608 imported/w3c/web-platform-tests/WebCryptoAPI/wrapKey_unwrapKey/test_wrapKey_unwrapKey.https.html [ Failure Pass ]
> 
>-webkit.org/b/183609 inspector/unit-tests/throttle.html [ Pass Failure ]
>+webkit.org/b/183609 inspector/unit-tests/throttler.html [ Pass Failure ]
> 
> webkit.org/b/183214 compositing/video/poster.html [ Pass ImageOnlyFailure ]
> 
>@@ -2031,7 +2031,7 @@ webkit.org/b/187587 imported/w3c/web-platform-tests/fetch/cross-origin-resource-
> 
> webkit.org/b/187588 fast/forms/form-control-element-crash.html [ Timeout Pass ]
> 
>-webkit.org/b/187589 inspector/unit-tests/debounce.html [ Timeout Pass ]
>+webkit.org/b/187589 inspector/unit-tests/debouncer.html [ Timeout Pass ]
> 
> webkit.org/b/187590 imported/w3c/web-platform-tests/web-animations/timing-model/timelines/document-timelines.html [ Failure Pass ]
> 
>diff --git a/LayoutTests/platform/mac/TestExpectations b/LayoutTests/platform/mac/TestExpectations
>index c3a9484f49f169f56ea8390de2fe33e6edeac7c6..d74eed6cd728a69722c744000dba1f72afede1c1 100644
>--- a/LayoutTests/platform/mac/TestExpectations
>+++ b/LayoutTests/platform/mac/TestExpectations
>@@ -1077,10 +1077,10 @@ webkit.org/b/168146 [ Debug ] inspector/protocol/inspector-backend-invocation-re
> webkit.org/b/148636 inspector/model/remote-object-weak-collection.html [ Pass Timeout Failure ]
> webkit.org/b/153108 [ Debug ] inspector/model/scope-chain-node.html [ Pass Timeout ]
> webkit.org/b/164278 inspector/storage/domStorage-events.html [ Pass Failure ]
>-webkit.org/b/184057 inspector/unit-tests/debounce.html [ Pass Failure ]
>+webkit.org/b/184057 inspector/unit-tests/debouncer.html [ Pass Failure ]
> webkit.org/b/155607 inspector/unit-tests/heap-snapshot.html [ Pass Timeout ]
> webkit.org/b/157999 inspector/unit-tests/heap-snapshot-collection-event.html [ Pass Timeout ]
>-webkit.org/b/181832 inspector/unit-tests/throttle.html [ Pass Failure ]
>+webkit.org/b/181832 inspector/unit-tests/throttler.html [ Pass Failure ]
> webkit.org/b/161361 inspector/unit-tests/yieldable-task.html [ Pass Failure ]
> webkit.org/b/169228 inspector/worker/console-basic.html [ Pass Timeout ]
> webkit.org/b/164872 inspector/worker/debugger-multiple-targets-pause.html [ Pass Failure Timeout ]

Actions: View | Formatted Diff | Diff

Attachments on bug 194721: 362178 | 362193 | 362220 | 362636