1123784 - Switching between runtime apps and closing toolboxes is slow

Status: RESOLVED FIXED

(DevTools Graveyard :: WebIDE, defect)

Description

[Alexandre Poirot [:ochameau]]

On my laptop, it takes more than a second to switch between projects or just close the toolbox.
It doesn't end up being because of some slowness on device/actors...
It ends up being because of css/DOM issue on client.
When we open/close a runtime toolbox, we switch the toolbox into a fullscreen mode and we are hiding the #deck, that contains all panel iframes with a display: none.
That ends up being time consuming and slows everything down.
Let's try to hide the #deck differently to make it fast!

Comment 1

[Alexandre Poirot [:ochameau]]

Attachment: patch v1

This is my best CSS skills to make it faster.
I had to also target iframe css in order to make the #deck really be 0px height.

Comment 2

[Alexandre Poirot [:ochameau]]

Comment on attachment 8551879 [details] [diff] [review]
patch v1

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

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

Comment 3

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Comment on attachment 8551879 [details] [diff] [review]
patch v1

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

Huh, it is indeed much faster!

I tried a few variations, but I couldn't really find anything better.

Paul, any ideas on a different approach or just go with this?

::: browser/devtools/webide/themes/webide.css
@@ +296,5 @@
>  
>  #notificationbox[toolboxfullscreen] > .devtools-horizontal-splitter,
> +#notificationbox[toolboxfullscreen] > #deck,
> +#notificationbox[toolboxfullscreen] > #deck > iframe {
> +  /*-moz-box-flex: 0;*/

Remove this

Comment 4

[Paul Rouget [:paul]]

Comment on attachment 8551879 [details] [diff] [review]
patch v1

As fair as I can tell, the problem is flushing the huge list of pending reflows from devicepreferences.xhtml. I see 2 options: keep the pending reflows (what this patch does) or only build the UI of devicepreferences.xhtml when it's displayed.

Maybe you can display:none/visibility:collapse the table when the document is not visible (use the page visibility API).

Anyway, until devicepreferences.xhtml is built lazily, this approach (max-height:0) works.

Comment 5

[Alexandre Poirot [:ochameau]]

Attachment: patch v2

Comment 6

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/integration/fx-team/rev/750f76c08fec

Comment 7

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/750f76c08fec