[DevTools] Close drawer on blur after short timeout.

Source/devtools/front_end/Drawer.js

Index: Source/devtools/front_end/Drawer.js
diff --git a/Source/devtools/front_end/Drawer.js b/Source/devtools/front_end/Drawer.js
index 3a67de1e6f1c6f30ccc0a02f07c01f6cb48ecf7b..4b7da37be35b32a1d00c78ebfd0c72709c0cc77f 100644
--- a/Source/devtools/front_end/Drawer.js
+++ b/Source/devtools/front_end/Drawer.js
@@ -55,6 +55,14 @@ WebInspector.Drawer = function()
     this._elementToAdjust = drawerIsOverlay ?  this._floatingStatusBarContainer : this._mainElement;
 
     document.body.enableStyleClass("drawer-overlay", drawerIsOverlay);
+
+    if (drawerIsOverlay) {
+        this._floatingStatusBarContainer.addEventListener("focusin", this._onFocus.bind(this));
+        this._floatingStatusBarContainer.addEventListener("focusout", this._onBlur.bind(this));
+
+        this.element.addEventListener("focusin", this._onFocus.bind(this));
+        this.element.addEventListener("focusout", this._onBlur.bind(this));
+    }
 }
 
 WebInspector.Drawer.AnimationType = {
@@ -184,6 +192,21 @@ WebInspector.Drawer.prototype = {
             setTimeout(adjustStyles.bind(this), 0);
     },
 
+    _onFocus: function(event)
+    {
+        if (this._closeTimeout) {
+            clearTimeout(this._closeTimeout);
+            delete this._closeTimeout;
+        }
+    },
+
+    _onBlur: function(event)
+    {
+        if (this._closeTimeout)
+            clearTimeout(this._closeTimeout);
+        this._closeTimeout = setTimeout( WebInspector.closeDrawer.bind(WebInspector, WebInspector.Drawer.AnimationType.Normal), 0);
+    },
+
     resize: function()
     {
         if (!this.visible)
@@ -250,7 +273,7 @@ WebInspector.Drawer.prototype = {
         this._savedHeight = this.element.offsetHeight;
         delete this._statusBarDragOffset;
 
-        event.consume();
+        event.consume(true);
     }
 }