[DevTools] Add Toolbox page to undocked DevTools frontend.

Toolbox page is the same frontend launched with "toolbox=true" parameter.
It has its own app, which creates a view hierarchy and reports to the main app.

Currently, toolbox is only created for responsive design.

BUG=327641

Review URL: https://codereview.chromium.org/298913004

git-svn-id: svn://svn.chromium.org/blink/trunk@175571 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/InspectorFrontendAPI.js

@@ -264,7 +264,3 @@ var InspectorFrontendAPI = {
 
 /** @typedef {!Object.<{type: string, keyCode: (number|undefined), keyIdentifier: (string|undefined), modifiers: (number|undefined)}>} */
 InspectorFrontendAPI.ForwardedKeyboardEvent;
-
-if (top !== window) {
-    top.InspectorFrontendAPI = window.InspectorFrontendAPI;
-}

third_party/WebKit/Source/devtools/front_end/InspectorFrontendHostStub.js

@@ -259,11 +259,6 @@ WebInspector.InspectorFrontendHostStub.prototype = {
     }
 }
 
-// Inherit bindings from the embedder.
-if (top !== window) {
-    window.InspectorFrontendHost = top.InspectorFrontendHost;
-}
-
 if (!window.InspectorFrontendHost) {
     InspectorFrontendHost = new WebInspector.InspectorFrontendHostStub();
 } else {

third_party/WebKit/Source/devtools/front_end/ResponsiveDesignView.js

@@ -45,14 +45,12 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
     this._enabled = false;
 
     WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
-    WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._updateOverridesSupportOnDockSideChange, this);
     WebInspector.settings.responsiveDesignMode.addChangeListener(this._responsiveDesignModeChanged, this);
-
     WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(this._maybeEnableResponsiveDesign, this);
     WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(this._maybeEnableResponsiveDesign, this);
     WebInspector.overridesSupport.settings.overrideDeviceResolution.addChangeListener(this._maybeEnableResponsiveDesign, this);
-
-    this._updateOverridesSupportOnDockSideChange();
+    this._responsiveDesignModeChanged();
+    this._overridesWarningUpdated();
 };
 
 // Measured in DIP.
@@ -72,7 +70,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         }
     },
 
-    _responsiveDesignModeChanged: function()
+    _invalidateCache: function()
     {
         delete this._cachedScale;
         delete this._cachedCssCanvasWidth;
@@ -81,35 +79,32 @@ WebInspector.ResponsiveDesignView.prototype = {
         delete this._cachedCssWidth;
         delete this._cachedZoomFactor;
         delete this._availableSize;
+    },
 
-        var enabled = WebInspector.settings.responsiveDesignMode.get() && WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
+    _responsiveDesignModeChanged: function()
+    {
+        var enabled = WebInspector.settings.responsiveDesignMode.get();
         if (enabled && !this._enabled) {
+            this._invalidateCache();
             this._ignoreResize = true;
             this._enabled = true;
             this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();
             this._inspectedPagePlaceholder.show(this._pageContainer);
             this._responsiveDesignContainer.show(this.element);
-            WebInspector.overridesSupport.setPageResizer(this);
+            this.update(this._dipWidth, this._dipHeight, this._scale);
             delete this._ignoreResize;
-        }
-
-        if (!enabled && this._enabled) {
+        } else if (!enabled && this._enabled) {
+            this._invalidateCache();
             this._ignoreResize = true;
             this._enabled = false;
             this._scale = 0;
             this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();
             this._responsiveDesignContainer.detach();
             this._inspectedPagePlaceholder.show(this.element);
-            WebInspector.overridesSupport.setPageResizer(null);
             delete this._ignoreResize;
         }
     },
 
-    _updateOverridesSupportOnDockSideChange: function()
-    {
-        this._responsiveDesignModeChanged();
-    },
-
     /**
      * WebInspector.OverridesSupport.PageResizer override.
      * @param {number} dipWidth
@@ -118,9 +113,6 @@ WebInspector.ResponsiveDesignView.prototype = {
      */
     update: function(dipWidth, dipHeight, scale)
     {
-        if (!this._enabled)
-            return;
-
         this._scale = scale;
         this._dipWidth = dipWidth;
         this._dipHeight = dipHeight;
@@ -328,7 +320,7 @@ WebInspector.ResponsiveDesignView.prototype = {
 
     _updateUI: function()
     {
-        if (!this._enabled)
+        if (!this._enabled || !this.isShowing())
             return;
 
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
@@ -377,8 +369,10 @@ WebInspector.ResponsiveDesignView.prototype = {
     {
         if (!this._enabled || this._ignoreResize)
             return;
+        var oldSize = this._availableSize;
         delete this._availableSize;
-        this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.AvailableSizeChanged);
+        if (!this.availableDipSize().isEqual(oldSize))
+            this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.AvailableSizeChanged);
         this._updateUI();
     },
 
@@ -465,7 +459,7 @@ WebInspector.ResponsiveDesignView.prototype = {
             return;
         this._warningMessage.classList.toggle("hidden", !message);
         this._warningMessage.textContent = message;
-        this._responsiveDesignModeChanged();
+        this._invalidateCache();
         this.onResize();
     },
 

third_party/WebKit/Source/devtools/front_end/common/Settings.js

@@ -677,8 +677,15 @@ WebInspector.VersionController.prototype = {
     }
 }
 
-WebInspector.settings = new WebInspector.Settings();
-WebInspector.experimentsSettings = new WebInspector.ExperimentsSettings(WebInspector.queryParam("experiments") !== null);
+/**
+ * @type {!WebInspector.Settings}
+ */
+WebInspector.settings;
+
+/**
+ * @type {!WebInspector.ExperimentsSettings}
+ */
+WebInspector.experimentsSettings;
 
 // These methods are added for backwards compatibility with Devtools CodeSchool extension.
 // DO NOT REMOVE
@@ -754,5 +761,3 @@ WebInspector.PauseOnExceptionStateSetting.prototype = {
         this._eventSupport.dispatchEventToListeners(this._name, this._value);
     }
 }
-
-WebInspector.settings.pauseOnExceptionStateString = new WebInspector.PauseOnExceptionStateSetting();

third_party/WebKit/Source/devtools/front_end/components/DockController.js

@@ -111,16 +111,20 @@ WebInspector.DockController.prototype = {
         if (this._dockSide === dockSide)
             return;
 
-        this.dispatchEventToListeners(WebInspector.DockController.Events.BeforeDockSideChanged, dockSide);
-        InspectorFrontendHost.setIsDocked(dockSide !== WebInspector.DockController.State.Undocked, this._setIsDockedResponse.bind(this));
+        var eventData = { from: this._dockSide, to: dockSide };
+        this.dispatchEventToListeners(WebInspector.DockController.Events.BeforeDockSideChanged, eventData);
+        InspectorFrontendHost.setIsDocked(dockSide !== WebInspector.DockController.State.Undocked, this._setIsDockedResponse.bind(this, eventData));
         this._dockSide = dockSide;
         this._updateUI();
-        this.dispatchEventToListeners(WebInspector.DockController.Events.DockSideChanged, this._dockSide);
+        this.dispatchEventToListeners(WebInspector.DockController.Events.DockSideChanged, eventData);
     },
 
-    _setIsDockedResponse: function()
+    /**
+     * @param {{from: string, to: string}} eventData
+     */
+    _setIsDockedResponse: function(eventData)
     {
-        this.dispatchEventToListeners(WebInspector.DockController.Events.AfterDockSideChanged, this._dockSide);
+        this.dispatchEventToListeners(WebInspector.DockController.Events.AfterDockSideChanged, eventData);
     },
 
     _updateUI: function()

third_party/WebKit/Source/devtools/front_end/main/AdvancedApp.js

@@ -9,6 +9,7 @@
 WebInspector.AdvancedApp = function()
 {
     WebInspector.App.call(this);
+    WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._openToolboxWindow, this);
 
     if (!WebInspector.experimentsSettings.responsiveDesign.isEnabled())
         return;
@@ -40,12 +41,13 @@ WebInspector.AdvancedApp.prototype = {
         WebInspector.inspectorView.show(this._rootSplitView.sidebarElement());
 
         this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
-        this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds, this);
+        this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds.bind(this, false), this);
         if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
-            var responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
-            responsiveDesignView.show(this._rootSplitView.mainElement());
-        } else
+            this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
+            this._responsiveDesignView.show(this._rootSplitView.mainElement());
+        } else {
             this._inspectedPagePlaceholder.show(this._rootSplitView.mainElement());
+        }
 
         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._onBeforeDockSideChange, this);
         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._onDockSideChange, this);
@@ -55,21 +57,91 @@ WebInspector.AdvancedApp.prototype = {
         rootView.attachToBody();
     },
 
-    _onBeforeDockSideChange: function()
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _openToolboxWindow: function(event)
+    {
+        if (/** @type {string} */ (event.data.to) !== WebInspector.DockController.State.Undocked)
+            return;
+
+        if (this._toolboxWindow || !WebInspector.experimentsSettings.responsiveDesign.isEnabled())
+            return;
+
+        var toolbox = (window.location.search ? "&" : "?") + "toolbox=true";
+        var hash = window.location.hash;
+        var url = window.location.href.replace(hash, "") + toolbox + hash;
+        this._toolboxWindow = window.open(url, undefined);
+    },
+
+    /**
+     * @param {!WebInspector.Toolbox} toolbox
+     */
+    _toolboxLoaded: function(toolbox)
+    {
+        this._toolbox = toolbox;
+        this._updatePageResizer();
+    },
+
+    _updatePageResizer: function()
     {
+        if (WebInspector.experimentsSettings.responsiveDesign.isEnabled())
+            WebInspector.overridesSupport.setPageResizer(this._isDocked() ? this._responsiveDesignView : (this._toolbox ? this._toolbox._responsiveDesignView : null));
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onBeforeDockSideChange: function(event)
+    {
+        if (/** @type {string} */ (event.data.to) === WebInspector.DockController.State.Undocked && this._toolbox) {
+            // Hide inspectorView and force layout to mimic the undocked state.
+            this._rootSplitView.hideSidebar();
+            this._inspectedPagePlaceholder.update();
+        }
+
         this._changingDockSide = true;
     },
 
-    _onDockSideChange: function()
+    /**
+     * @param {!WebInspector.Event=} event
+     */
+    _onDockSideChange: function(event)
     {
-        var dockSide = WebInspector.dockController.dockSide();
-        if (dockSide === WebInspector.DockController.State.Undocked) {
-            this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), false);
-            this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), false);
-            this._rootSplitView.hideMain();
+        this._updatePageResizer();
+
+        var toDockSide = event ? /** @type {string} */ (event.data.to) : WebInspector.dockController.dockSide();
+        if (toDockSide === WebInspector.DockController.State.Undocked) {
+            this._updateForUndocked();
+        } else if (this._toolbox && event && /** @type {string} */ (event.data.from) === WebInspector.DockController.State.Undocked) {
+            // Don't update yet for smooth transition.
+            this._rootSplitView.hideSidebar();
+        } else {
+            this._updateForDocked(toDockSide);
+        }
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onAfterDockSideChange: function(event)
+    {
+        // We may get here on the first dock side change while loading without BeforeDockSideChange.
+        if (!this._changingDockSide)
             return;
+        this._changingDockSide = false;
+        if (/** @type {string} */ (event.data.from) === WebInspector.DockController.State.Undocked) {
+            // Restore docked layout in case of smooth transition.
+            this._updateForDocked(/** @type {string} */ (event.data.to));
         }
+        this._inspectedPagePlaceholder.update();
+    },
 
+    /**
+     * @param {string} dockSide
+     */
+    _updateForDocked: function(dockSide)
+    {
         this._rootSplitView.setVertical(dockSide === WebInspector.DockController.State.DockedToLeft || dockSide === WebInspector.DockController.State.DockedToRight);
         this._rootSplitView.setSecondIsSidebar(dockSide === WebInspector.DockController.State.DockedToRight || dockSide === WebInspector.DockController.State.DockedToBottom);
         this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), true);
@@ -77,10 +149,11 @@ WebInspector.AdvancedApp.prototype = {
         this._rootSplitView.showBoth();
     },
 
-    _onAfterDockSideChange: function()
+    _updateForUndocked: function()
     {
-        this._changingDockSide = false;
-        this._inspectedPagePlaceholder.update();
+        this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), false);
+        this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), false);
+        this._rootSplitView.hideMain();
     },
 
     _isDocked: function()
@@ -89,11 +162,12 @@ WebInspector.AdvancedApp.prototype = {
     },
 
     /**
+     * @param {boolean} toolbox
      * @param {!WebInspector.Event} event
      */
-    _onSetInspectedPageBounds: function(event)
+    _onSetInspectedPageBounds: function(toolbox, event)
     {
-        if (this._changingDockSide || !this._isDocked())
+        if (this._changingDockSide || (this._isDocked() === toolbox))
             return;
         var bounds = /** @type {{x: number, y: number, width: number, height: number}} */ (event.data);
         InspectorFrontendHost.setInspectedPageBounds(bounds);
@@ -120,4 +194,32 @@ WebInspector.AdvancedApp.ResponsiveDesignButtonProvider.prototype = {
             return null;
         return /** @type {!WebInspector.AdvancedApp} */ (WebInspector.app)._toggleResponsiveDesignButton || null;
     }
-}
+}
\ No newline at end of file
+
+/**
+ * @constructor
+ */
+WebInspector.Toolbox = function()
+{
+    if (!window.opener)
+        return;
+
+    WebInspector.zoomManager = window.opener.WebInspector.zoomManager;
+    WebInspector.overridesSupport = window.opener.WebInspector.overridesSupport;
+    WebInspector.settings = window.opener.WebInspector.settings;
+    WebInspector.experimentsSettings = window.opener.WebInspector.experimentsSettings;
+    WebInspector.installPortStyles();
+
+    var advancedApp = /** @type {!WebInspector.AdvancedApp} */ (window.opener.WebInspector.app);
+    var rootView = new WebInspector.RootView();
+    this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
+    this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, advancedApp._onSetInspectedPageBounds.bind(advancedApp, true));
+    if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
+        this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
+        this._responsiveDesignView.show(rootView.element);
+    } else {
+        this._inspectedPagePlaceholder.show(rootView.element);
+    }
+    rootView.attachToBody();
+    advancedApp._toolboxLoaded(this);
+}

third_party/WebKit/Source/devtools/front_end/main/App.js

@@ -19,7 +19,7 @@ WebInspector.App.prototype = {
         WebInspector.inspectorView.showInitialPanel();
 
         WebInspector.overridesSupport.applyInitialOverrides();
-        if (WebInspector.overridesSupport.hasActiveOverrides())
+        if (WebInspector.overridesSupport.hasActiveOverrides() && !WebInspector.experimentsSettings.responsiveDesign.isEnabled())
             WebInspector.inspectorView.showViewInDrawer("emulation", true);
     }
 };

third_party/WebKit/Source/devtools/front_end/main/Main.js

@@ -179,6 +179,16 @@ WebInspector.Main.prototype = {
 
     _loaded: function()
     {
+        if (WebInspector.queryParam("toolbox")) {
+            new WebInspector.Toolbox();
+            return;
+        }
+
+        WebInspector.settings = new WebInspector.Settings();
+        WebInspector.experimentsSettings = new WebInspector.ExperimentsSettings(WebInspector.queryParam("experiments") !== null);
+        // This setting is needed for backwards compatibility with Devtools CodeSchool extension. DO NOT REMOVE
+        WebInspector.settings.pauseOnExceptionStateString = new WebInspector.PauseOnExceptionStateSetting();
+
         if (!InspectorFrontendHost.sendMessageToEmbedder) {
             var helpScreen = new WebInspector.HelpScreen(WebInspector.UIString("Incompatible Chrome version"));
             var p = helpScreen.contentElement.createChild("p", "help-section");

third_party/WebKit/Source/devtools/front_end/sdk/OverridesSupport.js

@@ -41,6 +41,7 @@ WebInspector.OverridesSupport = function(responsiveDesignAvailable)
     this._emulateViewportEnabled = false;
     this._userAgent = "";
     this._pageResizer = null;
+    this._initialized = false;
     WebInspector.targetManager.observeTargets(this);
     this._responsiveDesignAvailable = responsiveDesignAvailable;
 }
@@ -436,7 +437,8 @@ WebInspector.OverridesSupport.prototype = {
             this._pageResizer.addEventListener(WebInspector.OverridesSupport.PageResizer.Events.AvailableSizeChanged, this._onPageResizerAvailableSizeChanged, this);
             this._pageResizer.addEventListener(WebInspector.OverridesSupport.PageResizer.Events.ResizeRequested, this._onPageResizerResizeRequested, this);
         }
-        this._deviceMetricsChanged();
+        if (this._initialized)
+            this._deviceMetricsChanged();
     },
 
     /**
@@ -459,8 +461,11 @@ WebInspector.OverridesSupport.prototype = {
         this.settings.emulateViewport.set(true);
         delete this._deviceMetricsChangedListenerMuted;
         delete this._userAgentChangedListenerMuted;
-        this._deviceMetricsChanged();
-        this._userAgentChanged();
+
+        if (this._initialized) {
+            this._deviceMetricsChanged();
+            this._userAgentChanged();
+        }
     },
 
     resetEmulatedDevice: function()
@@ -473,8 +478,11 @@ WebInspector.OverridesSupport.prototype = {
         this.settings.emulateViewport.set(false);
         delete this._deviceMetricsChangedListenerMuted;
         delete this._userAgentChangedListenerMuted;
-        this._deviceMetricsChanged();
-        this._userAgentChanged();
+
+        if (this._initialized) {
+            this._deviceMetricsChanged();
+            this._userAgentChanged();
+        }
     },
 
     reset: function()
@@ -492,6 +500,33 @@ WebInspector.OverridesSupport.prototype = {
             return;
         }
 
+        this._initialized = true;
+
+        this.settings.overrideUserAgent.addChangeListener(this._userAgentChanged, this);
+        this.settings.userAgent.addChangeListener(this._userAgentChanged, this);
+
+        this.settings.overrideDeviceResolution.addChangeListener(this._deviceMetricsChanged, this);
+        this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this);
+        this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this);
+        this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsChanged, this);
+        this.settings.deviceTextAutosizing.addChangeListener(this._deviceMetricsChanged, this);
+        this.settings.emulateViewport.addChangeListener(this._deviceMetricsChanged, this);
+        this.settings.deviceFitWindow.addChangeListener(this._deviceMetricsChanged, this);
+        WebInspector.settings.responsiveDesignMode.addChangeListener(this._deviceMetricsChanged, this);
+
+        this.settings.overrideGeolocation.addChangeListener(this._geolocationPositionChanged, this);
+        this.settings.geolocationOverride.addChangeListener(this._geolocationPositionChanged, this);
+
+        this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOrientationChanged, this);
+        this.settings.deviceOrientationOverride.addChangeListener(this._deviceOrientationChanged, this);
+
+        this.settings.emulateTouchEvents.addChangeListener(this._emulateTouchEventsChanged, this);
+
+        this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this);
+        this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this);
+
+        WebInspector.settings.showMetricsRulers.addChangeListener(this._showRulersChanged, this);
+
         if (this.settings.overrideDeviceOrientation.get())
             this._deviceOrientationChanged();
 
@@ -527,7 +562,8 @@ WebInspector.OverridesSupport.prototype = {
 
     _onPageResizerAvailableSizeChanged: function()
     {
-        this._deviceMetricsChanged();
+        if (this._initialized)
+            this._deviceMetricsChanged();
     },
 
     _onPageResizerResizeRequested: function(event)
@@ -545,11 +581,12 @@ WebInspector.OverridesSupport.prototype = {
 
         if (this._deviceMetricsChangedListenerMuted)
             return;
-        var responsiveDesignAvailableAndDisabled = this._responsiveDesignAvailable && !WebInspector.settings.responsiveDesignMode.get();
+        var responsiveDesignAvailableAndDisabled = this._responsiveDesignAvailable && (!WebInspector.settings.responsiveDesignMode.get() || !this._pageResizer);
         var overrideDeviceResolution = this.settings.overrideDeviceResolution.get();
-        if (responsiveDesignAvailableAndDisabled || (!overrideDeviceResolution && !this.settings.emulateViewport.get())) {
+        var emulationEnabled = overrideDeviceResolution || this.settings.emulateViewport.get();
+        if (responsiveDesignAvailableAndDisabled || !emulationEnabled) {
             PageAgent.clearDeviceMetricsOverride(apiCallback.bind(this));
-            if (this._pageResizer)
+            if (this._pageResizer && !emulationEnabled)
                 this._pageResizer.update(0, 0, 0);
             this.maybeHasActiveOverridesChanged();
             return;
@@ -726,7 +763,8 @@ WebInspector.OverridesSupport.prototype = {
 
     _onMainFrameNavigated: function()
     {
-        this._deviceMetricsChanged();
+        if (this._initialized)
+            this._deviceMetricsChanged();
         this._updateUserAgentWarningMessage("");
         this._updateDeviceMetricsWarningMessage("");
     },
@@ -790,30 +828,6 @@ WebInspector.OverridesSupport.prototype = {
 
         this.maybeHasActiveOverridesChanged();
 
-        this.settings.overrideUserAgent.addChangeListener(this._userAgentChanged, this);
-        this.settings.userAgent.addChangeListener(this._userAgentChanged, this);
-
-        this.settings.overrideDeviceResolution.addChangeListener(this._deviceMetricsChanged, this);
-        this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this);
-        this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this);
-        this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsChanged, this);
-        this.settings.deviceTextAutosizing.addChangeListener(this._deviceMetricsChanged, this);
-        this.settings.emulateViewport.addChangeListener(this._deviceMetricsChanged, this);
-        this.settings.deviceFitWindow.addChangeListener(this._deviceMetricsChanged, this);
-
-        this.settings.overrideGeolocation.addChangeListener(this._geolocationPositionChanged, this);
-        this.settings.geolocationOverride.addChangeListener(this._geolocationPositionChanged, this);
-
-        this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOrientationChanged, this);
-        this.settings.deviceOrientationOverride.addChangeListener(this._deviceOrientationChanged, this);
-
-        this.settings.emulateTouchEvents.addChangeListener(this._emulateTouchEventsChanged, this);
-
-        this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this);
-        this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this);
-
-        WebInspector.settings.showMetricsRulers.addChangeListener(this._showRulersChanged, this);
-
         if (this._applyInitialOverridesOnTargetAdded) {
             delete this._applyInitialOverridesOnTargetAdded;
             this.applyInitialOverrides();