From e611d098e1649f1b34a7317795d7e28fa39f2e90 Mon Sep 17 00:00:00 2001 From: "pfeldman@chromium.org" Date: Wed, 4 Jul 2012 12:53:48 +0000 Subject: [PATCH] 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 --- Source/WebCore/ChangeLog | 36 +++++++++ .../front-end/Images/statusbarButtonGlyphs.png | Bin 6641 -> 6661 bytes .../WebCore/inspector/front-end/StatusBarButton.js | 90 +++++++++++++++++++++ Source/WebCore/inspector/front-end/UIUtils.js | 29 +++++-- Source/WebCore/inspector/front-end/inspector.css | 26 +++++- Source/WebCore/inspector/front-end/inspector.js | 36 +++++++++ 6 files changed, 207 insertions(+), 10 deletions(-) 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 382a8462e258f5cb0874d3ba9de336fb3482894b..74eec1d3b14047a1548146318a8d30a2aafc87ac 100644 GIT binary patch delta 3918 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 delta 3907 zcmaKuXEYlO+$jZ#uE9;JlZMTDvmrK(8PYK@MNq7*?B zwQ7{o^H@Pr+ha=`YSi2R$NzcHdGGmsxL@zN=iGBs&h6;e*6`xEAi}Z`Iag*j03f7n zZDHmVJ+)CBQ!8sJ*Nc2V*`_M|7jzn$I$iczL_xe#mg^~~WuX?430l1R7eZni_$eSg zjO%fEm#OGEr90Qml&nNeP4i8agh3Y<)E5L#;ZM)b`}QIa3_cFQTMb*^-H+7Y+Iv$t zh4E|huWF?puVHWr$gAR(j{l!NMf_}16@+{JRM44HFW?e@@N>-P6PXs37@sJBucTe4 z3DBNiFdV<<<9>RjucKXoKTZImSZY3!MDX$v$DB3?Tai zk1bKO9`o!j{hR_a?T}V5ov2Usb7d`I5g|cPciq&a~rO{ESl<`R2hl+yZ1v7Cb1b zSnGfmt&O$k+V)txv<&RT95!)yK0RKJ6=f;_w#GE}xB5eqjf*;uou%n&Xr5x4`XL910%1mqP`R^c+Y3Y?GnAD55IOQ_g)*d}9ptiE@%m(9g=qz2y zpMY-MdjILeL-`@~FEU*RSuFMK%r>ONzVO6MXaO=%@KHJ=X!7Oo@_-+KnIKPT4_Ko% zZEoY8aVO{M*e@+k_~R5i>q=tjdZ|j$X};eD3sBB>AhkXd7o0ipIpCdYn!84%hlUx* zE01v~-cf#2JHh|vc&qq?YVx^M8%&d%w!+wBZVh2lxRzC?;-82C#k;sSoomMD*$nrd zA--QjCVn1#)yOSprnWWHX|44z(LQ^ga6Cy#?369)b=$?Mxk{83f=i%`(naWus9&Uh z!Yv-xJoG6X*18&B--JV*?kNC2go#tly>Brbr7B|TT@i+y_uVmBhL|2aQf+2fXdzx6 zGX4ON6%i+BBmH{MCT=EeMWtSPnNKc=&j^f$iG*t;raHG&!7#t-Do~1DwB>5!9+H<3> z$dWdWw@REzY_$MIWgk}|r&T4^#GM+P zG-u`+GfG9os|;0y1E_CN<*(Lk4*8k6vovSNuE9;R%6vSRh78HoH;VWw_HiR1EB$y+ zzW&Cc2S-+D9F-m^>Jt&ekdrA5Gix0Lnlto>r_b7W&M6_rQH-B@kYX;fF29>-Ws}r) zmFqDJE{66|Np!2f;8zn+NO8$IWa2Q!cj&swEh@{f-&>29koh{}ef4&AJ?d5S38Nh0 za%e+d^iy3rpwt0zMpqK8lC)PTOzq2;STFqG0dBXLRWSW11*{f25@ijB94+bQ$FHe{ zJKQSmHN}Zm6oYEV&US`5^NexHzgA4RuHS#(Kl{@g{Rcn7(SC>AHU&+&A8}^;%V)EV zVL+4aOwNS2P1;Qr64T!oI?b-2Z?VA4=)uC?uTxZEBFB;Yz{i*B8UK@h-maxsK5lW2 znsko$Y6HlJjj#MtM)`Hh3+@tj()1))uLt$o+gmCh?BFNTchYucdk%4fMw#Vch0Km< zxhYcr@9#u}gbSybd$<=b(cfFbDm*e$(&E)6IJwt3zs6_PMYl)hMnO<1x-D`qe_#r% z{fCpZnz~~{fJ=WMF1#pEq)kK&D8US3?oRyXfd|*|?ne#PYQ+y(`2kKox8#f|zHE|) zSGTqv*24J>JK@uUP;e5LnebDa%F$w?|2t$u0wXsCVcUV|iIaq+?{pQZabzB~Jql*F zol%qBYODio()IyGyt1o`kJ|AHm?GowUTKQisOBD8sS4K;o_^k;3kGB1<>abP%xzsi zyL64p3dXs`8lj7Ze)Ax>nrH8sP}QBAzS#KaABm5>c6lLGUjF{Qe*ON#JvKXdoK80+ zUwe~ji=tjtAB0H~#4@_)fSH&lU#N5KBpI*nm*=17!{L+0UPmLA8Hcgu5Sog7a7FLAcFKg>j%1 zRHa`1|CM{~O}LDoQLPuy)$V8(@R1POHK_<=*xDwR{q3>h7xSeR?AHwqa0>pk?`dA0 zBbC2z$CLHiU~@#MAL7uN{1%K}fV^Laf0;bRumfeipT(pz^W-Vsk!@>_Fo*I_Hpk*i zSV-QjLh-xX=a}-@zzGyLXC)lRZ>Wl#pG%Fi5(bSN+Dmc2U6W{k_8Mz^t&dD=E=>R; z+~`@C6>Yi=C!AGer~Ed^$~e>${_p%Q!rHj_&$%|?R!o)oOEv6SQC5_9u7nBoU*<4XjnW({XFg!=!b^;dkA(ai#~Z z>Yqc%5l+AFCqrEyKfVIFA0j>>OMhNve@>6j$g6AJu@0rvYkQ1z?(|XMn|>x{Q(d_4 z+ie#{^>@8hVo*^A%L6{PeUY@s?XeU6yK-0xg<-#WdF9_*S{%HBiY7<8T9f}6#> zG&OZ`pQBD(r{HYh^N$VAtm8QJuOEkH#hR7^XZ}n}_gleaD3srvKEHU?C!1vW6@~B@KD;~GiSF1>%0)i zwxvi{wFX9VKG?Ie_F(1Vt-EeJ$XH0`T44-l3NZQ@(n~zY?W241m~`A<%Fq zKFwKEoVZTF?SP}4&T0xx?%J;`yNM`Lrp+&6rj$A3JuOr#L|3FoyM#-y=Flr$KqS8J zpp92!>_rSzw1bYv7>#vSmw;BwTCBcPyc0|Q%;Yx(KDc+1&wdK5{?fUGP<98EG@>=O zU3a6}$4h@iYz<6Tnl}0E{79fO>4qp}c4U;WDY-NpOY5dN=#x|Ny}Oc*9I-w*ET?M- zb8LjDjI{wqIK!KFw!f~XqA8c-v}7(rh!3aw%xono&N9FzvVWv;{|AZK%L?n(xcR8Q ze8Pt#=)rFjPx5>v zIRainfaUs{P@&sxoDMw?U~zg@642e$zxAc&74%^D4xS|_$6V|)n@zQI+E#>kJu}1w zm_PC2gWs*9{9EOrkr(2bEP*!6-&0z@ek7T`j}LWRL>&z|#7yrO6@0s*ywj)|#y~Yo zaZBN4hNsrhm+5~0D1YAgYB9Z+Fu@G*aD@i6Ya4`B6ApJvB5D*a{yt&7Q8-+P%N`%Q zL%Mg3bMf8Oj+XQ*^wI3kf@Jt?%XpNm$H_O@(@);lO*!+SJtnfq^}eu#7gjqqT8XE9 za?e7}H`RkQwVqk|{LS?(d74`aLgTK}F(J zpa&_5P8X|VG>hY3rp?>vb%hz8F{-h%?my|Ek%_mJRn;WXFdKN_K#1p+nrYKbVAB*Z z=nBA`2N;dY>xt*U3iYslT(#}$UOpR|ZiT^l=NTyh5h}?&Xj&BBU9NP`*9PDq)$z2&k%SLXTCPx!d)nL zSGjCb(E32*UmDmJ`op*6-$5<`S<>7%DCG>VC5h7RBqbx2XLczYGgqCJEwM7cN_Z0W zA!5T{=<0wrNop?gMe+{} 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) -- 2.7.4