From: pfeldman@chromium.org Date: Wed, 4 Jul 2012 12:53:48 +0000 (+0000) Subject: Web Inspector: "Dock to right" shouldn't be in the settings dialog X-Git-Tag: 070512121124~55 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=e611d098e1649f1b34a7317795d7e28fa39f2e90;p=profile%2Fivi%2Fwebkit-efl.git Web Inspector: "Dock to right" shouldn't be in the settings dialog https://bugs.webkit.org/show_bug.cgi?id=76917 Reviewed by Vsevolod Vlasov. Introduced 'long click-enabled' options for status bar buttons. Made dock/undock one of them. * inspector/front-end/Images/statusbarButtonGlyphs.png: * inspector/front-end/StatusBarButton.js: (WebInspector.StatusBarButton.prototype._clicked): (WebInspector.StatusBarButton.prototype.set visible): (WebInspector.StatusBarButton.prototype.makeLongClickEnabled.mouseDown): (WebInspector.StatusBarButton.prototype.makeLongClickEnabled.mouseUp): (WebInspector.StatusBarButton.prototype.makeLongClickEnabled): (WebInspector.StatusBarButton.prototype._showOptions.mouseOver): (WebInspector.StatusBarButton.prototype._showOptions.mouseOut): (WebInspector.StatusBarButton.prototype._showOptions.mouseUp): (WebInspector.StatusBarButton.prototype._showOptions): * inspector/front-end/UIUtils.js: (WebInspector.elementDragStart): (WebInspector.elementDragEnd): (WebInspector.GlassPane): (WebInspector.GlassPane.prototype.dispose): * inspector/front-end/inspector.css: (.long-click-glyph): (.long-click-glyph.shadow): (button.status-bar-item:active:not(.emulate-inactive), button.status-bar-item.emulate-active): (.alternate-status-bar-buttons-bar): (.alternate-status-bar-buttons-bar .status-bar-item): * inspector/front-end/inspector.js: (WebInspector._createGlobalStatusBarItems): (WebInspector._createDockOptions.onClick.set else): (WebInspector._createDockOptions.onClick): git-svn-id: http://svn.webkit.org/repository/webkit/trunk@121843 268f45cc-cd09-0410-ab3c-d52691b4dbfc --- diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog index 23f8795..d56d629 100644 --- a/Source/WebCore/ChangeLog +++ b/Source/WebCore/ChangeLog @@ -1,3 +1,39 @@ +2012-07-04 Pavel Feldman + + Web Inspector: "Dock to right" shouldn't be in the settings dialog + https://bugs.webkit.org/show_bug.cgi?id=76917 + + Reviewed by Vsevolod Vlasov. + + Introduced 'long click-enabled' options for status bar buttons. Made dock/undock one of them. + + * inspector/front-end/Images/statusbarButtonGlyphs.png: + * inspector/front-end/StatusBarButton.js: + (WebInspector.StatusBarButton.prototype._clicked): + (WebInspector.StatusBarButton.prototype.set visible): + (WebInspector.StatusBarButton.prototype.makeLongClickEnabled.mouseDown): + (WebInspector.StatusBarButton.prototype.makeLongClickEnabled.mouseUp): + (WebInspector.StatusBarButton.prototype.makeLongClickEnabled): + (WebInspector.StatusBarButton.prototype._showOptions.mouseOver): + (WebInspector.StatusBarButton.prototype._showOptions.mouseOut): + (WebInspector.StatusBarButton.prototype._showOptions.mouseUp): + (WebInspector.StatusBarButton.prototype._showOptions): + * inspector/front-end/UIUtils.js: + (WebInspector.elementDragStart): + (WebInspector.elementDragEnd): + (WebInspector.GlassPane): + (WebInspector.GlassPane.prototype.dispose): + * inspector/front-end/inspector.css: + (.long-click-glyph): + (.long-click-glyph.shadow): + (button.status-bar-item:active:not(.emulate-inactive), button.status-bar-item.emulate-active): + (.alternate-status-bar-buttons-bar): + (.alternate-status-bar-buttons-bar .status-bar-item): + * inspector/front-end/inspector.js: + (WebInspector._createGlobalStatusBarItems): + (WebInspector._createDockOptions.onClick.set else): + (WebInspector._createDockOptions.onClick): + 2012-07-04 Sheriff Bot Unreviewed, rolling out r121813. diff --git a/Source/WebCore/inspector/front-end/Images/statusbarButtonGlyphs.png b/Source/WebCore/inspector/front-end/Images/statusbarButtonGlyphs.png index 382a846..74eec1d 100644 Binary files a/Source/WebCore/inspector/front-end/Images/statusbarButtonGlyphs.png and b/Source/WebCore/inspector/front-end/Images/statusbarButtonGlyphs.png differ diff --git a/Source/WebCore/inspector/front-end/StatusBarButton.js b/Source/WebCore/inspector/front-end/StatusBarButton.js index 9ef0062..e0f2a05 100644 --- a/Source/WebCore/inspector/front-end/StatusBarButton.js +++ b/Source/WebCore/inspector/front-end/StatusBarButton.js @@ -65,6 +65,8 @@ WebInspector.StatusBarButton.prototype = { _clicked: function() { this.dispatchEventToListeners("click"); + if (this._showOptionsTimer) + clearTimeout(this._showOptionsTimer); }, get disabled() @@ -147,6 +149,94 @@ WebInspector.StatusBarButton.prototype = { else this.element.addStyleClass("hidden"); this._visible = x; + }, + + /** + * @param {function():Array.} buttonsProvider + */ + makeLongClickEnabled: function(buttonsProvider) + { + this.longClickGlyph = document.createElement("div"); + this.longClickGlyph.className = "fill long-click-glyph"; + this.element.appendChild(this.longClickGlyph); + + this.longClickGlyphShadow = document.createElement("div"); + this.longClickGlyphShadow.className = "fill long-click-glyph shadow"; + this.element.appendChild(this.longClickGlyphShadow); + + this.element.addEventListener("mousedown", mouseDown.bind(this), false); + this.element.addEventListener("mouseout", mouseUp.bind(this), false); + this.element.addEventListener("mouseup", mouseUp.bind(this), false); + + function mouseDown(e) + { + if (e.which !== 1) + return; + this._showOptionsTimer = setTimeout(this._showOptions.bind(this, buttonsProvider), 500); + } + + function mouseUp(e) + { + if (e.which !== 1) + return; + if (this._showOptionsTimer) + clearTimeout(this._showOptionsTimer); + } + }, + + /** + * @param {function():Array.} buttonsProvider + */ + _showOptions: function(buttonsProvider) + { + var buttons = buttonsProvider(); + + var mouseUpListener = mouseUp.bind(this); + document.documentElement.addEventListener("mouseup", mouseUpListener, false); + + var optionsGlassPane = new WebInspector.GlassPane(); + var optionsBarElement = optionsGlassPane.element.createChild("div", "alternate-status-bar-buttons-bar"); + const buttonHeight = 24; + optionsBarElement.style.height = (buttonHeight * buttons.length) + "px"; + optionsBarElement.style.left = this.element.offsetLeft + "px"; + + var boundMouseOver = mouseOver.bind(this); + var boundMouseOut = mouseOut.bind(this); + for (var i = 0; i < buttons.length; ++i) { + buttons[i].element.addEventListener("mousemove", boundMouseOver.bind(this), false); + buttons[i].element.addEventListener("mouseout", boundMouseOut.bind(this), false); + optionsBarElement.appendChild(buttons[i].element); + } + buttons[buttons.length - 1].element.addStyleClass("emulate-active"); + + function mouseOver(e) + { + if (e.which !== 1) + return; + var buttonElement = e.target.enclosingNodeOrSelfWithClass("status-bar-item"); + buttonElement.addStyleClass("emulate-active"); + } + + function mouseOut(e) + { + if (e.which !== 1) + return; + var buttonElement = e.target.enclosingNodeOrSelfWithClass("status-bar-item"); + buttonElement.removeStyleClass("emulate-active"); + } + + function mouseUp(e) + { + if (e.which !== 1) + return; + optionsGlassPane.dispose(); + document.documentElement.removeEventListener("mouseup", mouseUpListener, false); + + for (var i = 0; i < buttons.length; ++i) { + if (buttons[i].element.hasStyleClass("emulate-active")) + buttons[i]._clicked(); + } + } } } diff --git a/Source/WebCore/inspector/front-end/UIUtils.js b/Source/WebCore/inspector/front-end/UIUtils.js index 5c15ac4..18f3e7e 100644 --- a/Source/WebCore/inspector/front-end/UIUtils.js +++ b/Source/WebCore/inspector/front-end/UIUtils.js @@ -37,13 +37,9 @@ WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, e if (element) { // Install glass pane if (WebInspector._elementDraggingGlassPane) - WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane); + WebInspector._elementDraggingGlassPane.dispose(); - var glassPane = document.createElement("div"); - glassPane.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;z-index:1"; - glassPane.id = "glass-pane-for-drag"; - element.ownerDocument.body.appendChild(glassPane); - WebInspector._elementDraggingGlassPane = glassPane; + WebInspector._elementDraggingGlassPane = new WebInspector.GlassPane(); } WebInspector._elementDraggingEventListener = dividerDrag; @@ -67,7 +63,7 @@ WebInspector.elementDragEnd = function(event) targetDocument.body.style.removeProperty("cursor"); if (WebInspector._elementDraggingGlassPane) - WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane); + WebInspector._elementDraggingGlassPane.dispose(); delete WebInspector._elementDraggingGlassPane; delete WebInspector._elementDraggingEventListener; @@ -76,6 +72,25 @@ WebInspector.elementDragEnd = function(event) event.preventDefault(); } +/** + * @constructor + */ +WebInspector.GlassPane = function() +{ + this.element = document.createElement("div"); + this.element.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;background-color:transparent;z-index:1"; + this.element.id = "glass-pane-for-drag"; + document.body.appendChild(this.element); +} + +WebInspector.GlassPane.prototype = { + dispose: function() + { + if (this.element.parentElement) + this.element.parentElement.removeChild(this.element); + } +} + WebInspector.animateStyle = function(animations, duration, callback) { var interval; diff --git a/Source/WebCore/inspector/front-end/inspector.css b/Source/WebCore/inspector/front-end/inspector.css index ef6f3f3..ea69fa6 100644 --- a/Source/WebCore/inspector/front-end/inspector.css +++ b/Source/WebCore/inspector/front-end/inspector.css @@ -518,6 +518,19 @@ body.drawer-visible #main-panels { z-index: 0; } +.long-click-glyph { + background-color: rgba(0, 0, 0, 0.75); + -webkit-mask-image: url(Images/statusbarButtonGlyphs.png); + -webkit-mask-position: -288px -48px; + z-index: 1; +} + +.long-click-glyph.shadow { + top: 1px; + background-color: white !important; + z-index: 0; +} + button.status-bar-item { position: relative; width: 32px; @@ -525,7 +538,7 @@ button.status-bar-item { background-position: 0 0; } -button.status-bar-item:active { +button.status-bar-item:active:not(.emulate-inactive), button.status-bar-item.emulate-active { background-position: 32px 0 !important; } @@ -582,9 +595,16 @@ button.dock-status-bar-item.status-bar-item.toggled-right .glyph { background-color: rgba(0, 0, 0, 0.75); } -button.settings-status-bar-item { +.alternate-status-bar-buttons-bar { position: absolute; - right: 0; + width: 32px; + bottom: -3px; + margin-left: 1px; + background: white; +} + +.alternate-status-bar-buttons-bar .status-bar-item { + margin-top: -1px; } .settings-status-bar-item .glyph { diff --git a/Source/WebCore/inspector/front-end/inspector.js b/Source/WebCore/inspector/front-end/inspector.js index c3e74fb..e8133ac 100644 --- a/Source/WebCore/inspector/front-end/inspector.js +++ b/Source/WebCore/inspector/front-end/inspector.js @@ -71,6 +71,7 @@ var WebInspector = { _createGlobalStatusBarItems: function() { this._dockToggleButton = new WebInspector.StatusBarButton("", "dock-status-bar-item", 3); + this._dockToggleButton.makeLongClickEnabled(this._createDockOptions.bind(this)); this._dockToggleButton.addEventListener("click", this._toggleAttach.bind(this), false); this._updateDockButtonState(); @@ -86,6 +87,41 @@ var WebInspector = { anchoredStatusBar.appendChild(this.settingsController.statusBarItem); }, + _createDockOptions: function() + { + var alternateDockToggleButton1 = new WebInspector.StatusBarButton("Dock to main window.", "dock-status-bar-item", 3); + var alternateDockToggleButton2 = new WebInspector.StatusBarButton("Undock into separate window.", "dock-status-bar-item", 3); + + if (this.attached) { + alternateDockToggleButton1.state = WebInspector.settings.dockToRight.get() ? "bottom" : "right"; + alternateDockToggleButton2.state = "undock"; + } else { + alternateDockToggleButton1.state = WebInspector.settings.dockToRight.get() ? "bottom" : "right"; + alternateDockToggleButton2.state = WebInspector.settings.dockToRight.get() ? "right" : "bottom"; + } + + alternateDockToggleButton1.addEventListener("click", onClick.bind(this), false); + alternateDockToggleButton2.addEventListener("click", onClick.bind(this), false); + + function onClick(e) + { + var state = e.target.state; + if (state === "undock") + this._toggleAttach(); + else if (state === "right") { + if (!this.attached) + this._toggleAttach(); + WebInspector.settings.dockToRight.set(true); + } else if (state === "bottom") { + if (!this.attached) + this._toggleAttach(); + WebInspector.settings.dockToRight.set(false); + } + } + + return [alternateDockToggleButton1, alternateDockToggleButton2]; + }, + _updateDockButtonState: function() { if (!this._dockToggleButton)