Closed Bug 1123784 Opened 7 years ago Closed 7 years ago

Switching between runtime apps and closing toolboxes is slow

Categories

(DevTools Graveyard :: WebIDE, defect)

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 38

People

(Reporter: ochameau, Assigned: ochameau)

Details

Attachments

(1 file, 1 obsolete file)

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!
Attached patch patch v1 (obsolete) — Splinter Review
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 on attachment 8551879 [details] [diff] [review]
patch v1

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

https://treeherder.mozilla.org/#/jobs?repo=try&revision=3132b738a757
Attachment #8551879 - Flags: review?(jryans)
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
Attachment #8551879 - Flags: review?(jryans)
Attachment #8551879 - Flags: review+
Attachment #8551879 - Flags: feedback?(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.
Attachment #8551879 - Flags: feedback?(paul) → feedback+
Attached patch patch v2Splinter Review
Attachment #8551879 - Attachment is obsolete: true
https://hg.mozilla.org/mozilla-central/rev/750f76c08fec
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 38
Product: Firefox → DevTools
Product: DevTools → DevTools Graveyard
You need to log in before you can comment on or make changes to this bug.