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

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @constructor
   7  * @extends {WebInspector.App}
   8  */
   9 WebInspector.AdvancedApp = function()
  10 {
  11     WebInspector.App.call(this);
  12     if (WebInspector.overridesSupport.responsiveDesignAvailable()) {
  13         this._toggleEmulationButton = new WebInspector.StatusBarButton(WebInspector.UIString("Toggle device mode."), "emulation-status-bar-item");
  14         this._toggleEmulationButton.toggled = WebInspector.overridesSupport.emulationEnabled();
  15         this._toggleEmulationButton.addEventListener("click", this._toggleEmulationEnabled, this);
  16         WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.EmulationStateChanged, this._emulationEnabledChanged, this);
  17         WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this);
  18     }
  19     WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._openToolboxWindow, this);
  20 };
  21
  22 WebInspector.AdvancedApp.prototype = {
  23     _toggleEmulationEnabled: function()
  24     {
  25         var enabled = !this._toggleEmulationButton.toggled;
  26         if (enabled)
  27             WebInspector.userMetrics.DeviceModeEnabled.record();
  28         WebInspector.overridesSupport.setEmulationEnabled(enabled);
  29     },
  30
  31     _emulationEnabledChanged: function()
  32     {
  33         this._toggleEmulationButton.toggled = WebInspector.overridesSupport.emulationEnabled();
  34         if (!WebInspector.overridesSupport.responsiveDesignAvailable() && WebInspector.overridesSupport.emulationEnabled())
  35             WebInspector.inspectorView.showViewInDrawer("emulation", true);
  36     },
  37
  38     _overridesWarningUpdated: function()
  39     {
  40         if (!this._toggleEmulationButton)
  41             return;
  42         var message = WebInspector.overridesSupport.warningMessage();
  43         this._toggleEmulationButton.title = message || WebInspector.UIString("Toggle device mode.");
  44         this._toggleEmulationButton.element.classList.toggle("warning", !!message);
  45     },
  46
  47     createRootView: function()
  48     {
  49         var rootView = new WebInspector.RootView();
  50
  51         this._rootSplitView = new WebInspector.SplitView(false, true, "InspectorView.splitViewState", 300, 300, true);
  52         this._rootSplitView.show(rootView.element);
  53
  54         WebInspector.inspectorView.show(this._rootSplitView.sidebarElement());
  55
  56         this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
  57         this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds.bind(this, false), this);
  58         this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
  59         this._responsiveDesignView.show(this._rootSplitView.mainElement());
  60
  61         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._onBeforeDockSideChange, this);
  62         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._onDockSideChange, this);
  63         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.AfterDockSideChanged, this._onAfterDockSideChange, this);
  64         this._onDockSideChange();
  65
  66         console.timeStamp("AdvancedApp.attachToBody");
  67         rootView.attachToBody();
  68         this._inspectedPagePlaceholder.update();
  69     },
  70
  71     /**
  72      * @param {!WebInspector.Target} mainTarget
  73      */
  74     presentUI: function(mainTarget)
  75     {
  76         WebInspector.App.prototype.presentUI.call(this, mainTarget);
  77         this._overridesWarningUpdated();
  78     },
  79
  80     /**
  81      * @param {!WebInspector.Event} event
  82      */
  83     _openToolboxWindow: function(event)
  84     {
  85         if (/** @type {string} */ (event.data.to) !== WebInspector.DockController.State.Undocked)
  86             return;
  87
  88         if (this._toolboxWindow)
  89             return;
  90
  91         var toolbox = (window.location.search ? "&" : "?") + "toolbox=true";
  92         var hash = window.location.hash;
  93         var url = window.location.href.replace(hash, "") + toolbox + hash;
  94         this._toolboxWindow = window.open(url, undefined);
  95     },
  96
  97     /**
  98      * @param {!WebInspector.ResponsiveDesignView} responsiveDesignView
  99      * @param {!WebInspector.InspectedPagePlaceholder} placeholder
 100      */
 101     toolboxLoaded: function(responsiveDesignView, placeholder)
 102     {
 103         this._toolboxResponsiveDesignView = responsiveDesignView;
 104         placeholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds.bind(this, true));
 105         this._updatePageResizer();
 106     },
 107
 108     _updatePageResizer: function()
 109     {
 110         if (this._isDocked())
 111             this._responsiveDesignView.updatePageResizer();
 112         else if (this._toolboxResponsiveDesignView)
 113             this._toolboxResponsiveDesignView.updatePageResizer();
 114     },
 115
 116     /**
 117      * @param {!WebInspector.Event} event
 118      */
 119     _onBeforeDockSideChange: function(event)
 120     {
 121         if (/** @type {string} */ (event.data.to) === WebInspector.DockController.State.Undocked && this._toolboxResponsiveDesignView) {
 122             // Hide inspectorView and force layout to mimic the undocked state.
 123             this._rootSplitView.hideSidebar();
 124             this._inspectedPagePlaceholder.update();
 125         }
 126
 127         this._changingDockSide = true;
 128     },
 129
 130     /**
 131      * @param {!WebInspector.Event=} event
 132      */
 133     _onDockSideChange: function(event)
 134     {
 135         this._updatePageResizer();
 136
 137         var toDockSide = event ? /** @type {string} */ (event.data.to) : WebInspector.dockController.dockSide();
 138         if (toDockSide === WebInspector.DockController.State.Undocked) {
 139             this._updateForUndocked();
 140         } else if (this._toolboxResponsiveDesignView && event && /** @type {string} */ (event.data.from) === WebInspector.DockController.State.Undocked) {
 141             // Don't update yet for smooth transition.
 142             this._rootSplitView.hideSidebar();
 143         } else {
 144             this._updateForDocked(toDockSide);
 145         }
 146     },
 147
 148     /**
 149      * @param {!WebInspector.Event} event
 150      */
 151     _onAfterDockSideChange: function(event)
 152     {
 153         // We may get here on the first dock side change while loading without BeforeDockSideChange.
 154         if (!this._changingDockSide)
 155             return;
 156         this._changingDockSide = false;
 157         if (/** @type {string} */ (event.data.from) === WebInspector.DockController.State.Undocked) {
 158             // Restore docked layout in case of smooth transition.
 159             this._updateForDocked(/** @type {string} */ (event.data.to));
 160         }
 161         this._inspectedPagePlaceholder.update();
 162     },
 163
 164     /**
 165      * @param {string} dockSide
 166      */
 167     _updateForDocked: function(dockSide)
 168     {
 169         this._rootSplitView.setVertical(dockSide === WebInspector.DockController.State.DockedToLeft || dockSide === WebInspector.DockController.State.DockedToRight);
 170         this._rootSplitView.setSecondIsSidebar(dockSide === WebInspector.DockController.State.DockedToRight || dockSide === WebInspector.DockController.State.DockedToBottom);
 171         this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), true);
 172         this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), dockSide === WebInspector.DockController.State.DockedToBottom);
 173         this._rootSplitView.showBoth();
 174     },
 175
 176     _updateForUndocked: function()
 177     {
 178         this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), false);
 179         this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), false);
 180         this._rootSplitView.hideMain();
 181     },
 182
 183     _isDocked: function()
 184     {
 185         return WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
 186     },
 187
 188     /**
 189      * @param {boolean} toolbox
 190      * @param {!WebInspector.Event} event
 191      */
 192     _onSetInspectedPageBounds: function(toolbox, event)
 193     {
 194         if (this._changingDockSide || (this._isDocked() === toolbox))
 195             return;
 196         if (!window.innerWidth || !window.innerHeight)
 197             return;
 198         var bounds = /** @type {{x: number, y: number, width: number, height: number}} */ (event.data);
 199         console.timeStamp("AdvancedApp.setInspectedPageBounds");
 200         InspectorFrontendHost.setInspectedPageBounds(bounds);
 201     },
 202
 203     __proto__: WebInspector.App.prototype
 204 };
 205
 206 /**
 207  * @constructor
 208  * @implements {WebInspector.StatusBarItem.Provider}
 209  */
 210 WebInspector.AdvancedApp.DeviceCounter = function()
 211 {
 212     if (!WebInspector.experimentsSettings.devicesPanel.isEnabled() || !(WebInspector.app instanceof WebInspector.AdvancedApp)) {
 213         this._counter = null;
 214         return;
 215     }
 216
 217     this._counter = new WebInspector.StatusBarCounter(["device-icon-small"]);
 218     this._counter.addEventListener("click", showDevices);
 219
 220     function showDevices()
 221     {
 222         WebInspector.inspectorView.showViewInDrawer("devices", true);
 223     }
 224
 225     InspectorFrontendHost.setDeviceCountUpdatesEnabled(true);
 226     InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.DeviceCountUpdated, this._onDeviceCountUpdated, this);
 227 }
 228
 229 WebInspector.AdvancedApp.DeviceCounter.prototype = {
 230     /**
 231      * @param {!WebInspector.Event} event
 232      */
 233     _onDeviceCountUpdated: function(event)
 234     {
 235         var count = /** @type {number} */ (event.data);
 236         this._counter.setCounter("device-icon-small", count, WebInspector.UIString(count > 1 ? "%d devices found" : "%d device found", count));
 237         WebInspector.inspectorView.toolbarItemResized();
 238     },
 239
 240     /**
 241      * @return {?WebInspector.StatusBarItem}
 242      */
 243     item: function()
 244     {
 245         return this._counter;
 246     }
 247 }
 248
 249 /**
 250  * @constructor
 251  * @implements {WebInspector.StatusBarItem.Provider}
 252  */
 253 WebInspector.AdvancedApp.EmulationButtonProvider = function()
 254 {
 255 }
 256
 257 WebInspector.AdvancedApp.EmulationButtonProvider.prototype = {
 258     /**
 259      * @return {?WebInspector.StatusBarItem}
 260      */
 261     item: function()
 262     {
 263         if (!(WebInspector.app instanceof WebInspector.AdvancedApp))
 264             return null;
 265         return WebInspector.app._toggleEmulationButton || null;
 266     }
 267 }
 268
 269 /**
 270  * @constructor
 271  * @implements {WebInspector.ActionDelegate}
 272  */
 273 WebInspector.AdvancedApp.ToggleDeviceModeActionDelegate = function()
 274 {
 275 }
 276
 277 WebInspector.AdvancedApp.ToggleDeviceModeActionDelegate.prototype = {
 278     /**
 279      * @return {boolean}
 280      */
 281     handleAction: function()
 282     {
 283         if (!WebInspector.overridesSupport.responsiveDesignAvailable())
 284             return false;
 285         if (!(WebInspector.app instanceof WebInspector.AdvancedApp))
 286             return false;
 287         WebInspector.app._toggleEmulationEnabled();
 288         return true;
 289     }
 290 }