1195727 - Tabs in Inspector's sidebar should not deform when I close DevTools

Status: RESOLVED WORKSFORME

(DevTools :: Inspector, defect, P2)

Description

[arni2033]

Attachment: Tabs in Inspector's sidebar should not deform when I close DevTools.webm

STR: (Win7, Nightly 43.0a1 (2015-08-15))
1. Open new tab
2. Open devtools, open successively all devtools tabs, record a profile (~5% buffer) in Performance tab (so that devtools were "heavy". That's necessary to see the result. Also, it's good if you run Nightly in not-multiprocess mode)
3. Switch to Inspector tab, make sure that sidebar is opened
4. Click close button in devtools

Result:       For ~0.5 second I see that tabs in sidebar gain greater height, then devtools collapse
Expectations: Tabs should remain their height.

I think that this line is responsible for this.
https://dxr.mozilla.org/mozilla-central/source/browser/devtools/framework/sidebar.js#165
>    // Moving back the tabs as a first child of the tabbox
>--->this._tabbox.insertBefore(tabs, this._tabbox.tabpanels);
>    this._tabbox.querySelector("stack").remove();
While I don't know why we need to "move back the tabs as a first child of the tabbox" (because it's already 1st child of the tabbox), I still think that line should be corrected
>-   this._tabbox.insertBefore(tabs, this._tabbox.tabpanels);
>+   this._tabbox.insertBefore(this._tabbox.tabpanels, tabs);

Comment 1

[arni2033]

>    this._tabbox.insertBefore(tabs, this._tabbox.tabpanels);
Ok, I was wrong. This line take <tabs> from <stack> and puts it between <stack> and <tabpanels>:
Before: https://dl.dropboxusercontent.com/s/bs6xyhdf527jl7o/bug%201195727%20Before.png?dl=0
After:  https://dl.dropboxusercontent.com/s/tzqurgqrpxzanea/bug%201195727%20After.png?dl=0
And the next line deletes <stack>. (I can't see why it's needed)
Maybe this bug can be fixed using CSS?

I personally think that destroying of devtools should be significantly improved:

1) Active tab in a panel  should be destroyed ONLY after all other tabs in that panel
2) Active tab in devtools should be destroyed ONLY after all other devtools tabs
3) Devtools should display a throbber indicating that the toolbox is collapsing
4) The basic elements, that define background (like tabs in this bug) should keep their position and dimentions until they are completely removed
5) If it's possible, make GUI twitch as less as possible, e.g. if breadcrumbs are scrolled to the beginning, we should start destroying last children, not the first children (as of now). Also, "opacity:0;" could be set to elements to prevent twitch.
6) Web Developer hotkeys should be disabled when toolbox is collapsing (or handling hotkeys should be improved. Because I recently found a bug related to pressing hotkeys while devtools are still collapsing)

Comment 2

[Patrick Brosset <:pbro>]

Thanks for reporting this. Would you be interested in trying to fix this bug?
It looks like you've done most of the preliminary investigation work anyway. Let me know, I can help with documentation and mentoring if needed.
I agree the tools should provide a better shutdown experience, but I think a good part of that experience should be that the tools should close really fast, and adding more logic to take things down in the right order might not help with this. I like the throbber idea. Maybe we could also hide the toolbox early and continue the destruction after.
In any case, I think this bug should just be about the tabs, we can file subsequent bugs to improve the rest as needed.

Comment 3

[arni2033]

When I tried removing attribute [flex="1"] from those tabs, everything looked fine.
I tested that 2015-08-19 using Browser Toolbox. I just thought that it may be the simplest solution

If that solution is OK, then the JavaScript line (which sets that attribute) should be deleted.

Comment 4

[Patrick Brosset <:pbro>]

Filter on CLIMGING SHOES