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

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

Index: third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
index 89e52eae446964fb13a503cc266f0c8e322263b8..e5f6a91ee6d8f00c3a8fef02d6e4379ffcce4843 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
@@ -204,21 +204,26 @@ WebInspector.GlassPane = function(document, dimmed)
 {
     this.element = createElement("div");
     var background = dimmed ? "rgba(255, 255, 255, 0.5)" : "transparent";
-    this.element.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;background-color:" + background + ";z-index:3000;overflow:hidden;";
+    var zIndex = (3 + WebInspector._glassPanes.length) * 1000;  // Deliberately starts with 3000 to hide other z-indexed elements below.
+    this.element.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;background-color:" + background + ";z-index:" + zIndex + ";overflow:hidden;";
     document.body.appendChild(this.element);
-    WebInspector._glassPane = this;
+    WebInspector._glassPanes.push(this);
 }
 
 WebInspector.GlassPane.prototype = {
     dispose: function()
     {
-        delete WebInspector._glassPane;
+        console.assert(this === WebInspector._glassPanes.peekLast());
+        WebInspector._glassPanes.pop();
         if (WebInspector.GlassPane.DefaultFocusedViewStack.length)
             WebInspector.GlassPane.DefaultFocusedViewStack.peekLast().focus();
         this.element.remove();
     }
 }
 
+/** @type {!Array<!WebInspector.GlassPane>} */
+WebInspector._glassPanes = [];
+
 /**
  * @type {!Array.<!WebInspector.Widget|!WebInspector.Dialog>}
  */
@@ -765,23 +770,23 @@ WebInspector._isTextEditingElement = function(element)
  */
 WebInspector.setCurrentFocusElement = function(x)
 {
-    if (WebInspector._glassPane && x && !WebInspector._glassPane.element.isAncestor(x))
+    if (WebInspector._glassPanes.length && x && !WebInspector._glassPanes.peekLast().element.isAncestor(x))
         return;
     if (WebInspector._currentFocusElement !== x)
         WebInspector._previousFocusElement = WebInspector._currentFocusElement;
     WebInspector._currentFocusElement = x;
 
-    if (WebInspector._currentFocusElement) {
-        WebInspector._currentFocusElement.focus();
+    if (x) {
+        x.focus();
 
         // Make a caret selection inside the new element if there isn't a range selection and there isn't already a caret selection inside.
         // This is needed (at least) to remove caret from console when focus is moved to some element in the panel.
         // The code below should not be applied to text fields and text areas, hence _isTextEditingElement check.
         var selection = x.getComponentSelection();
-        if (!WebInspector._isTextEditingElement(WebInspector._currentFocusElement) && selection.isCollapsed && !WebInspector._currentFocusElement.isInsertionCaretInside()) {
-            var selectionRange = WebInspector._currentFocusElement.ownerDocument.createRange();
-            selectionRange.setStart(WebInspector._currentFocusElement, 0);
-            selectionRange.setEnd(WebInspector._currentFocusElement, 0);
+        if (!WebInspector._isTextEditingElement(x) && selection.isCollapsed && !x.isInsertionCaretInside()) {
+            var selectionRange = x.ownerDocument.createRange();
+            selectionRange.setStart(x, 0);
+            selectionRange.setEnd(x, 0);
 
             selection.removeAllRanges();
             selection.addRange(selectionRange);