I read that the inspector now supports docking to the right, and it took me forever to figure out how to do it. I tried to just drag it over, option-clicking on the "dock" button, long clicking on the dock button, right-clicking on the dock button. Putting this into the settings dialog feels like bad UI to me. (Unrelated mini-ran: The settings dialog is already starting to look for a dumping ground of decisions that shouldn't be exposed to the user.)
Where would you expect to see it?
I tried dragging the docked devtools titlebar to the right, option-clicking on the "dock" button at the bottom left corner of the devtools, long clicking on the dock button, right-clicking on the dock button.
I expect the option key as well. Holding option should change the button glyph before you press it to show it will do something different.
(In reply to comment #3) > I expect the option key as well. Holding option should change the button glyph before you press it to show it will do something different. I like this one, but I think it is also not discoverable.
(In reply to comment #4) > (In reply to comment #3) > > I expect the option key as well. Holding option should change the button glyph before you press it to show it will do something different. > > I like this one, but I think it is also not discoverable. It's no worse than the current behavior, and keeps the settings menu slightly less cluttered. But up to you :-)
Created attachment 139612 [details] Context menu mockup (In reply to comment #3) > I expect the option key as well. Holding option should change the button glyph before you press it to show it will do something different. +1. Adobe Photoshop uses it a lot and I like it. Context menu is also a viable option, I think we can have both.
Created attachment 139613 [details] Three (radio) buttons One more option. Props: — dead-easy to discover — One click to switch the mode Cons: — Clutters a bottom bar
*** Bug 88559 has been marked as a duplicate of this bug. ***
Bug 88559 requests a shortcut for toggling the Inspector docking side.
> (In reply to comment #3) > > I expect the option key as well. Holding option should change the button glyph before you press it to show it will do something different. > > I like this one, but I think it is also not discoverable. At least it makes switching between dock to right and dock to bottom much quicker. I’d love to have a feedback. I’m eager to implement my first mockup as soon as we agree on it.
I have a wip patch that implements behavior in comments 2-5. Will attach once I am back from vacations. (Tomorrow). I did not upload it initially because Chrome loses focus upon toggling dock side and it is especially noticable when using such action.
*** Bug 79923 has been marked as a duplicate of this bug. ***
Any progress here?
(In reply to comment #14) > Any progress here? I am facing another limitation here: when focus is elsewhere, pressing Cmd while hovering over the button can't be tracked. So it sounds like we need a different UX solution here. What was yours?
(In reply to comment #15) > (In reply to comment #14) > > Any progress here? > > I am facing another limitation here: when focus is elsewhere, pressing Cmd while hovering over the button can't be tracked. So it sounds like we need a different UX solution here. What was yours? We can track Cmd on click: addEventListener("click", function(event) { event.metaKey } When focus is elsewhere pressing Cmd won’t change the icon but I think it’s okay.
> When focus is elsewhere pressing Cmd won’t change the icon but I think it’s okay. I don't really think it is. The whole point of the meta thing is its discoverability... I am thinking of implementing a long click that would change it to dock-to-side. Wdyt?
(In reply to comment #17) > > When focus is elsewhere pressing Cmd won’t change the icon but I think it’s okay. > > I don't really think it is. The whole point of the meta thing is its discoverability... I am thinking of implementing a long click that would change it to dock-to-side. Wdyt? I.e. you hold mouse down and dock to side icon pops up above the dock one in 0.5 sec...
(In reply to comment #18) > (In reply to comment #17) > > > When focus is elsewhere pressing Cmd won’t change the icon but I think it’s okay. > > > > I don't really think it is. The whole point of the meta thing is its discoverability... I am thinking of implementing a long click that would change it to dock-to-side. Wdyt? > > I.e. you hold mouse down and dock to side icon pops up above the dock one in 0.5 sec... I haven’t used much click-and-hold on a desktop so I need to use it for some time to share an opinion. Worth trying anyway.
Created attachment 150753 [details] Patch
Created attachment 150754 [details] [IMAGE] with patch applied
Created attachment 150755 [details] [IMAGE] with patch applied
Looks good overall. I have a small suggestion though: I’ve been using it for a few minutes and I’ve noticed that I click on the icon then instantly move mouse cursor a bit higher expecting the new extended icon to show up. But it doesn’t. Wouldn’t it be better to show the extended icon right after a click yet make it invisible? We could make it visible (possibly, with a nice transition) after an half of a second.
(In reply to comment #23) > Looks good overall. I have a small suggestion though: > > I’ve been using it for a few minutes and I’ve noticed that I click on the icon then instantly move mouse cursor a bit higher expecting the new extended icon to show up. But it doesn’t. Wouldn’t it be better to show the extended icon right after a click yet make it invisible? We could make it visible (possibly, with a nice transition) after an half of a second. It would flicker for existing dock/undock users then. Lets land it as is and see if this makes users happy.
Comment on attachment 150753 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=150753&action=review > Source/WebCore/inspector/front-end/StatusBarButton.js:230 > + if (e.which !== 1) I would remove this check and remove button options if right mouse button was released as well.
Committed r121843: <http://trac.webkit.org/changeset/121843>
(In reply to comment #24) > (In reply to comment #23) > > Looks good overall. I have a small suggestion though: > > > > I’ve been using it for a few minutes and I’ve noticed that I click on the icon then instantly move mouse cursor a bit higher expecting the new extended icon to show up. But it doesn’t. Wouldn’t it be better to show the extended icon right after a click yet make it invisible? We could make it visible (possibly, with a nice transition) after an half of a second. > > It would flicker for existing dock/undock users then. Lets land it as is and see if this makes users happy. This is what I meant http://www.screenr.com/20Z8
> This is what I meant http://www.screenr.com/20Z8 Reduced timeout to 200ms. Is this better? The idea is that the button acts as the PS tool chooser or a long press mobile button. I think people will figure it out. Note that we assume that people toggle between bottom / right mode less often than dock / undock the pane. If we learn that this is not the case, we'll need to tweak the defaults / behavior.