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

VERIFIED FIXED in Firefox 62

Status

enhancement
P3
normal
VERIFIED FIXED
4 years ago
6 months ago

People

(Reporter: macmaN, Assigned: gl)

Tracking

({dev-doc-complete})

39 Branch
Firefox 62
Dependency tree / graph

Firefox Tracking Flags

(firefox62 verified, firefox64 verified, firefox65 verified, firefox66 verified)

Details

Attachments

(2 attachments)

Reporter

Description

4 years ago
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?
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?
Reporter

Comment 2

4 years ago
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.
Reporter

Comment 3

4 years ago
(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).
Assignee

Updated

Last year
Assignee: nobody → gl
Status: NEW → ASSIGNED
Comment hidden (mozreview-request)

Comment 6

Last year
mozreview-review
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.
Attachment #8983285 - Flags: review?(pbrosset)
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.
Severity: normal → enhancement
Flags: needinfo?(victoria)
Flags: needinfo?(bbirtles)
Priority: -- → P3
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?
Flags: needinfo?(bbirtles)
Assignee

Comment 9

Last year
(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 hidden (mozreview-request)
Comment hidden (mozreview-request)
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.
Flags: needinfo?(victoria)
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.
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.
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 hidden (mozreview-request)

Comment 19

Last year
mozreview-review
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.
Attachment #8983285 - Flags: review?(pbrosset)
Assignee

Comment 20

Last year
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
Assignee

Comment 21

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

Updated

Last year
Attachment #8983285 - Flags: review?(pbrosset)

Comment 22

Last year
mozreview-review
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 hidden (mozreview-request)

Comment 24

Last year
mozreview-review
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.
Attachment #8983285 - Flags: review?(pbrosset) → review+

Comment 25

Last year
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/5bbe892524aa
Add a left host type for the toolbox. r=pbro
Assignee

Updated

Last year
Keywords: dev-doc-needed

Comment 26

Last year
bugherder
https://hg.mozilla.org/mozilla-central/rev/5bbe892524aa
Status: ASSIGNED → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 62
Depends on: 1467821
Depends on: 1467679

Updated

Last year
Product: Firefox → DevTools
Depends on: 1470074

Comment 27

Last year
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
Flags: needinfo?(gl)
Assignee

Comment 28

11 months ago
LGTM
Flags: needinfo?(gl)

Comment 29

6 months ago
Hi, This I can Confirm this issue as fixed in Firefox 64.0, Beta 65.0b6 and Nightly 66.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.