[DevTools] Close drawer on blur after short timeout.

Source/devtools/front_end/Drawer.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 37 matching lines @@
     this.element.appendChild(this._drawerContentsElement);
     this._viewStatusBar = document.createElement("div");
     this._viewStatusBar.addEventListener("webkitTransitionEnd", this.immediatelyFinishAnimation.bind(this), false);
     this._viewStatusBar.style.opacity = 0;
     this._bottomStatusBar = document.getElementById("bottom-status-bar-container");
 
     var drawerIsOverlay = WebInspector.experimentsSettings.drawerOverlay.isEnabled();
     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,
         Slow: 2
 }
 
 WebInspector.Drawer.prototype = {
     get visible()
     {
         return !!this._view;
@@ skipping 107 matching lines @@
             this._viewStatusBar.style.opacity = 0;
         }
 
         if (animationType === WebInspector.Drawer.AnimationType.Immediately) {
             adjustStyles.call(this);
             this.immediatelyFinishAnimation();
         } else
             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)
             return;
 
         this._view.storeScrollPositions();
         var height = this._constrainHeight(parseInt(this.element.style.height, 10));
         this._elementToAdjust.style.bottom = height + "px";
         this.element.style.height = height + "px";
         this._view.doResize();
@@ skipping 46 matching lines @@
         this._view.doResize();
 
         event.consume(true);
     },
 
     _endStatusBarDragging: function(event)
     {
         this._savedHeight = this.element.offsetHeight;
         delete this._statusBarDragOffset;
 
-        event.consume();
+        event.consume(true);
     }
 }
 
 /**
  * @type {WebInspector.Drawer}
  */
 WebInspector.drawer = null;