1288238 - Improvement: Move computed devtools-toolbar just below the Box Model

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P1)

Description

[magicp]

Attachment: Move-computed-devtools-toolbar-just-below-the-box-model.png

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20160720030208

Steps to reproduce:

In Bug 1247729, the box model panel into the computed view. It is a good idea, and also we can improve usability more.


Actual results:

- Filter inputbox and the property view are divided
- Box model will be confused as a filter result
- Scrollbar affects the box model panel


Expected results:

Move computed devtools-toolbar just below the Box Model. Please find attached image.

Comment 1

[magicp]

Attachment: example-2.png

Move layout-info into layout-header
- layout-info is always visible
- Reduce height of layout-container

Comment 2

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

Thanks for the suggestion magicp. I think it is a good idea to make the move just want to run this with our UX. I know there are varying opinions in terms of the consistency with the placement of the filter inputbox between the 2 views.

Comment 3

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Gabriel Luong [:gl] (ΦωΦ) from comment #2)
> Thanks for the suggestion magicp. I think it is a good idea to make the move
> just want to run this with our UX. I know there are varying opinions in
> terms of the consistency with the placement of the filter inputbox between
> the 2 views.

Thanks Gabe! I agree with you and magicp, though—this seems like a solid change, seems like it's placement is pretty weird right now.

I think this is a P1 as it's based on the Box Model work you did, Gabe—can you take this on right now?

Comment 4

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

Attachment: 1288238.patch [1.0]

Comment 5

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

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

Comment 6

[Tim Nguyen :ntim]

I haven't tested the patch, but it would be nice if the toolbar was sticky. If you scroll down past the box model view, the toolbar would stick to the top.

Comment 7

[Julian Descottes [:jdescottes]]

Comment on attachment 8773633 [details] [diff] [review]
1288238.patch [1.0]

Review of attachment 8773633 [details] [diff] [review]:
-----------------------------------------------------------------

Code change looks good, thanks! 

While we are discussing height/space issues, I propose (again :)) to only use the compact version of the box model.

I also really like magicp's suggestion in attachment 8773176 [details], displaying a summary of the layout info when the box is collapsed. 
Would be nice to track this in a follow up if we don't handle it in this bug.

Comment 8

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

Attachment: 1288238.patch [2.0]

Comment 9

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

https://hg.mozilla.org/integration/fx-team/rev/48cee0fccdb3369df7af58c63329a25fb088832b
Bug 1288238 - Move the computed toolbar below the box model r=jdescottes

Comment 10

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/48cee0fccdb3