1192642 - ability to dock firefox developer toolbar left, for large screen resolutions

Status: VERIFIED FIXED

(DevTools :: General, enhancement, P3)

Description

[Leho Kraav (:macmaN @lkraav)]

Attachment: unoptimal layout at large resolutions (3440x1440)

Attached is a screenshot of what happens at 3440x1440. Significant amount of time in web development must be done against a variety of responsive resolutions. Majority of the monitors are also landscape, there's much more horizontal space available, so bottom docking is just as unoptimal and therefore a no-go.

For the left-to-right world, left-docking toolbox would be the best solution. On a right-docked toolbox, when viewing the layout from the natural, middle of the monitor position, you're forced to stare at a black hole in the middle or work crooked staring to the sides. Left-docked toolbox gives perfect flexibility for resizing and aiming the start of the web page container element for wherever the middle of the screen is.

My hypothesis is that right-docked toolbox basically only works out all-optimal for up to 1920x1080 or thereabouts.

I would stick with Firebug, which allows all 5 dimensions of docking, just because of this issue alone, but Firebug just can't shake the sluggish UI performance.

Wasn't able to find any open bug that's working on adding more flexible docking, other than bug 1121414 perhaps. Not sure if this applies, so filed new.

Anyone else interested in this?

Comment 1

[Patrick Brosset <:pbro>]

Thanks for filing this. My point of view about this is that the toolbox should be flexible enough that people can dock it anywhere they want (and more generally, what bug 1121414 is about, but that's another discussion).
In reality though, adding more docking setups requires more UI, and there's already quite a lot.
Maybe this is a rare enough use case though that it could just be a pref like
devtools.toolbox.host.side with a default value of "right" that could be changed to "left".
Then then SidebarHost class in /browser/devtools/framework/toolbox-hosts.js would use this pref to dock to the correct side.
Should the tools themselves have a different layout when docked to the left though? For example, the inspector sidebar (that contains css rules) is displayed to the right now, should it move to the left when the toolbox is docked to the left?

Comment 2

[Leho Kraav (:macmaN @lkraav)]

I would be totally fine with a pref-based configuration.

For the toolbox controls, it's hard to tell up front. Would be nice if a rough incremental patch could be set up that just moves the toolbox container to the left as is. After working with it a few days, much more accurate feedback could be given.

Overall, the toolbox control ordering doesn't feel like a concern for me.

For the responsive inspector sidebar, I was actually unpleasantly suprised that it had a responsive life of its own. My desire would be for the CSS rules to collapse below inspector permanently. This also eliminates the window side switch problems.

Comment 3

[Leho Kraav (:macmaN @lkraav)]

(In reply to Leho Kraav (:macmaN @lkraav) from comment #2)
> 
> For the toolbox controls, it's hard to tell up front. Would be nice if a
> rough incremental patch could be set up that just moves the toolbox
> container to the left as is.

Could this be implemented as a feature-addon to be moved to core later if the concept proves to work out? It would make testing and iterating so much easier (to me).

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=f7b024c54a7573d0def135fc467cabd447e10ade

Comment 5

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1192642 - Add a left host type for the toolbox.

Review commit: https://reviewboard.mozilla.org/r/249182/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/249182/

Comment 6

[Patrick Brosset <:pbro>]

Comment on attachment 8983285 [details]
Bug 1192642 - Add a left host type for the toolbox.

https://reviewboard.mozilla.org/r/249182/#review255370

Just one comment about sharing more code. Otherwise looks great to me!
Also, I'd want to have Victoria and Brian's input on this. Let me ping them after this comment.

::: devtools/client/framework/toolbox-hosts.js:134
(Diff revision 1)
>  };
>  
>  /**
> - * Host object for the in-browser sidebar
> + * Host object for the in-browser left sidebar
>   */
> -function SidebarHost(hostTab) {
> +function LeftHost(hostTab) {

LeftHost and RightHost are 90% the same in terms of code. Can you please refactor this? Maybe move the shared code to a SideHost base class, and have LeftHost and RightHost just be subclasses that extend from it?
I see a slight difference in the create function, where the splitter and frame are not inserted the same way. One way to deal with this would be to move this to a separate function like insertSplitterAndFrame. This way this would be the only function that the 2 subclasses would need to override. Everything else would be common in SideHost.

Comment 7

[Patrick Brosset <:pbro>]

Victoria, Brian: what do you think about this? This will add a new menu item in the meatball menu "dock to left".
I think this is a great feature, but I wanted to run it by you 2 first.

Comment 8

[Brian Birtles (:birtles)]

It seems like a good feature but I wonder if it should wait for bug 1461522 to land since having to read three different text labels without icons to decide which option you want is a bit onerous.

Bug 1461522 will take a while to get right so can we land this bug but disable it until bug 1461522 lands?

Comment 9

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Brian Birtles (:birtles) from comment #8)
> It seems like a good feature but I wonder if it should wait for bug 1461522
> to land since having to read three different text labels without icons to
> decide which option you want is a bit onerous.
> 
> Bug 1461522 will take a while to get right so can we land this bug but
> disable it until bug 1461522 lands?

Judging from the screenshots in Bug 1461522, I would imagine we might want to copy chrome's Dock side menu instead of having the labels. If we are gonna have the labels, I would imagine the benefits to our users would outweigh waiting to add an icon next to the label.

Comment 10

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8983285 [details]
Bug 1192642 - Add a left host type for the toolbox.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/249182/diff/1-2/

Comment 11

[Gabriel Luong [:gl] (ΦωΦ)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=e0666587edf23131d9787149679fafa824b22d14

Comment 12

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8983285 [details]
Bug 1192642 - Add a left host type for the toolbox.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/249182/diff/2-3/

Comment 13

[Victoria Wang [:victoria]]

As :gl says, this does make me think we might need Chrome's icon row :/. I assume that kind of UI would require the custom panel of #1461522 to be finished either way though, correct? I don't have a good grasp of whether left-dock needs to be landed soon enough to warrant a stop gap solution of just having 4 text labels in the native menu.

Do we know if people who dock to side will always prefer either right-side or left-side? If so, it would be great to just include that as an option in Settings. This would keep the meatball menu smaller and more usable for those who change docking sides often.

Comment 14

[Brian Birtles (:birtles)]

I believe we were swayed away from the icon row by Jen's comment about having text labels.

I'm a bit concerned about this becoming a UX regression for the majority of users who I assume will never dock to the left. What if we only presented this option when the toolbox is currently docked vertically? Similar to the sidebar which has a "Move sidebar to right" item.

Comment 15

[Victoria Wang [:victoria]]

Ah right, sounds good then to avoid the icon row. (I always feel like it takes me a beat to click on the correct icon in Chrome's menu anyway because they're not that immediately parseable.)

Having a "move to left" option visible in vertical mode seems like a good compromise. Though if we do know that most people will only use the left or right side, I'd still suggest putting it in the settings panel.

Comment 16

[Brian Birtles (:birtles)]

Sorry, yes, you're right! A setting seems better from my understanding of the potential audience for this. (I had problems with my eyes this morning and read this bugmail squinting through one eye and overlooked that part your comment!)

Comment 17

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8983285 [details]
Bug 1192642 - Add a left host type for the toolbox.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/249182/diff/3-4/

Comment 18

[Gabriel Luong [:gl] (ΦωΦ)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=db7296cd4365d921c303e0480a376020387d0570

Comment 19

[Patrick Brosset <:pbro>]

Comment on attachment 8983285 [details]
Bug 1192642 - Add a left host type for the toolbox.

https://reviewboard.mozilla.org/r/249182/#review255722

Code changes look great. Thanks for addressing my comment.
I'm not R+ yet based on the last comments from Brian and Victoria.
In particular this one: "I'd still suggest putting it in the settings panel".

This patch does not address this yet. If there's been more discussion around this on Slack, please capture the last decision in this bug so I can ahead and R+ the patch.

Comment 20

[Gabriel Luong [:gl] (ΦωΦ)]

Harald has stated the following about burying things in the settings panel:
I don’t think we should bury left docking in Settings without good reason. The past twitter surveys by edge and safari showed surprisingly large numbers for left-docked and we already have too many buried features that users don’t find

Comment 21

[Gabriel Luong [:gl] (ΦωΦ)]

Currently, the approach is to simply add a 4th menu item for dock to left.

Comment 22

[Julian Descottes [:jdescottes]]

Comment on attachment 8983285 [details]
Bug 1192642 - Add a left host type for the toolbox.

https://reviewboard.mozilla.org/r/249182/#review255870

::: devtools/client/debugger/debugger-view.js:182
(Diff revision 4)
>     * Destroys the UI for all the displayed panes.
>     */
>    _destroyPanes: function () {
>      dumpn("Destroying the DebuggerView panes");
>  
> -    if (gHostType != "side") {
> +    if (gHostType != "right" || gHostType != "left") {

This is always true. This test should use `&&`

::: devtools/client/framework/test/browser_toolbox_hosts_telemetry.js:42
(Diff revision 4)
>  
>  function checkResults() {
>    // Check for:
>    //   - 3 "bottom" entries.
> -  //   - 2 "side" entries.
> +  //   - 2 "left" entries.
> +  //   - 2 "right" entries.

Should this be 3 `right` entries?

Comment 23

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8983285 [details]
Bug 1192642 - Add a left host type for the toolbox.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/249182/diff/4-5/

Comment 24

[Patrick Brosset <:pbro>]

Comment on attachment 8983285 [details]
Bug 1192642 - Add a left host type for the toolbox.

https://reviewboard.mozilla.org/r/249182/#review256092

Thanks Julian for the review. I missed those. Got to be more careful next time.
Also, just to confirm, we did discuss on Slack about the UX for this, and the agreement was to go for the patch as is for now.

Comment 25

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/5bbe892524aa
Add a left host type for the toolbox. r=pbro

Comment 26

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/5bbe892524aa

Comment 27

[Irene Smith]

Added the information about docking positions to this page: https://developer.mozilla.org/en-US/docs/Tools/Settings

I also added the information to the release notes for Firefox 62 here: https://developer.mozilla.org/en-US/Firefox/Releases/62

Comment 28

[Gabriel Luong [:gl] (ΦωΦ)]

LGTM

Comment 29

[Rares Doghi, Desktop QA]

Hi, This I can Confirm this issue as fixed in Firefox 64.0, Beta 65.0b6 and Nightly 66.