[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..6bcd4a1d290bb08ba1865f5b740fb7ed72af79e8 100644
--- a/Source/devtools/front_end/Drawer.js
+++ b/Source/devtools/front_end/Drawer.js
@@ -55,8 +55,18 @@ 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._overlayCloseTimeout = 500;

[pfeldman, 2013/04/27 08:05:45]

Why is there a timeout?

[Dmitry Zvorygin, 2013/04/29 16:02:35]

Removed. Actually works fine even without timeout, and other IDE I've checked
has zero timeout.

+
 WebInspector.Drawer.AnimationType = {
         Immediately: 0,
         Normal: 1,
@@ -184,6 +194,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), WebInspector.Drawer._overlayCloseTimeout);
+    },
+
     resize: function()
     {
         if (!this.visible)
@@ -250,7 +275,7 @@ WebInspector.Drawer.prototype = {
         this._savedHeight = this.element.offsetHeight;
         delete this._statusBarDragOffset;
 
-        event.consume();
+        event.consume(true);
     }
 }