[DevTools] Remove HelpScreen, turn SettingsScreen into dialog and web component.

third_party/WebKit/Source/devtools/front_end/settings/SettingsScreen.js

 /*
  * Copyright (C) 2013 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 12 matching lines @@
  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
- * @param {function()} onHide
- * @extends {WebInspector.HelpScreen}
+ * @extends {WebInspector.VBox}
  */
-WebInspector.SettingsScreen = function(onHide)
+WebInspector.SettingsScreen = function()
 {
-    WebInspector.HelpScreen.call(this);
+    WebInspector.VBox.call(this, true);
+    this.registerRequiredCSS("settings/settingsScreen.css");
     this.element.id = "settings-screen";
 
-    /** @type {function()} */
-    this._onHide = onHide;
-
-    this._contentElement = this.element.createChild("div", "help-window-main");
+    this.contentElement.tabIndex = 0;
+    this.contentElement.classList.add("help-window-main");
+    this.contentElement.classList.add("vbox");
     var settingsLabelElement = createElementWithClass("div", "help-window-label");
     settingsLabelElement.createTextChild(WebInspector.UIString("Settings"));
-    this._contentElement.appendChild(this.createCloseButton());
 
     this._tabbedPane = new WebInspector.TabbedPane();
     this._tabbedPane.insertBeforeTabStrip(settingsLabelElement);
     this._tabbedPane.setShrinkableTabs(false);
     this._tabbedPane.setVerticalTabLayout(true);
     this._tabbedPane.appendTab("general", WebInspector.UIString("General"), new WebInspector.GenericSettingsTab());
     this._tabbedPane.appendTab("workspace", WebInspector.UIString("Workspace"), new WebInspector.WorkspaceSettingsTab());
     if (Runtime.experiments.supportEnabled())
         this._tabbedPane.appendTab("experiments", WebInspector.UIString("Experiments"), new WebInspector.ExperimentsSettingsTab());
     this._tabbedPaneController = new WebInspector.ExtensibleTabbedPaneController(this._tabbedPane, "settings-view");
     this._tabbedPane.appendTab("shortcuts", WebInspector.UIString("Shortcuts"), WebInspector.shortcutsScreen.createShortcutsTabView());
 
     this.element.addEventListener("keydown", this._keyDown.bind(this), false);
     this._developerModeCounter = 0;
+    this.setDefaultFocusedElement(this.contentElement);
 }
 
 WebInspector.SettingsScreen.prototype = {
     /**
      * @override
      */
     wasShown: function()
     {
         this._tabbedPane.selectTab("general");
-        this._tabbedPane.show(this._contentElement);
-        WebInspector.HelpScreen.prototype.wasShown.call(this);
+        this._tabbedPane.show(this.contentElement);
+        WebInspector.VBox.prototype.wasShown.call(this);
     },
 
     /**
      * @param {string} name
      */
     selectTab: function(name)
     {
         this._tabbedPane.selectTab(name);
     },
 
     /**
-     * @override
-     * @return {boolean}
-     */
-    isClosingKey: function(keyCode)
-    {
-        return [
-            WebInspector.KeyboardShortcut.Keys.Enter.code,
-            WebInspector.KeyboardShortcut.Keys.Esc.code,
-        ].indexOf(keyCode) >= 0;
-    },
-
-    /**
-     * @override
-     */
-    willHide: function()
-    {
-        this._onHide();
-        WebInspector.HelpScreen.prototype.willHide.call(this);
-    },
-
-    /**
      * @param {!Event} event
      */
     _keyDown: function(event)
     {
         var shiftKeyCode = 16;
         if (event.keyCode === shiftKeyCode && ++this._developerModeCounter > 5)
             this.element.classList.add("settings-developer-mode");
     },
 
-    __proto__: WebInspector.HelpScreen.prototype
+    __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {string} name
  * @param {string=} id
  */
 WebInspector.SettingsTab = function(name, id)
 {
@@ skipping 428 matching lines @@
     __proto__: WebInspector.SettingsTab.prototype
 }
 
 /**
  * @constructor
  */
 WebInspector.SettingsController = function()
 {
     /** @type {?WebInspector.SettingsScreen} */
     this._settingsScreen;
-    this._resizeBound = this._resize.bind(this);
 }
 
 WebInspector.SettingsController.prototype = {
-    _onHideSettingsScreen: function()
-    {
-        var window = this._settingsScreen.element.ownerDocument.defaultView;
-        window.removeEventListener("resize", this._resizeBound, false);
-        delete this._settingsScreenVisible;
-    },
-
     /**
      * @param {string=} name
      */
     showSettingsScreen: function(name)
     {
         if (!this._settingsScreen)
-            this._settingsScreen = new WebInspector.SettingsScreen(this._onHideSettingsScreen.bind(this));
-        this._settingsScreen.showModal();
+            this._settingsScreen = new WebInspector.SettingsScreen();
+
+        var dialog = new WebInspector.Dialog();
+        dialog.addCloseButton();
+        this._settingsScreen.show(dialog.element);
+        dialog.show();
+
         if (name)
             this._settingsScreen.selectTab(name);
-        this._settingsScreenVisible = true;
-        var window = this._settingsScreen.element.ownerDocument.defaultView;
-        window.addEventListener("resize", this._resizeBound, false);
-    },
-
-    _resize: function()
-    {
-        if (this._settingsScreen && this._settingsScreen.isShowing())
-            this._settingsScreen.doResize();
     }
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ActionDelegate}
  */
 WebInspector.SettingsController.ActionDelegate = function() { }
 
 WebInspector.SettingsController.ActionDelegate.prototype = {
@@ skipping 564 matching lines @@
             var columnId = columns[i];
             var editElement = this._addInputElements.get(columnId);
             this._setEditElementValue(editElement, "");
         }
     },
 
     __proto__: WebInspector.SettingsList.prototype
 }
 
 WebInspector._settingsController = new WebInspector.SettingsController();