Changeset 109348 in webkit

Timestamp:

Mar 1, 2012, 8:16:54 AM (15 years ago)

Author:

pfeldman@chromium.org

Message:

Web Inspector: hide color picker on Esc and Enter.
​https://bugs.webkit.org/show_bug.cgi?id=79915

Reviewed by Vsevolod Vlasov.

• inspector/front-end/Spectrum.js:

(WebInspector.Spectrum.prototype.reposition):
(WebInspector.Spectrum.prototype.hide):
(WebInspector.Spectrum.prototype._onKeyDown):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/PropertiesSection.js (modified) (1 diff)
• inspector/front-end/Spectrum.js (modified) (3 diffs)
• inspector/front-end/treeoutline.js (modified) (3 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-03-01  Pavel Feldman  <pfeldman@google.com>
+
+        Web Inspector: hide color picker on Esc and Enter.
+        https://bugs.webkit.org/show_bug.cgi?id=79915
+
+        Reviewed by Vsevolod Vlasov.
+
+        * inspector/front-end/Spectrum.js:
+        (WebInspector.Spectrum.prototype.reposition):
+        (WebInspector.Spectrum.prototype.hide):
+        (WebInspector.Spectrum.prototype._onKeyDown):
+
 2012-03-01  Huang Dongsung  <luxtella@company100.net>
 

trunk/Source/WebCore/inspector/front-end/PropertiesSection.js

@@ -40 +40 @@
     this.propertiesElement = document.createElement("ol");
     this.propertiesElement.className = "properties properties-tree monospace";
-    this.propertiesElement.tabIndex = 0;
-    this.propertiesTreeOutline = new TreeOutline(this.propertiesElement);
+    this.propertiesTreeOutline = new TreeOutline(this.propertiesElement, true);
+    this.propertiesTreeOutline.setFocusable(false);
     this.propertiesTreeOutline.section = this;
 

trunk/Source/WebCore/inspector/front-end/Spectrum.js

@@ -39 +39 @@
     this._containerElement = document.createElement('div');
     this._containerElement.className = "spectrum-container";
+    this._containerElement.tabIndex = 0;
+    this._containerElement.addEventListener("keydown", this._onKeyDown.bind(this), false);
 
     var topElement = this._containerElement.createChild("div", "spectrum-top");
@@ -406 +408 @@
     reposition: function(element)
     {
+        if (!this._previousFocusElement)
+            this._previousFocusElement = WebInspector.currentFocusElement();
         this._popover.show(this._containerElement, element);
+        WebInspector.markBeingEdited(this._containerElement, true);    
+        WebInspector.setCurrentFocusElement(this._containerElement);
     },
 
     hide: function()
     {
+        WebInspector.markBeingEdited(this._containerElement, false);
         this._popover.hide();
 
@@ -418 +425 @@
         this.dispatchEventToListeners(WebInspector.Spectrum.Events.Hidden);
 
+        WebInspector.setCurrentFocusElement(this._previousFocusElement);
+        delete this._previousFocusElement;
+
         delete this.anchorElement;
-    }
-};
+    },
+
+    _onKeyDown: function(event)
+    {
+        if (event.keyIdentifier === "Enter" || event.keyIdentifier === "U+001B") { // Escape key
+            this.hide();
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+}
 
 WebInspector.Spectrum.prototype.__proto__ = WebInspector.Object.prototype;

trunk/Source/WebCore/inspector/front-end/treeoutline.js

@@ -29 +29 @@
 /**
  * @constructor
+ * @param {boolean=} nonFocusable
  */
-function TreeOutline(listNode)
+function TreeOutline(listNode, nonFocusable)
 {
     /**
@@ -49 +50 @@
     this.searchInputElement = null;
 
-    this._childrenListNode.tabIndex = 0;
+    this.setFocusable(!nonFocusable);
     this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);
     this._childrenListNode.addEventListener("keypress", this._treeKeyPress.bind(this), true);
@@ -55 +56 @@
     this._treeElementsMap = new Map();
     this._expandedStateMap = new Map();
+}
+
+TreeOutline.prototype.setFocusable = function(focusable)
+{
+    if (focusable)
+        this._childrenListNode.setAttribute("tabIndex", 0);
+    else
+        this._childrenListNode.removeAttribute("tabIndex");
 }