Title: [109006] trunk/Source/WebCore
Revision
109006
Author
vse...@chromium.org
Date
2012-02-27 10:15:43 -0800 (Mon, 27 Feb 2012)

Log Message

Web Inspector: Scripts navigator overlay should not consume mouse actions.
https://bugs.webkit.org/show_bug.cgi?id=79674

Reviewed by Pavel Feldman.

* inspector/front-end/Panel.js:
(WebInspector.Panel.prototype.registerShortcut):
(WebInspector.Panel.prototype.unregisterShortcut):
* inspector/front-end/ScriptsPanel.js:
(WebInspector.ScriptsPanel.prototype._editorClosed):
(WebInspector.ScriptsPanel.prototype._editorSelected):
(WebInspector.ScriptsPanel.prototype._fileSelected):
(WebInspector.ScriptsPanel.prototype._escDownWhileNavigatorOverlayOpen):
(WebInspector.ScriptsPanel.prototype.set _showNavigatorOverlay):
(WebInspector.ScriptsPanel.prototype._hideNavigatorOverlay):
(WebInspector.ScriptsPanel.prototype._navigatorOverlayWasShown):
* inspector/front-end/SidebarOverlay.js:
(WebInspector.SidebarOverlay):
(WebInspector.SidebarOverlay.prototype.show):
(WebInspector.SidebarOverlay.prototype._containingElementFocused):
(WebInspector.SidebarOverlay.prototype.position):
(WebInspector.SidebarOverlay.prototype.hide):
(WebInspector.SidebarOverlay.prototype._setWidth):
* inspector/front-end/dialog.css:
(.go-to-line-dialog button:active):
* inspector/front-end/scriptsPanel.css:
(#scripts-editor-view .sidebar-overlay):
* inspector/front-end/splitView.css:
(.split-view-resizer):
(.sidebar-overlay):
(.sidebar-overlay-resizer):

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (109005 => 109006)


--- trunk/Source/WebCore/ChangeLog	2012-02-27 18:04:18 UTC (rev 109005)
+++ trunk/Source/WebCore/ChangeLog	2012-02-27 18:15:43 UTC (rev 109006)
@@ -1,3 +1,37 @@
+2012-02-27  Vsevolod Vlasov  <vse...@chromium.org>
+
+        Web Inspector: Scripts navigator overlay should not consume mouse actions.
+        https://bugs.webkit.org/show_bug.cgi?id=79674
+
+        Reviewed by Pavel Feldman.
+
+        * inspector/front-end/Panel.js:
+        (WebInspector.Panel.prototype.registerShortcut):
+        (WebInspector.Panel.prototype.unregisterShortcut):
+        * inspector/front-end/ScriptsPanel.js:
+        (WebInspector.ScriptsPanel.prototype._editorClosed):
+        (WebInspector.ScriptsPanel.prototype._editorSelected):
+        (WebInspector.ScriptsPanel.prototype._fileSelected):
+        (WebInspector.ScriptsPanel.prototype._escDownWhileNavigatorOverlayOpen):
+        (WebInspector.ScriptsPanel.prototype.set _showNavigatorOverlay):
+        (WebInspector.ScriptsPanel.prototype._hideNavigatorOverlay):
+        (WebInspector.ScriptsPanel.prototype._navigatorOverlayWasShown):
+        * inspector/front-end/SidebarOverlay.js:
+        (WebInspector.SidebarOverlay):
+        (WebInspector.SidebarOverlay.prototype.show):
+        (WebInspector.SidebarOverlay.prototype._containingElementFocused):
+        (WebInspector.SidebarOverlay.prototype.position):
+        (WebInspector.SidebarOverlay.prototype.hide):
+        (WebInspector.SidebarOverlay.prototype._setWidth):
+        * inspector/front-end/dialog.css:
+        (.go-to-line-dialog button:active):
+        * inspector/front-end/scriptsPanel.css:
+        (#scripts-editor-view .sidebar-overlay):
+        * inspector/front-end/splitView.css:
+        (.split-view-resizer):
+        (.sidebar-overlay):
+        (.sidebar-overlay-resizer):
+
 2012-02-27  Philippe Normand  <pnorm...@igalia.com>
 
         [GStreamer] 0.11 support in MediaPlayerPrivateGStreamer

Modified: trunk/Source/WebCore/inspector/front-end/Panel.js (109005 => 109006)


--- trunk/Source/WebCore/inspector/front-end/Panel.js	2012-02-27 18:04:18 UTC (rev 109005)
+++ trunk/Source/WebCore/inspector/front-end/Panel.js	2012-02-27 18:15:43 UTC (rev 109006)
@@ -212,6 +212,11 @@
     registerShortcut: function(key, handler)
     {
         this._shortcuts[key] = handler;
+    },
+
+    unregisterShortcut: function(key)
+    {
+        delete this._shortcuts[key];
     }
 }
 

Modified: trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js (109005 => 109006)


--- trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js	2012-02-27 18:04:18 UTC (rev 109005)
+++ trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js	2012-02-27 18:15:43 UTC (rev 109006)
@@ -67,6 +67,7 @@
         const minimalViewsContainerWidthPercent = 50;
         this.editorView = new WebInspector.SplitView(WebInspector.SplitView.SidebarPosition.Left, "scriptsPanelNavigatorSidebarWidth", initialNavigatorWidth);
         this.editorView.element.id = "scripts-editor-view";
+        this.editorView.element.tabIndex = 0;
 
         this.editorView.minimalSidebarWidth = Preferences.minScriptsSidebarWidth;
         this.editorView.minimalMainWidthPercent = minimalViewsContainerWidthPercent;
@@ -643,6 +644,7 @@
 
     _editorClosed: function(event)
     {
+        this._hideNavigatorOverlay();
         var uiSourceCode = /** @type {WebInspector.UISourceCode} */ event.data;
 
         if (this._currentUISourceCode === uiSourceCode)
@@ -657,14 +659,14 @@
 
     _editorSelected: function(event)
     {
+        this._hideNavigatorOverlay();
         var uiSourceCode = /** @type {WebInspector.UISourceCode} */ event.data;
         this._showFile(uiSourceCode);
     },
 
     _fileSelected: function(event)
     {
-        if (this._navigatorOverlayShown)
-            this._hideNavigatorOverlay();
+        this._hideNavigatorOverlay();
         var uiSourceCode = /** @type {WebInspector.UISourceCode} */ event.data;
         this._showFile(uiSourceCode);
     },
@@ -956,6 +958,11 @@
         return button;
     },
 
+    _escDownWhileNavigatorOverlayOpen: function(event)
+    {
+        this._hideNavigatorOverlay();
+    },
+
     _maybeShowNavigatorOverlay: function()
     {
         if (this._navigator && WebInspector.settings.navigatorHidden.get() && !WebInspector.settings.navigatorWasOnceHidden.get())
@@ -1011,15 +1018,15 @@
             return;
 
         this._navigatorOverlayShown = true;
-        var sidebarOverlay = new WebInspector.SidebarOverlay(this._navigatorView, "scriptsPanelNavigatorOverlayWidth", Preferences.minScriptsSidebarWidth);
-        sidebarOverlay.addEventListener(WebInspector.SidebarOverlay.EventTypes.WasShown, this._navigatorOverlayWasShown, this);
-        sidebarOverlay.addEventListener(WebInspector.SidebarOverlay.EventTypes.WillHide, this._navigatorOverlayWillHide, this);
+        this._sidebarOverlay = new WebInspector.SidebarOverlay(this._navigatorView, "scriptsPanelNavigatorOverlayWidth", Preferences.minScriptsSidebarWidth);
+        this._sidebarOverlay.addEventListener(WebInspector.SidebarOverlay.EventTypes.WasShown, this._navigatorOverlayWasShown, this);
+        this._sidebarOverlay.addEventListener(WebInspector.SidebarOverlay.EventTypes.WillHide, this._navigatorOverlayWillHide, this);
 
         var navigatorOverlayResizeWidgetElement = document.createElement("div");
         navigatorOverlayResizeWidgetElement.addStyleClass("scripts-navigator-resizer-widget");
-        sidebarOverlay.resizerWidgetElement = navigatorOverlayResizeWidgetElement;
+        this._sidebarOverlay.resizerWidgetElement = navigatorOverlayResizeWidgetElement;
 
-        sidebarOverlay.start(this.editorView.element);
+        this._sidebarOverlay.show(this.editorView.element);
     },
 
     _hideNavigatorOverlay: function()
@@ -1027,7 +1034,7 @@
         if (!this._navigatorOverlayShown)
             return;
 
-        WebInspector.Dialog.hide();
+        this._sidebarOverlay.hide();
     },
 
     _navigatorOverlayWasShown: function(event)
@@ -1036,6 +1043,7 @@
         this._navigatorShowHideButton.addStyleClass("toggled-on");
         this._navigatorShowHideButton.title = WebInspector.UIString("Hide scripts navigator");
         this._navigator.focus();
+        this.registerShortcut(WebInspector.KeyboardShortcut.Keys.Esc.code, this._escDownWhileNavigatorOverlayOpen.bind(this));
     },
 
     _navigatorOverlayWillHide: function(event)
@@ -1045,6 +1053,7 @@
         this.editorView.element.appendChild(this._navigatorShowHideButton);
         this._navigatorShowHideButton.removeStyleClass("toggled-on");
         this._navigatorShowHideButton.title = WebInspector.UIString("Show scripts navigator");
+        this.unregisterShortcut(WebInspector.KeyboardShortcut.Keys.Esc.code);
     },
 
     _createButtonAndRegisterShortcuts: function(buttonId, buttonTitle, handler, shortcuts, shortcutDescription)

Modified: trunk/Source/WebCore/inspector/front-end/SidebarOverlay.js (109005 => 109006)


--- trunk/Source/WebCore/inspector/front-end/SidebarOverlay.js	2012-02-27 18:04:18 UTC (rev 109005)
+++ trunk/Source/WebCore/inspector/front-end/SidebarOverlay.js	2012-02-27 18:15:43 UTC (rev 109006)
@@ -30,15 +30,18 @@
 
 /**
  * @constructor
- * @extends {WebInspector.DialogDelegate}
+ * @extends {WebInspector.Object}
  * @param {WebInspector.View} view
  * @param {string} widthSettingName
  * @param {number} minimalWidth
  */
 WebInspector.SidebarOverlay = function(view, widthSettingName, minimalWidth)
 {
-    WebInspector.DialogDelegate.call(this);
+    WebInspector.Object.call(this);
     
+    this.element = document.createElement("div");
+    this.element.className = "sidebar-overlay";
+
     this._view = view;
     this._widthSettingName = widthSettingName;
     this._minimalWidth = minimalWidth;
@@ -59,34 +62,36 @@
 
 WebInspector.SidebarOverlay.prototype = {
     /**
-     * @param {Element} element
+     * @param {Element} relativeToElement
      */
-    show: function(element)
+    show: function(relativeToElement)
     {
-        this._element = element;
-        element.addStyleClass("sidebar-overlay-dialog");
-        this._view.markAsRoot();
-        this._view.show(element);
-        this._element.appendChild(this._resizerElement);
+        relativeToElement.appendChild(this.element);
+        relativeToElement.addStyleClass("sidebar-overlay-shown");
+        this._view.show(this.element);
+        this.element.appendChild(this._resizerElement);
         if (this._resizerWidgetElement)
-            this._element.appendChild(this._resizerWidgetElement);
-
+            this.element.appendChild(this._resizerWidgetElement);
+        this.position(relativeToElement);
+        this._boundContainingElementFocused = this._containingElementFocused.bind(this);
+        relativeToElement.addEventListener("DOMFocusIn", this._boundContainingElementFocused, false);
+        
         this.dispatchEventToListeners(WebInspector.SidebarOverlay.EventTypes.WasShown, null);
     },
 
+    _containingElementFocused: function(event)
+    {
+        if (!event.target.isSelfOrDescendant(this.element))
+            this.hide();
+    },
+
     /**
-     * @param {Element} element
      * @param {Element} relativeToElement
      */
-    position: function(element, relativeToElement)
+    position: function(relativeToElement)
     {
         this._totalWidth = relativeToElement.offsetWidth;
-        
-        var offset = relativeToElement.offsetRelativeToWindow(window);
-        element.style.left = offset.x + "px";
-        element.style.top = offset.y + "px";
         this._setWidth(this._preferredWidth());
-        element.style.height = relativeToElement.offsetHeight + "px";
     },
 
     focus: function()
@@ -94,20 +99,24 @@
         WebInspector.setCurrentFocusElement(this._view.element);
     },
 
-    willHide: function() {
+    hide: function()
+    {
+        var element = this.element.parentElement;
+        if (!element)
+            return;
+
+        this.dispatchEventToListeners(WebInspector.SidebarOverlay.EventTypes.WillHide, null);
+        
         this._view.detach();
-        this.dispatchEventToListeners(WebInspector.SidebarOverlay.EventTypes.WillHide, null);
+        element.removeChild(this.element);
+        element.removeStyleClass("sidebar-overlay-shown");
+        this.element.removeChild(this._resizerElement);
+        if (this._resizerWidgetElement)
+            this.element.removeChild(this._resizerWidgetElement);
+        element.removeEventListener("DOMFocusIn", this._boundContainingElementFocused);
     },
     
     /**
-     * @param {Element} relativeToElement
-     */
-    start: function(relativeToElement)
-    {
-        WebInspector.Dialog.show(relativeToElement, this);
-    },
-    
-    /**
      * @param {number} newWidth
      */
     _setWidth: function(newWidth)
@@ -117,7 +126,7 @@
         if (this._width === width)
             return;
 
-        this._element.style.width = width + "px";
+        this.element.style.width = width + "px";
         this._resizerElement.style.left = (width - 3) + "px";
         this._width = width;
         this._view.doResize();
@@ -191,4 +200,4 @@
     }
 }
 
-WebInspector.SidebarOverlay.prototype.__proto__ = WebInspector.DialogDelegate.prototype;
+WebInspector.SidebarOverlay.prototype.__proto__ = WebInspector.Object.prototype;

Modified: trunk/Source/WebCore/inspector/front-end/dialog.css (109005 => 109006)


--- trunk/Source/WebCore/inspector/front-end/dialog.css	2012-02-27 18:04:18 UTC (rev 109005)
+++ trunk/Source/WebCore/inspector/front-end/dialog.css	2012-02-27 18:15:43 UTC (rev 109006)
@@ -53,24 +53,3 @@
     background-color: rgb(215, 215, 215);
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
 }
-
-.sidebar-overlay-dialog {
-    position: absolute;
-    display: -webkit-box;
-    height: 0;
-    width: 0;
-    -webkit-box-orient: vertical;
-    z-index: -1;
-    background-color: white;
-    border-right: 1px solid gray;
-    -webkit-box-shadow: rgb(90,90,90) 20px 0px 50px -25px;
-}
-
-.sidebar-overlay-resizer {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 5px;
-    z-index: 500;
-    cursor: ew-resize;
-}

Modified: trunk/Source/WebCore/inspector/front-end/scriptsPanel.css (109005 => 109006)


--- trunk/Source/WebCore/inspector/front-end/scriptsPanel.css	2012-02-27 18:04:18 UTC (rev 109005)
+++ trunk/Source/WebCore/inspector/front-end/scriptsPanel.css	2012-02-27 18:15:43 UTC (rev 109006)
@@ -282,6 +282,15 @@
     margin-right: 28px;
 }
 
+#scripts-editor-view .sidebar-overlay {
+    display: -webkit-box;
+    background-color: white;
+    border-right: 1px solid gray;
+    -webkit-box-shadow: rgb(90,90,90) 20px 0px 50px -25px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
 #scripts-editor-container-tabbed-pane .tabbed-pane-header {
     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#E5E5E5));
 }

Modified: trunk/Source/WebCore/inspector/front-end/splitView.css (109005 => 109006)


--- trunk/Source/WebCore/inspector/front-end/splitView.css	2012-02-27 18:04:18 UTC (rev 109005)
+++ trunk/Source/WebCore/inspector/front-end/splitView.css	2012-02-27 18:15:43 UTC (rev 109006)
@@ -66,4 +66,21 @@
     width: 5px;
     z-index: 500;
     cursor: ew-resize;
-}
\ No newline at end of file
+}
+
+.sidebar-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+}
+
+.sidebar-overlay-resizer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 5px;
+    z-index: 500;
+    cursor: ew-resize;
+}
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to