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     /**
  48      * @param {!Document} document
  49      * @override
  50      */
  51     presentUI: function(document)
  52     {
  53         var rootView = new WebInspector.RootView();
  54
  55         this._rootSplitView = new WebInspector.SplitView(false, true, "InspectorView.splitViewState", 300, 300, true);
  56         this._rootSplitView.show(rootView.element);
  57
  58         WebInspector.inspectorView.show(this._rootSplitView.sidebarElement());
  59
  60         this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
  61         this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds.bind(this, false), this);
  62         this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
  63         this._responsiveDesignView.show(this._rootSplitView.mainElement());
  64
  65         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._onBeforeDockSideChange, this);
  66         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._onDockSideChange, this);
  67         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.AfterDockSideChanged, this._onAfterDockSideChange, this);
  68         this._onDockSideChange();
  69
  70         this._overridesWarningUpdated();
  71
  72         WebInspector.inspectorView.showInitialPanel();
  73         console.timeStamp("AdvancedApp.attachToBody");
  74         rootView.attachToDocument(document);
  75         this._inspectedPagePlaceholder.update();
  76     },
  77
  78     /**
  79      * @param {!WebInspector.Event} event
  80      */
  81     _openToolboxWindow: function(event)
  82     {
  83         if (/** @type {string} */ (event.data.to) !== WebInspector.DockController.State.Undocked)
  84             return;
  85
  86         if (this._toolboxWindow)
  87             return;
  88
  89         var url = window.location.href.replace("devtools.html", "toolbox.html");
  90         this._toolboxWindow = window.open(url, undefined);
  91     },
  92
  93     /**
  94      * @param {!Document} toolboxDocument
  95      */
  96     toolboxLoaded: function(toolboxDocument)
  97     {
  98         WebInspector.initializeUIUtils(toolboxDocument.defaultView);
  99         WebInspector.installComponentRootStyles(/** @type {!Element} */ (toolboxDocument.body));
 100         WebInspector.ContextMenu.installHandler(toolboxDocument);
 101
 102         var rootView = new WebInspector.RootView();
 103         var inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
 104         inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds.bind(this, true));
 105         this._toolboxResponsiveDesignView = new WebInspector.ResponsiveDesignView(inspectedPagePlaceholder);
 106         this._toolboxResponsiveDesignView.show(rootView.element);
 107         rootView.attachToDocument(toolboxDocument);
 108
 109         this._updatePageResizer();
 110     },
 111
 112     /**
 113      * @return {!InspectorFrontendHostAPI}
 114      */
 115     inspectorFrontendHost: function()
 116     {
 117         return window.InspectorFrontendHost;
 118     },
 119
 120     _updatePageResizer: function()
 121     {
 122         if (this._isDocked())
 123             this._responsiveDesignView.updatePageResizer();
 124         else if (this._toolboxResponsiveDesignView)
 125             this._toolboxResponsiveDesignView.updatePageResizer();
 126     },
 127
 128     /**
 129      * @param {!WebInspector.Event} event
 130      */
 131     _onBeforeDockSideChange: function(event)
 132     {
 133         if (/** @type {string} */ (event.data.to) === WebInspector.DockController.State.Undocked && this._toolboxResponsiveDesignView) {
 134             // Hide inspectorView and force layout to mimic the undocked state.
 135             this._rootSplitView.hideSidebar();
 136             this._inspectedPagePlaceholder.update();
 137         }
 138
 139         this._changingDockSide = true;
 140     },
 141
 142     /**
 143      * @param {!WebInspector.Event=} event
 144      */
 145     _onDockSideChange: function(event)
 146     {
 147         this._updatePageResizer();
 148
 149         var toDockSide = event ? /** @type {string} */ (event.data.to) : WebInspector.dockController.dockSide();
 150         if (toDockSide === WebInspector.DockController.State.Undocked) {
 151             this._updateForUndocked();
 152         } else if (this._toolboxResponsiveDesignView && event && /** @type {string} */ (event.data.from) === WebInspector.DockController.State.Undocked) {
 153             // Don't update yet for smooth transition.
 154             this._rootSplitView.hideSidebar();
 155         } else {
 156             this._updateForDocked(toDockSide);
 157         }
 158     },
 159
 160     /**
 161      * @param {!WebInspector.Event} event
 162      */
 163     _onAfterDockSideChange: function(event)
 164     {
 165         // We may get here on the first dock side change while loading without BeforeDockSideChange.
 166         if (!this._changingDockSide)
 167             return;
 168         this._changingDockSide = false;
 169         if (/** @type {string} */ (event.data.from) === WebInspector.DockController.State.Undocked) {
 170             // Restore docked layout in case of smooth transition.
 171             this._updateForDocked(/** @type {string} */ (event.data.to));
 172         }
 173         this._inspectedPagePlaceholder.update();
 174     },
 175
 176     /**
 177      * @param {string} dockSide
 178      */
 179     _updateForDocked: function(dockSide)
 180     {
 181         this._rootSplitView.setVertical(dockSide === WebInspector.DockController.State.DockedToLeft || dockSide === WebInspector.DockController.State.DockedToRight);
 182         this._rootSplitView.setSecondIsSidebar(dockSide === WebInspector.DockController.State.DockedToRight || dockSide === WebInspector.DockController.State.DockedToBottom);
 183         this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), true);
 184         this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), dockSide === WebInspector.DockController.State.DockedToBottom);
 185         this._rootSplitView.showBoth();
 186     },
 187
 188     _updateForUndocked: function()
 189     {
 190         this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), false);
 191         this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), false);
 192         this._rootSplitView.hideMain();
 193     },
 194
 195     _isDocked: function()
 196     {
 197         return WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
 198     },
 199
 200     /**
 201      * @param {boolean} toolbox
 202      * @param {!WebInspector.Event} event
 203      */
 204     _onSetInspectedPageBounds: function(toolbox, event)
 205     {
 206         if (this._changingDockSide || (this._isDocked() === toolbox))
 207             return;
 208         if (!window.innerWidth || !window.innerHeight)
 209             return;
 210         var bounds = /** @type {{x: number, y: number, width: number, height: number}} */ (event.data);
 211         console.timeStamp("AdvancedApp.setInspectedPageBounds");
 212         InspectorFrontendHost.setInspectedPageBounds(bounds);
 213     },
 214
 215     __proto__: WebInspector.App.prototype
 216 };
 217
 218 /**
 219  * @constructor
 220  * @implements {WebInspector.StatusBarItem.Provider}
 221  */
 222 WebInspector.AdvancedApp.DeviceCounter = function()
 223 {
 224     if (!Runtime.experiments.isEnabled("devicesPanel") || !(WebInspector.app instanceof WebInspector.AdvancedApp)) {
 225         this._counter = null;
 226         return;
 227     }
 228
 229     this._counter = new WebInspector.StatusBarCounter(["device-icon-small"]);
 230     this._counter.addEventListener("click", showDevices);
 231
 232     function showDevices()
 233     {
 234         WebInspector.inspectorView.showViewInDrawer("devices", true);
 235     }
 236
 237     InspectorFrontendHost.setDeviceCountUpdatesEnabled(true);
 238     InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.DeviceCountUpdated, this._onDeviceCountUpdated, this);
 239 }
 240
 241 WebInspector.AdvancedApp.DeviceCounter.prototype = {
 242     /**
 243      * @param {!WebInspector.Event} event
 244      */
 245     _onDeviceCountUpdated: function(event)
 246     {
 247         var count = /** @type {number} */ (event.data);
 248         this._counter.setCounter("device-icon-small", count, WebInspector.UIString(count > 1 ? "%d devices found" : "%d device found", count));
 249         WebInspector.inspectorView.toolbarItemResized();
 250     },
 251
 252     /**
 253      * @return {?WebInspector.StatusBarItem}
 254      */
 255     item: function()
 256     {
 257         return this._counter;
 258     }
 259 }
 260
 261 /**
 262  * @constructor
 263  * @implements {WebInspector.StatusBarItem.Provider}
 264  */
 265 WebInspector.AdvancedApp.EmulationButtonProvider = function()
 266 {
 267 }
 268
 269 WebInspector.AdvancedApp.EmulationButtonProvider.prototype = {
 270     /**
 271      * @return {?WebInspector.StatusBarItem}
 272      */
 273     item: function()
 274     {
 275         if (!(WebInspector.app instanceof WebInspector.AdvancedApp))
 276             return null;
 277         return WebInspector.app._toggleEmulationButton || null;
 278     }
 279 }
 280
 281 /**
 282  * @constructor
 283  * @implements {WebInspector.ActionDelegate}
 284  */
 285 WebInspector.AdvancedApp.ToggleDeviceModeActionDelegate = function()
 286 {
 287 }
 288
 289 WebInspector.AdvancedApp.ToggleDeviceModeActionDelegate.prototype = {
 290     /**
 291      * @return {boolean}
 292      */
 293     handleAction: function()
 294     {
 295         if (!WebInspector.overridesSupport.responsiveDesignAvailable())
 296             return false;
 297         if (!(WebInspector.app instanceof WebInspector.AdvancedApp))
 298             return false;
 299         WebInspector.app._toggleEmulationEnabled();
 300         return true;
 301     }
 302 }