Add the three row view when docked to the side
Categories
(DevTools :: Inspector, enhancement, P2)
Tracking
(Not tracked)
People
(Reporter: mbalfanz, Unassigned)
References
(Blocks 2 open bugs)
Details
(Whiteboard: [dt-q])
Attachments
(2 files, 2 obsolete files)
3pane-feedback01.png
Currently we have 2 different layouts when devtools is docked to the side: 3 columns and a T-shape. The T-shape proofs to be difficult to use for smaller widths. It would be good to add a 3rd option for this scenario: 3 rows. ||| -> T -> ☰ A single panel needs roughly 250px - 300px width to be usable comfortably. So I suggest that we use the 3 row layout at a 600px width or below.
|
Reporter | |
Updated•6 years ago
|
|
||
Updated•6 years ago
|
|
|
||
Comment 1•6 years ago
|
||
Likely a duplicate of bug 1391526. I'm going to rename this because this isn't only about when devtools is docked to the side. The 3 columns and T-shape layouts also occur when devtools is docked to the bottom (you have to make your browser window quite a bit narrowed to see the T-shape).
Martin has explained more about how he would like the panel layout to work:
Docked to bottom toolbox:
- on first run, all 3 panels should take up exactly 1/3 in width (equal size)
- when the user resizes, then sizes should be saved so the next time devtools is opened, it will restore correctly
- when toggling between 2-pane and 3-pane mode, the right most pane should maintain it’s width as long is possible. I want people to be able to click the toggle button without it moving.
- example 1: 66%-33% => clicking the toggle => 33%-33%-33%
- example 2: 75%-25% => 50%-25%-25%
- example 3: 50%-25%-25% => 75%-25%
- example 4: 30%-70% => 30% - 35% - 35% (<= here doubling the right pane wouldn’t work, so we find better fitting sizes instead. this should happen whenever a min-width threshold for a panel can’t be kept, which I believe is 360px for the markup view. so if expanding through doubling would not manage to keep the 360px min width, we have to make it fit potentially shrinking the sizes of the right panel)
- if we want to store/restore user settings, it has to store them separate. so 60%-15%-25% => click toggle => 75%-25% => make right panel bigger to 30% => click toggle again => 55%-15%-30% (<= the right most panel should maintains new 30%, middle pane get’s user set 15% restored)
As a guiding principal, the UI control should move as little as possible around when the user clicks it, so you can quickly toggle 2-pane/3-pane on and off. it should only move if it doesn’t fit otherwise.
My take on this
On first run, all 3 panels should take up exactly 1/3 in width (equal size)
Side-by-side mode
panel3width is shared between 2 and 3 panel side-by-side modes
Changing from 2 panels to 3
if (width - panel3width - storedPanel2Width >= minPanelWidth)
panel2width = storedPanel2Width
else if (width - panel3width * 2 >= minPanelWidth)
panel2width = panel3width
else
panel3width = width - minPanelWidth * 2
panel2width = minWidth
Changing from 3 panels to 2
panel1 += panel2width
Stacked Mode:
panel3height is shared between 2 and 3 panel stacked modes
Changing from 2 panels to 3
if (height - panel3height - storedPanel2Height >= minPanelHeight)
panel2height = storedPanel2Height
else if (height - panel3height * 2 >= minPanelHeight)
panel2height = panel3height
else
panel3height = height - minPanelHeight * 2
panel2height = minHeight
Changing from 3 panels to 2
panel1 += panel2height
|
||
Updated•5 years ago
|
|
|
||
Updated•5 years ago
|
|
|
||
Updated•5 years ago
|
@Martin Gabe is holding off reviewing this until we have come to some agreement on how the behaviour should be. Can you apply the patch and let us know if you like the behaviour?
Remember that as we change from one host / layout to the other the panel sizes are saved.
To reset to default you need to reset devtools.inspector.panel.sizes in about:config before opening the tools.
|
|
Reporter | |
Comment 17•5 years ago
•
|
||
I was playing with it for a while and I think that storing/restoring sizes was a bad idea. The behavior can be unexpected, esp. when you work with different positions of devtools (which I for example do while using RDM).
In the video attached, you can see one of those oddities: I switch from 2pane to 3pane, and the height of the panel changes. That shouldn't happen.
I feel that we would be better of when we don't store sizes, and instead double/split the 3rd pane.
I leave the final call to Victoria :)
|
||
Comment 18•5 years ago
|
||
This build is looking good!
Yes, I agree with Martin about the 2-3pane switch going to equal double/split sizes. It seems safer, for avoiding buggy situations like in Martin's video, and I don't think people will switch between 2 and 3 pane often enough to really care about custom sizes here.
(We would still store users' sizes when opening/closing DevTools though, I assume?)
This might not be the perfect solution but it would be great to get this into Nightly so we can get feedback, especially on the 3-stack experience.
Maybe later on, I can go into the rabbit hole I started thinking about where instead of T shape we should do an F shape ;D. The middle case of T/F-shape is going to be less common so no need to block on it now.
| Comment hidden (obsolete) |
|
||
Comment 20•5 years ago
|
||
I don't think we want to save 3 different settings for the docking modes. I believe based on the comments, we only want to save the width, height, hostType when we close. I would imagine when we resize to the thresholds that changes the mode, we would resize these panels to a reasonable default like panel 2 and 3 are both equal widths/height as we have done in the current existing 3 pane implements.
Also, the toggling behaviour from 2 to 3 pane should probably follow the existing behaviour:
If doubling the sidebar's width is less than half the toolbox's width, then make 2 sidebars of equal width.
Otherwise, make all 3 panels equal width.
https://searchfox.org/mozilla-central/source/devtools/client/inspector/inspector.js#658-690
I have updated the table according to Gabe's comments.
|
|
||
Comment 22•5 years ago
•
|
||
Looking good and I appreciate the clear names for everything :).
One thought:
Seems like 2-panel-stacked and one-over-two should be 50:50 height. Giving the markup view 66% height just seems like too much. (I do like markup having 66% width in 2-side-by-side, however. This is based on how I see the HTML, but interested in other opinions.)
In both cases: starting up those two modes, but also switching from 3-stacked, it seems like the two 'rows' should be 50% tall.
|
||
Comment 23•5 years ago
•
|
||
(In reply to Victoria Wang [:victoria] from comment #22)
Looking good and I appreciate the clear names for everything :).
One thought:
Seems like 2-panel-stacked and one-over-two should be 50:50 height. Giving the markup view 66% height just seems like too much. (I do like markup having 66% width in 2-side-by-side, however. This is based on how I see the HTML, but interested in other opinions.)
In both cases: starting up those two modes, but also switching from 3-stacked, it seems like the two 'rows' should be 50% tall.
I have updated the table to make 2-panel-stacked mode 50%:50%. Of course this means that we can no longer share panel 3 height between 2-panel-stacked, 3-panel-stacked and one-over-two modes.
This also means that switching between 2-panel-stacked and 3-panel-stacked modes could result in a change in panel height as per Martin's video but until we have more rounds of feedback I have added this info to the table.
Before I make any more changes I want to make sure we are all on the same page... here is what we have so far:
| Mode | Default | If panel 3 dimensions saved | Shared |
|---|---|---|---|
| 2 panel side-by-side | 66%:33% | - | Panel 3 width is shared between 2 and 3 panel side-by-side modes |
| 3 panel side-by-side | 33%:33%:33% | if (panel 3 width < toolbox width / 3) then Panel 2 will open at panel 3 width else open at 33%:33%:33% | |
| 2 panel stacked | 50%:50% | - | Panel 3 height is shared between 2 panel stacked mode and one-over-two mode |
| 3 panel stacked | 33%:33%:33% | if (panel 3 height < toolbox height / 3) then Panel 2 will open at panel 3 height else open at 33%:33%:33% | Panel 3 height is not shared with any other mode |
| one-over-two | splitters at 50% width:50% height | Panels 2 & 3 will open at panel 3 height |
Save only on close.
Save height as a percentage.
@gl, @martin and @victoria As per your comments we now use this to determine some panel widths and heights:
if (panel 3 width < toolbox width / 4) then Panel 2 will open at panel 3 width else open at 33%:33%:33%
In my opinion toolbox width / 3 would be better as that would then match the 33%:33%:33% split better... 1/4 panel is not very much space.
|
|
Reporter | |
Comment 25•5 years ago
|
||
A change in height when going from 2 panel stacked to 3 panel stacked seems ok (if required). In my video however, we're going from 2 panel stacked to one-over-two, and there should be no reason for a change in height in this case. Instead, the height should remain the same and panel 2 and 3 should get a 50%:50% side-by-side split.
As for your formula, I think it should be in thirds, too. (toolbox {width, height} / 3). As you said, it matches the split better.
(In reply to Martin Balfanz [:mbalfanz] from comment #25)
As for your formula, I think it should be in thirds, too. (
toolbox {width, height} / 3). As you said, it matches the split better.
Done
|
|
||
Comment 27•5 years ago
|
||
There's also the case where we have open and closed the toolbox (prev width/height has been saved), and the browser was resized. I believe the existing patch saves the width/height in ratios, but I think if the panels don't fit nicely anymore, we should quickly invalidate the size of the panels we were to restore and go with the default first open sizes.
|
|
||
Comment 29•5 years ago
|
||
I think this sounds good - would be interested in a try .dmg so I can test it out :)
| Comment hidden (obsolete) |
I have implemented the table according to the specifications in comment 30.
@victoria I have sent you a .dmg package over slack so if you could give it a try and leave some feedback that would be great.
@martin @gl Can you give it another whirl and give me your feedback? If you want a .dmg I can generate one for you or you could just grab one from try.
|
|
Reporter | |
Comment 33•5 years ago
|
||
Thanks Mike! I think we're getting closer :)
Here are 3 things I noticed, see screenshot attached.
I have taken Martin's comments into account and updated the table:
| Mode | Default | If panel 3 dimensions saved | Shared |
|---|---|---|---|
| 2 panel side-by-side | 66%:33% | - | Panel 3 width is shared between 2 and 3 panel side-by-side modes |
| 3 panel side-by-side | 33%:33%:33% | if (panel 3 width < toolbox width / 3) then Panel 2 will open at panel 3 width else open at 33%:33%:33% | |
| 2 panel stacked | 50%:50% | - | Panel 3 height is shared between 2 panel stacked, 3 panel stacked and one-over-two modes |
| 3 panel stacked | 33%:33%:33% | if (panel 3 height < toolbox height / 3) then Panel 2 will open at panel 3 height else open at 33%:33%:33% | |
| one-over-two | splitters at 50% width:50% height | Panels 2 & 3 will open at panel 3 height |
Save only on close and on toggle (saving on toggle is necessary as panel 3 width is shared between two and three panel side-by-side modes).
|
|
Reporter | |
Comment 35•5 years ago
|
||
Gave it another testing round. The docked to side issue is gone, so I think it's ready to go now :)
|
|
||
Comment 36•5 years ago
|
||
I have been testing this, and I think the saved dimensions requirement got misinterpreted from when I was talking about toggling between 2 to 3 pane panel and I unfortunately didn't catch it from interpreting the table.
For 3 panel side-by-side + if panel 3 dimensions saved,
"if (panel 3 width < toolbox width / 3) then Panel 2 will open at panel 3 width else open at 33%:33%:33%". This was describing the toggling behaviour from 2 to 3 panel panel.
Unless I am still mistaken from the discussions so far, I think we still want to restore the previous dimensions when we reopen the toolbox.
|
|
Reporter | |
Comment 38•5 years ago
|
||
Yes, I agree. When closing/reopening the toolbox we want to restore the previous dimensions.
I know we had this discussion briefly on Slack, and you referred to a comment of me saying that restoring should not happen. I think you meant comment 17. Looking at the comment again I was talking about toggling between 2pane/3pane modes, not opening/closing the toolbox. Sorry about the confusion :(
So just to confirm this before I make any changes:
- When toggling between 2 and 3 panel side-by-side modes you want panel2 width to match panel3 width when it can.
- When panel2 or panel3 have been resized if we open in 3 panel side-by-side mode we should restore both panel's previous sizes.
|
|
Reporter | |
Comment 40•5 years ago
|
||
- When toggling between 2 and 3 panel side-by-side modes you want panel2 width to match panel3 width when it can.
Yes.
- When panel2 or panel3 have been resized if we open in 3 panel side-by-side mode we should restore both panel's previous sizes.
Not sure I fully understand this, so here's my attempt: If I close and reopen devtools I want to see the exact same again, that means the same layout (2 vs 3 pane) with the same sizes I set before closing devtools.
Hope that helps!
Depends on D20812
|
||
Comment 44•2 years ago
|
||
The following patches are waiting for review from an inactive reviewer:
| ID | Title | Author | Reviewer Status |
|---|---|---|---|
| D20812 | Bug 1503203 - Adjust the 3-pane layout of the inspector so each pane can be used comfortably r?gl! | miker | gl: Resigned from review |
| D28812 | Bug 1503203 - Create tests for 3 panel layout r?gl! | miker | gl: Resigned from review |
:miker, could you please find another reviewer or abandon the patch if it is no longer relevant?
For more information, please visit auto_nag documentation.
|
|
||
Updated•2 years ago
|
|
|
||
Updated•2 years ago
|
|
||
Updated•2 years ago
|
Description
•