Changeset 226755 in webkit


Ignore:
Timestamp:
Jan 10, 2018 7:36:29 PM (6 years ago)
Author:
Matt Baker
Message:

Web Inspector: Canvas tab: throttle recording slider updates
https://bugs.webkit.org/show_bug.cgi?id=180839
<rdar://problem/36057849>

Reviewed by Joseph Pecoraro

Source/WebInspectorUI:

  • UserInterface/Base/Utilities.js:

Add Object.throttle and Function.cancelThrottle. Repeated calls to a
function on a throttled object are delayed, so that the function isn't
invoked more frequently than the specified delay value.

For a description of throttling behavior see:

  • UserInterface/Views/RecordingContentView.js:

(WI.RecordingContentView.prototype.updateActionIndex):
Throttle frequency of canvas snapshot creation to 200ms.
(WI.RecordingContentView.prototype.hidden):
Prevent trailing edge call after hiding the view.

LayoutTests:

  • inspector/unit-tests/throttle-expected.txt: Added.
  • inspector/unit-tests/throttle.html: Added.

Added function throttling tests.

Location:
trunk
Files:
2 added
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r226753 r226755  
     12018-01-10  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Canvas tab: throttle recording slider updates
     4        https://bugs.webkit.org/show_bug.cgi?id=180839
     5        <rdar://problem/36057849>
     6
     7        Reviewed by Joseph Pecoraro
     8
     9        * inspector/unit-tests/throttle-expected.txt: Added.
     10        * inspector/unit-tests/throttle.html: Added.
     11        Added function throttling tests.
     12
    1132018-01-10  Wenson Hsieh  <wenson_hsieh@apple.com>
    214
  • trunk/Source/WebInspectorUI/ChangeLog

    r226728 r226755  
     12018-01-10  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Canvas tab: throttle recording slider updates
     4        https://bugs.webkit.org/show_bug.cgi?id=180839
     5        <rdar://problem/36057849>
     6
     7        Reviewed by Joseph Pecoraro
     8
     9        * UserInterface/Base/Utilities.js:
     10        Add Object.throttle and Function.cancelThrottle. Repeated calls to a
     11        function on a throttled object are delayed, so that the function isn't
     12        invoked more frequently than the specified delay value.
     13
     14        For a description of throttling behavior see:
     15          - http://www.chrislondon.co/throttling-vs-debouncing
     16          - http://benalman.com/projects/jquery-throttle-debounce-plugin
     17
     18        * UserInterface/Views/RecordingContentView.js:
     19        (WI.RecordingContentView.prototype.updateActionIndex):
     20        Throttle frequency of canvas snapshot creation to 200ms.
     21        (WI.RecordingContentView.prototype.hidden):
     22        Prevent trailing edge call after hiding the view.
     23
    1242018-01-10  Joseph Pecoraro  <pecoraro@apple.com>
    225
  • trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js

    r225546 r226755  
    14821482        }
    14831483    });
     1484
     1485    const throttleTimeoutSymbol = Symbol("throttle-timeout");
     1486
     1487    Object.defineProperty(Object.prototype, "throttle",
     1488    {
     1489        value(delay)
     1490        {
     1491            console.assert(delay >= 0);
     1492
     1493            let lastFireTime = NaN;
     1494            let mostRecentArguments = null;
     1495
     1496            return new Proxy(this, {
     1497                get(target, property, receiver) {
     1498                    return (...args) => {
     1499                        let original = target[property];
     1500                        console.assert(typeof original === "function");
     1501                        mostRecentArguments = args;
     1502
     1503                        function performWork() {
     1504                            lastFireTime = Date.now();
     1505                            original[throttleTimeoutSymbol] = undefined;
     1506                            original.apply(target, mostRecentArguments);
     1507                        }
     1508
     1509                        if (isNaN(lastFireTime)) {
     1510                            performWork();
     1511                            return;
     1512                        }
     1513
     1514                        let remaining = delay - (Date.now() - lastFireTime);
     1515                        if (remaining <= 0) {
     1516                            original.cancelThrottle();
     1517                            performWork();
     1518                            return;
     1519                        }
     1520
     1521                        if (!original[throttleTimeoutSymbol])
     1522                            original[throttleTimeoutSymbol] = setTimeout(performWork, remaining);
     1523                    };
     1524                }
     1525            });
     1526        }
     1527    });
     1528
     1529    Object.defineProperty(Function.prototype, "cancelThrottle",
     1530    {
     1531        value()
     1532        {
     1533            if (!this[throttleTimeoutSymbol])
     1534                return;
     1535
     1536            clearTimeout(this[throttleTimeoutSymbol]);
     1537            this[throttleTimeoutSymbol] = undefined;
     1538        }
     1539    });
    14841540})();
    14851541
  • trunk/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js

    r223918 r226755  
    3535        this._snapshots = [];
    3636        this._initialContent = null;
     37        this._throttler = this.throttle(200);
    3738
    3839        this.element.classList.add("recording", this.representedObject.type);
     
    114115
    115116            if (this.representedObject.type === WI.Recording.Type.Canvas2D)
    116                 this._generateContentCanvas2D(index, actions, options);
     117                this._throttler._generateContentCanvas2D(index, actions, options);
    117118            else if (this.representedObject.type === WI.Recording.Type.CanvasWebGL)
    118                 this._generateContentCanvasWebGL(index, actions, options);
     119                this._throttler._generateContentCanvasWebGL(index, actions, options);
    119120        });
    120121    }
    121 
    122     // Protected
    123122
    124123    shown()
     
    135134    }
    136135
     136    hidden()
     137    {
     138        super.hidden();
     139
     140        this._generateContentCanvas2D.cancelThrottle();
     141        this._generateContentCanvasWebGL.cancelThrottle();
     142    }
     143
     144    // Protected
    137145
    138146    get supportsSave()
Note: See TracChangeset for help on using the changeset viewer.