[DevTools] Responsive design UI rework.

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 19 matching lines @@
 
 /**
  * @constructor
  * @implements {WebInspector.TargetManager.Observer}
  * @extends {WebInspector.Object}
  * @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);
+    this._responsiveDesignAvailable = responsiveDesignAvailable;
     WebInspector.targetManager.observeTargets(this);
-    this._responsiveDesignAvailable = responsiveDesignAvailable;
 }
 
 WebInspector.OverridesSupport.Events = {
     OverridesWarningUpdated: "OverridesWarningUpdated",
     HasActiveOverridesChanged: "HasActiveOverridesChanged",
 }
 
 /**
  * @interface
  * @extends {WebInspector.EventTarget}
@@ skipping 452 matching lines @@
     /**
      * @param {string} deviceMetrics
      * @param {string} userAgent
      */
     emulateDevice: function(deviceMetrics, userAgent)
     {
         var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(deviceMetrics);
         this._deviceMetricsChangedListenerMuted = true;
         this._userAgentChangedListenerMuted = true;
         this.settings.userAgent.set(userAgent);
-        this.settings.overrideDeviceResolution.set(true);
         this.settings.deviceWidth.set(metrics.width);
         this.settings.deviceHeight.set(metrics.height);
         this.settings.deviceScaleFactor.set(metrics.deviceScaleFactor);
         this.settings.deviceTextAutosizing.set(metrics.textAutosizing);
         this.settings.overrideUserAgent.set(true);
         this.settings.emulateTouchEvents.set(true);
         this.settings.emulateViewport.set(true);
+        this.settings.emulateDevice.set(true);
         delete this._deviceMetricsChangedListenerMuted;
         delete this._userAgentChangedListenerMuted;
 
         if (this._initialized) {
             this._deviceMetricsChanged();
             this._userAgentChanged();
         }
     },
 
+    /**
+     * @param {string} deviceMetrics
+     * @param {string} userAgent
+     * @return {boolean}
+     */
+    isEmulatingDevice: function(deviceMetrics, userAgent)
+    {
+        var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(deviceMetrics);
+        return this.settings.userAgent.get() === userAgent
+            && this.settings.deviceWidth.get() === metrics.width
+            && this.settings.deviceHeight.get() === metrics.height
+            && this.settings.deviceScaleFactor.get() === metrics.deviceScaleFactor
+            && this.settings.deviceTextAutosizing.get() === metrics.textAutosizing
+            && this.settings.emulateTouchEvents.get()
+            && this.settings.emulateViewport.get();
+    },
+
     resetEmulatedDevice: function()
     {
         this._deviceMetricsChangedListenerMuted = true;
         this._userAgentChangedListenerMuted = true;
-        this.settings.overrideDeviceResolution.set(false);
+        this.settings.emulateDevice.set(false);
         this.settings.overrideUserAgent.set(false);
         this.settings.emulateTouchEvents.set(false);
         this.settings.emulateViewport.set(false);
         delete this._deviceMetricsChangedListenerMuted;
         delete this._userAgentChangedListenerMuted;
 
         if (this._initialized) {
             this._deviceMetricsChanged();
             this._userAgentChanged();
         }
@@ skipping 11 matching lines @@
     {
         if (!this._target) {
             this._applyInitialOverridesOnTargetAdded = true;
             return;
         }
 
         this._initialized = true;
 
         this.settings.overrideUserAgent.addChangeListener(this._userAgentChanged, this);
         this.settings.userAgent.addChangeListener(this._userAgentChanged, this);
+        this.settings.emulateDevice.addChangeListener(this._updateUserAgentAndTouchOnEmulateDeviceChanged, this);
 
-        this.settings.overrideDeviceResolution.addChangeListener(this._deviceMetricsChanged, this);
+        this.settings.emulateDevice.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.responsiveDesign.enabled.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.emulateDevice.addChangeListener(this._emulateTouchEventsChanged, this);
         this.settings.emulateTouchEvents.addChangeListener(this._emulateTouchEventsChanged, this);
+        this.settings.emulateDevice.addChangeListener(this._updateUserAgentAndTouchOnEmulateDeviceChanged, this);
 
         this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this);
         this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this);
 
         this.settings.emulateNetworkConditions.addChangeListener(this._networkConditionsChanged, this);
         this.settings.networkConditionsDomains.addChangeListener(this._networkConditionsChanged, this);
         this.settings.networkConditionsThroughput.addChangeListener(this._networkConditionsChanged, this);
 
         WebInspector.settings.showMetricsRulers.addChangeListener(this._showRulersChanged, this);
 
         if (this.settings.overrideDeviceOrientation.get())
             this._deviceOrientationChanged();
 
         if (this.settings.overrideGeolocation.get())
             this._geolocationPositionChanged();
 
-        if (this.settings.emulateTouchEvents.get())
+        if (this.settings.emulateTouchEvents.get() && (this.settings.emulateDevice.get() || !this._responsiveDesignAvailable))
             this._emulateTouchEventsChanged();
 
         if (this.settings.overrideCSSMedia.get())
             this._cssMediaChanged();
 
-        if (this.settings.overrideDeviceResolution.get() || this.settings.emulateViewport.get())
+        if (this.settings.emulateDevice.get())
             this._deviceMetricsChanged();
 
         if (this.settings.overrideUserAgent.get())
             this._userAgentChanged();
 
         if (this.settings.emulateNetworkConditions.get())
             this._networkConditionsChanged();
 
         this._showRulersChanged();
     },
 
+    _updateUserAgentAndTouchOnEmulateDeviceChanged: function()
+    {
+        var value = this.settings.emulateDevice.get();
+        if (this.settings.overrideUserAgent.get() !== value)
+            this.settings.overrideUserAgent.set(value);
+        if (this.settings.emulateTouchEvents.get() !== value && !this._responsiveDesignAvailable)
+            this.settings.emulateTouchEvents.set(value);
+    },
+
     _userAgentChanged: function()
     {
         if (this._userAgentChangedListenerMuted)
             return;
         var userAgent = this.settings.overrideUserAgent.get() ? this.settings.userAgent.get() : "";
         NetworkAgent.setUserAgentOverride(userAgent);
         if (this._userAgent !== userAgent)
             this._updateUserAgentWarningMessage(WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering."));
         this._userAgent = userAgent;
         this.maybeHasActiveOverridesChanged();
@@ skipping 19 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) {
+        var emulateDevice = this.settings.emulateDevice.get();
+        if (responsiveDesignAvailableAndDisabled || !emulateDevice) {
             this._deviceMetricsThrottler.schedule(clearDeviceMetricsOverride.bind(this));
-            if (this._pageResizer && !emulationEnabled)
+            if (this._pageResizer && !emulateDevice)
                 this._pageResizer.update(0, 0, 0);
             return;
         }
 
-        var dipWidth = overrideDeviceResolution ? this.settings.deviceWidth.get() : 0;
-        var dipHeight = overrideDeviceResolution ? this.settings.deviceHeight.get() : 0;
+        var dipWidth = emulateDevice ? this.settings.deviceWidth.get() : 0;
+        var dipHeight = emulateDevice ? 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) {
@@ skipping 37 matching lines @@
          */
         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)
+            var viewportEnabled = this.settings.emulateDevice.get() && this.settings.emulateViewport.get();
+            if (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.
@@ skipping 23 matching lines @@
         var deviceOrientation = WebInspector.OverridesSupport.DeviceOrientation.parseSetting(this.settings.deviceOrientationOverride.get());
         PageAgent.setDeviceOrientationOverride(deviceOrientation.alpha, deviceOrientation.beta, deviceOrientation.gamma);
         this.maybeHasActiveOverridesChanged();
     },
 
     _emulateTouchEventsChanged: function()
     {
         if (this.hasTouchInputs() && this.settings.emulateTouchEvents.get())
             return;
 
-        var emulateTouch = this.settings.emulateTouchEvents.get();
+        var emulateTouch = this.settings.emulateTouchEvents.get() && (this.settings.emulateDevice.get() || !this._responsiveDesignAvailable);
         var targets = WebInspector.targetManager.targets();
         for (var i = 0; i < targets.length; ++i)
             targets[i].domModel.emulateTouchEventObjects(emulateTouch);
         this.maybeHasActiveOverridesChanged();
     },
 
     _cssMediaChanged: function()
     {
         if (this.isInspectingDevice() && this.settings.overrideCSSMedia.get())
             return;
@@ skipping 17 matching lines @@
             NetworkAgent.emulateNetworkConditions(domains, throughput, offline);
         }
         this.maybeHasActiveOverridesChanged();
     },
 
     /**
      * @return {boolean}
      */
     showMetricsRulers: function()
     {
-        var rulersInPageResizer = this._pageResizer && this.settings.overrideDeviceResolution.get();
+        var rulersInPageResizer = this._pageResizer && this.settings.emulateDevice.get();
         return WebInspector.settings.showMetricsRulers.get() && !rulersInPageResizer;
     },
 
     _showRulersChanged: function()
     {
         if (WebInspector.experimentsSettings.responsiveDesign.isEnabled())
             return;
         PageAgent.setShowViewportSizeOnResize(true, this.showMetricsRulers());
     },
 
     /**
      * @return {boolean}
      */
     hasActiveOverrides: function()
     {
         return this._hasActiveOverrides;
     },
 
     maybeHasActiveOverridesChanged: function()
     {
         var hasActiveOverrides =
             this.settings.overrideUserAgent.get() ||
-            ((this.settings.overrideDeviceResolution.get() || this.settings.emulateViewport.get()) && !this.isInspectingDevice()) ||
+            (this.settings.emulateDevice.get() && !this.isInspectingDevice()) ||
             this.settings.overrideGeolocation.get() ||
             this.settings.overrideDeviceOrientation.get() ||
-            (this.settings.emulateTouchEvents.get() && !this.hasTouchInputs()) ||
+            (this.settings.emulateTouchEvents.get() && this.settings.emulateDevice.get() && !this.hasTouchInputs()) ||
             (this.settings.overrideCSSMedia.get() && !this.isInspectingDevice());
         if (this._hasActiveOverrides !== hasActiveOverrides) {
             this._hasActiveOverrides = hasActiveOverrides;
             this.dispatchEventToListeners(WebInspector.OverridesSupport.Events.HasActiveOverridesChanged);
         }
     },
 
     _onMainFrameNavigated: function()
     {
         if (this._initialized)
@@ skipping 35 matching lines @@
     {
         // FIXME: adapt this to multiple targets.
         if (this._target)
             return;
         this._target = target;
 
         this.settings = {};
         this.settings.overrideUserAgent = WebInspector.settings.createSetting("overrideUserAgent", false);
         this.settings.userAgent = WebInspector.settings.createSetting("userAgent", "");
 
-        this.settings.overrideDeviceResolution = WebInspector.settings.createSetting("overrideDeviceResolution", false);
+        this.settings.emulateDevice = WebInspector.settings.createSetting("emulateDevice", false);
         this.settings.deviceWidth = WebInspector.settings.createSetting("deviceWidth", 800);
         this.settings.deviceHeight = WebInspector.settings.createSetting("deviceHeight", 600);
         this.settings.deviceScaleFactor = WebInspector.settings.createSetting("deviceScaleFactor", window.devicePixelRatio);
         this.settings.deviceTextAutosizing = WebInspector.settings.createSetting("deviceTextAutosizing", true);
-
         this.settings.deviceFitWindow = WebInspector.settings.createSetting("deviceFitWindow", true);
+        // FIXME: rename viewport to mobile everywhere in the code.
         this.settings.emulateViewport = WebInspector.settings.createSetting("emulateViewport", false);
         this.settings.emulateTouchEvents = WebInspector.settings.createSetting("emulateTouchEvents", false);
+
         this.settings.overrideGeolocation = WebInspector.settings.createSetting("overrideGeolocation", false);
         this.settings.geolocationOverride = WebInspector.settings.createSetting("geolocationOverride", "");
         this.settings.overrideDeviceOrientation = WebInspector.settings.createSetting("overrideDeviceOrientation", false);
         this.settings.deviceOrientationOverride = WebInspector.settings.createSetting("deviceOrientationOverride", "");
         this.settings.overrideCSSMedia = WebInspector.settings.createSetting("overrideCSSMedia", false);
         this.settings.emulatedCSSMedia = WebInspector.settings.createSetting("emulatedCSSMedia", "print");
-        this.settings.emulatedDevice = WebInspector.settings.createSetting("emulatedDevice", "Google Nexus 5");
 
         this.settings.emulateNetworkConditions = WebInspector.settings.createSetting("emulateNetworkConditions", false);
         this.settings.networkConditionsDomains = WebInspector.settings.createSetting("networkConditionsDomains", "");
         this.settings.networkConditionsThroughput = WebInspector.settings.createSetting("networkConditionsThroughput", 0);
 
         this.maybeHasActiveOverridesChanged();
 
         if (this._applyInitialOverridesOnTargetAdded) {
             delete this._applyInitialOverridesOnTargetAdded;
             this.applyInitialOverrides();
@@ skipping 40 matching lines @@
      *
      * For a description of the Android device scale adjustment algorithm, see:
      *     chrome/browser/chrome_content_browser_client.cc, GetFontScaleMultiplier(...)
      *
      * @param {number} width
      * @param {number} height
      * @return {number} font scale factor.
      */
     _fontScaleFactor: function(width, height)
     {
-        if (!this.settings.overrideDeviceResolution.get())
+        if (!this.settings.emulateDevice.get())
             return 1;
         if (!width && !height)
             return 1;
 
         var deviceScaleFactor = this.settings.deviceScaleFactor.get();
 
         var minWidth = Math.min(width, height) / deviceScaleFactor;
 
         var kMinFSM = 1.05;
         var kWidthForMinFSM = 320;
@@ skipping 14 matching lines @@
      * @param {!Document} document
      * @return {!Element}
      */
     createDeviceSelect: function(document)
     {
         var deviceSelectElement = document.createElement("select");
         deviceSelectElement.disabled = WebInspector.overridesSupport.isInspectingDevice();
 
         var devices = WebInspector.OverridesSupport._phones.concat(WebInspector.OverridesSupport._tablets);
         devices.sort();
+
+        var selectDevice = [WebInspector.UIString("<Select device>"), "", ""];
+        devices = devices.concat([selectDevice]);
         for (var i = 0; i < devices.length; ++i) {
             var device = devices[i];
             var option = new Option(device[0], device[0]);
             option.userAgent = device[1];
             option.metrics = device[2];
             deviceSelectElement.add(option);
         }
 
-        settingChanged();
-        WebInspector.overridesSupport.settings.emulatedDevice.addChangeListener(settingChanged);
         deviceSelectElement.addEventListener("change", deviceSelected, false);
 
+        var emulatedSettingChangedMuted = false;
+        WebInspector.overridesSupport.settings.deviceWidth.addChangeListener(emulatedSettingChanged);
+        WebInspector.overridesSupport.settings.deviceHeight.addChangeListener(emulatedSettingChanged);
+        WebInspector.overridesSupport.settings.deviceScaleFactor.addChangeListener(emulatedSettingChanged);
+        WebInspector.overridesSupport.settings.deviceTextAutosizing.addChangeListener(emulatedSettingChanged);
+        WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(emulatedSettingChanged);
+        WebInspector.overridesSupport.settings.deviceFitWindow.addChangeListener(emulatedSettingChanged);
+        WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(emulatedSettingChanged);
+        WebInspector.overridesSupport.settings.overrideUserAgent.addChangeListener(emulatedSettingChanged);
+        WebInspector.overridesSupport.settings.userAgent.addChangeListener(emulatedSettingChanged);
+        emulatedSettingChanged();
+
         function deviceSelected()
         {
+            if (deviceSelectElement.selectedIndex === devices.length - 1)
+                return;
+
             var option = deviceSelectElement.options[deviceSelectElement.selectedIndex];
-            WebInspector.overridesSupport.settings.emulatedDevice.removeChangeListener(settingChanged);
-            WebInspector.overridesSupport.settings.emulatedDevice.set(option.value);
-            WebInspector.overridesSupport.settings.emulatedDevice.addChangeListener(settingChanged);
+            emulatedSettingChangedMuted = true;
+            WebInspector.overridesSupport.emulateDevice(option.metrics, option.userAgent);
+            emulatedSettingChangedMuted = false;
         }
 
-        function settingChanged()
+        function emulatedSettingChanged()
         {
-            var selectionRestored = false;
+            if (emulatedSettingChangedMuted)
+                return;
+
+            var index = devices.length - 1;
             for (var i = 0; i < devices.length; ++i) {
-                var device = devices[i];
-                if (WebInspector.overridesSupport.settings.emulatedDevice.get() === device[0]) {
-                    deviceSelectElement.selectedIndex = i;
-                    selectionRestored = true;
+                var option = deviceSelectElement.options[i];
+                if (WebInspector.overridesSupport.isEmulatingDevice(option.metrics, option.userAgent)) {
+                    index = i;
                     break;
                 }
             }
-
-            if (!selectionRestored)
-                deviceSelectElement.selectedIndex = devices.length - 1;
+            deviceSelectElement.selectedIndex = index;
         }
 
         return deviceSelectElement;
     },
 
     /**
      * @param {!Document} document
      * @return {{select: !Element, input: !Element}}
      */
     createUserAgentSelectAndInput: function(document)
@@ skipping 134 matching lines @@
     },
 
     __proto__: WebInspector.Object.prototype
 }
 
 
 /**
  * @type {!WebInspector.OverridesSupport}
  */
 WebInspector.overridesSupport;