DevTools: introduce WebInspector.Throttler

Source/devtools/front_end/sdk/OverridesSupport.js

 /*
  * Copyright (C) 2012 Google 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 24 matching lines @@
  * @param {boolean} responsiveDesignAvailable
  */
 WebInspector.OverridesSupport = function(responsiveDesignAvailable)
 {
     WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._onMainFrameNavigated.bind(this), this);
     this._overrideDeviceResolution = false;
     this._emulateViewportEnabled = false;
     this._userAgent = "";
     this._pageResizer = null;
     this._initialized = false;
+    this._deviceMetricsThrottler = new WebInspector.Throttler(0);

[vsevik, 2014/06/09 12:32:58]

why not 100?

[lushnikov, 2014/06/09 13:07:26]

Throttler is used here as a message serializer that sends requests one-by-one to
backend.

     WebInspector.targetManager.observeTargets(this);
     this._responsiveDesignAvailable = responsiveDesignAvailable;
 }
 
 WebInspector.OverridesSupport.Events = {
     OverridesWarningUpdated: "OverridesWarningUpdated",
     HasActiveOverridesChanged: "HasActiveOverridesChanged",
 }
 
 /**
@@ skipping 561 matching lines @@
     _deviceMetricsChanged: function()
     {
         this._showRulersChanged();
 
         if (this._deviceMetricsChangedListenerMuted)
             return;
         var responsiveDesignAvailableAndDisabled = this._responsiveDesignAvailable && (!WebInspector.settings.responsiveDesign.enabled.get() || !this._pageResizer);
         var overrideDeviceResolution = this.settings.overrideDeviceResolution.get();
         var emulationEnabled = overrideDeviceResolution || this.settings.emulateViewport.get();
         if (responsiveDesignAvailableAndDisabled || !emulationEnabled) {
-            PageAgent.clearDeviceMetricsOverride(apiCallback.bind(this));
+            this._deviceMetricsThrottler.schedule(clearDeviceMetricsOverride.bind(this), true);
             if (this._pageResizer && !emulationEnabled)
                 this._pageResizer.update(0, 0, 0);
-            this.maybeHasActiveOverridesChanged();
             return;
         }
 
         var dipWidth = overrideDeviceResolution ? this.settings.deviceWidth.get() : 0;
         var dipHeight = overrideDeviceResolution ? this.settings.deviceHeight.get() : 0;
 
         // Disable override without checks.
         if (this.isInspectingDevice())
             return;
 
         var overrideWidth = dipWidth;
         var overrideHeight = dipHeight;
         if (this._pageResizer) {
             var available = this._pageResizer.availableDipSize();
             if (available.width >= dipWidth && available.height >= dipHeight) {
                 this._pageResizer.update(dipWidth, dipHeight, 0);
                 // When we have enough space, no page size override is required. This will speed things up and remove lag.
                 overrideWidth = 0;
                 overrideHeight = 0;
             } else {
                 this._pageResizer.update(Math.min(dipWidth, available.width), Math.min(dipHeight, available.height), 0);
             }
         }
 
-        // Do not emulate resolution more often than 10Hz.
-        this._setDeviceMetricsTimers = (this._setDeviceMetricsTimers || 0) + 1;
-        if (overrideWidth || overrideHeight)
-            setTimeout(setDeviceMetricsOverride.bind(this), 100);
-        else
-            setDeviceMetricsOverride.call(this);

[vsevik, 2014/06/09 12:32:57]

This one is not called synchronously anymore, could this cause a problem?

[lushnikov, 2014/06/09 13:07:26]

That's intentional, should be fine here.

+        var immediately = !overrideWidth && !overrideHeight;
+        this._deviceMetricsThrottler.schedule(setDeviceMetricsOverride.bind(this), immediately);
 
         /**
+         * @param {!WebInspector.Throttler.FinishCallback} finishCallback
          * @this {WebInspector.OverridesSupport}
          */
-        function setDeviceMetricsOverride()
+        function setDeviceMetricsOverride(finishCallback)
         {
-            // Drop heavy intermediate commands.
-            this._setDeviceMetricsTimers--;
-            var isExpensive = overrideWidth || overrideHeight;
-            if (isExpensive && this._setDeviceMetricsTimers) {
-                var commandThreshold = 100;
-                var time = window.performance.now();
-                if (time - this._lastExpensivePageAgentCommandTime < commandThreshold)
-                    return;
-                this._lastExpensivePageAgentCommandTime = time;
-            }
-
             PageAgent.setDeviceMetricsOverride(
                 overrideWidth, overrideHeight, this.settings.deviceScaleFactor.get(),
                 this.settings.emulateViewport.get(), this._pageResizer ? false : this.settings.deviceFitWindow.get(),
                 this.settings.deviceTextAutosizing.get(), this._fontScaleFactor(overrideWidth || dipWidth, overrideHeight || dipHeight),
-                apiCallback.bind(this));
+                apiCallback.bind(this, finishCallback));
         }
 
-        this.maybeHasActiveOverridesChanged();
+        /**
+         * @param {!WebInspector.Throttler.FinishCallback} finishCallback
+         * @this {WebInspector.OverridesSupport}
+         */
+        function clearDeviceMetricsOverride(finishCallback)
+        {
+            PageAgent.clearDeviceMetricsOverride(apiCallback.bind(this, finishCallback));
+        }
 
         /**
+         * @param {!WebInspector.Throttler.FinishCallback} finishCallback
          * @param {?Protocol.Error} error
          * @this {WebInspector.OverridesSupport}
          */
-        function apiCallback(error)
+        function apiCallback(finishCallback, error)
         {
             if (error) {
                 this._updateDeviceMetricsWarningMessage(WebInspector.UIString("Screen emulation is not available on this page."));
                 this._deviceMetricsOverrideAppliedForTest();
+                finishCallback();
                 return;
             }
 
             var overrideDeviceResolution = this.settings.overrideDeviceResolution.get();
             var viewportEnabled = this.settings.emulateViewport.get();
             if (this._overrideDeviceResolution !== overrideDeviceResolution || this._emulateViewportEnabled !== viewportEnabled)
                 this._updateDeviceMetricsWarningMessage(WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering."));
             this._overrideDeviceResolution = overrideDeviceResolution;
             this._emulateViewportEnabled = viewportEnabled;
             this._deviceMetricsOverrideAppliedForTest();
+            this.maybeHasActiveOverridesChanged();
+            finishCallback();
         }
     },
 
     _deviceMetricsOverrideAppliedForTest: function()
     {
         // Used for sniffing in tests.
     },
 
     _geolocationPositionChanged: function()
     {
@@ skipping 374 matching lines @@
     },
 
     __proto__: WebInspector.Object.prototype
 }
 
 
 /**
  * @type {!WebInspector.OverridesSupport}
  */
 WebInspector.overridesSupport;