[DevTools] Apps implementation.

Source/devtools/front_end/main/App.js

Index: Source/devtools/front_end/main/App.js
diff --git a/Source/devtools/front_end/main/App.js b/Source/devtools/front_end/main/App.js
new file mode 100644
index 0000000000000000000000000000000000000000..9a551d50411ee360909cc76b8c6d3e5a5368b244
--- /dev/null
+++ b/Source/devtools/front_end/main/App.js
@@ -0,0 +1,254 @@
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @constructor
+ */
+WebInspector.App = function()
+{
+};
+
+WebInspector.App.prototype = {
+    createRootView: function()
+    {
+    },
+
+    createGlobalStatusBarItems: function()
+    {
+    },
+
+    presentUI: function()
+    {
+        WebInspector.inspectorView.showInitialPanel();
+
+        WebInspector.overridesSupport.applyInitialOverrides();
+        if (WebInspector.overridesSupport.hasActiveOverrides())
+            WebInspector.inspectorView.showViewInDrawer("emulation", true);
+    },
+
+    appendInspectStatusBarItem: function()
+    {
+        if (WebInspector.inspectElementModeController)
+            WebInspector.inspectorView.appendToLeftToolbar(WebInspector.inspectElementModeController.toggleSearchButton.element);
+    },
+
+    appendSettingsStatusBarItem: function()
+    {
+        WebInspector.inspectorView.appendToRightToolbar(WebInspector.settingsController.statusBarItem);
+    }
+};
+
+/**
+ * @type {!WebInspector.App}
+ */
+WebInspector.app;
+
+
+/**
+ * @constructor
+ * @extends {WebInspector.App}
+ */
+WebInspector.SimpleApp = function()
+{
+    WebInspector.App.call(this);
+};
+
+WebInspector.SimpleApp.prototype = {
+    createGlobalStatusBarItems: function()
+    {
+        this.appendInspectStatusBarItem();
+        this.appendSettingsStatusBarItem();
+    },
+
+    createRootView: function()
+    {
+        var rootView = new WebInspector.RootView();
+        WebInspector.inspectorView.show(rootView.element);
+        rootView.attachToBody();
+    },
+
+    __proto__: WebInspector.App.prototype
+};
+
+
+/**
+ * @constructor
+ * @extends {WebInspector.App}
+ */
+WebInspector.AdvancedApp = function()

[pfeldman, 2014/05/28 15:12:01]

These all should be different files.

+{
+    WebInspector.App.call(this);
+};
+
+WebInspector.AdvancedApp.prototype = {
+    createGlobalStatusBarItems: function()
+    {
+        this.appendInspectStatusBarItem();
+
+        if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
+            this._toggleResponsiveDesignButton = new WebInspector.StatusBarButton(WebInspector.UIString("Responsive design mode."), "responsive-design-status-bar-item");
+            this._toggleResponsiveDesignButton.toggled = WebInspector.overridesSupport.settings.overrideDeviceMetrics.get();
+            this._toggleResponsiveDesignButton.addEventListener("click", this._toggleResponsiveDesign, this);
+            WebInspector.inspectorView.appendToLeftToolbar(this._toggleResponsiveDesignButton.element);
+            WebInspector.overridesSupport.settings.overrideDeviceMetrics.addChangeListener(this._overrideDeviceMetricsChanged, this);
+        }
+
+        this.appendSettingsStatusBarItem();
+        WebInspector.inspectorView.appendToRightToolbar(/** @type {!Element} */ (WebInspector.dockController.element));
+    },
+
+    _toggleResponsiveDesign: function()
+    {
+        WebInspector.overridesSupport.settings.overrideDeviceMetrics.set(!this._toggleResponsiveDesignButton.toggled);
+    },
+
+    _overrideDeviceMetricsChanged: function()
+    {
+        this._toggleResponsiveDesignButton.toggled = WebInspector.overridesSupport.settings.overrideDeviceMetrics.get();

[pfeldman, 2014/05/28 15:12:01]

I'm changing this as well...

+    },
+
+    createRootView: function()
+    {
+        var rootView = new WebInspector.RootView();
+
+        this._rootSplitView = new WebInspector.SplitView(false, true, WebInspector.dockController.canDock() ? "InspectorView.splitViewState" : "InspectorView.dummySplitViewState", 300, 300);
+        this._rootSplitView.show(rootView.element);
+
+        WebInspector.inspectorView.show(this._rootSplitView.sidebarElement());
+
+        this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
+        this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds, this);
+        if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
+            var responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
+            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);
+        WebInspector.dockController.addEventListener(WebInspector.DockController.Events.AfterDockSideChanged, this._onAfterDockSideChange, this);
+        this._onDockSideChange();
+
+        rootView.attachToBody();
+    },
+
+    _onBeforeDockSideChange: function()
+    {
+        this._changingDockSide = true;
+    },
+
+    _onDockSideChange: function()
+    {
+        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();
+            return;
+        }
+
+        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);
+        this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), dockSide === WebInspector.DockController.State.DockedToBottom);
+        this._rootSplitView.showBoth();
+    },
+
+    _onAfterDockSideChange: function()
+    {
+        this._changingDockSide = false;
+        this._inspectedPagePlaceholder.update();
+    },
+
+    _isDocked: function()
+    {
+        return WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onSetInspectedPageBounds: function(event)
+    {
+        if (this._changingDockSide || !this._isDocked())
+            return;
+        var bounds = /** @type {{x: number, y: number, width: number, height: number}} */ (event.data);
+        InspectorFrontendHost.setInspectedPageBounds(bounds);
+    },
+
+    __proto__: WebInspector.App.prototype
+};
+
+
+/**
+ * @constructor
+ * @extends {WebInspector.App}
+ */
+WebInspector.ScreencastApp = function()
+{
+    WebInspector.App.call(this);
+
+    this._currentScreencastState = WebInspector.settings.createSetting("currentScreencastState", "");
+    this._lastScreencastState = WebInspector.settings.createSetting("lastScreencastState", "");
+    this._toggleScreencastButton = new WebInspector.StatusBarStatesSettingButton(
+        "screencast-status-bar-item",
+        ["disabled", "left", "top"],
+        [WebInspector.UIString("Disable screencast."), WebInspector.UIString("Switch to portrait screencast."), WebInspector.UIString("Switch to landscape screencast.")],
+        this._currentScreencastState,
+        this._lastScreencastState,
+        this._onStatusBarButtonStateChanged.bind(this));
+};
+
+WebInspector.ScreencastApp.prototype = {
+    createGlobalStatusBarItems: function()
+    {
+        this.appendInspectStatusBarItem();
+        this.appendSettingsStatusBarItem();
+        WebInspector.inspectorView.appendToRightToolbar(this._toggleScreencastButton.element);
+    },
+
+    createRootView: function()
+    {
+        var rootView = new WebInspector.RootView();
+
+        this._rootSplitView = new WebInspector.SplitView(false, true, "InspectorView.screencastSplitViewState", 300, 300);
+        this._rootSplitView.show(rootView.element);
+
+        WebInspector.inspectorView.show(this._rootSplitView.sidebarElement());
+        var target = /** @type {!WebInspector.Target} */ (WebInspector.targetManager.activeTarget());
+        this._screencastView = new WebInspector.ScreencastView(target);
+        this._screencastView.show(this._rootSplitView.mainElement());
+
+        this._onStatusBarButtonStateChanged("disabled");
+        rootView.attachToBody();
+    },
+
+    presentUI: function()
+    {
+        WebInspector.App.prototype.presentUI.call(this);
+        this._screencastView.initialize();
+        this._toggleScreencastButton.toggleInitialState();
+    },
+
+    /**
+     * @param {string} state
+     */
+    _onStatusBarButtonStateChanged: function(state)
+    {
+        if (state === "disabled") {
+            this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), false);
+            this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), false);
+            this._rootSplitView.hideMain();
+            return;
+        }
+
+        this._rootSplitView.setVertical(state === "left");
+        this._rootSplitView.setSecondIsSidebar(true);
+        this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), true);
+        this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), state === "top");
+        this._rootSplitView.showBoth();
+    },
+
+    __proto__: WebInspector.App.prototype
+};