1906125 - Unify CSS rules around various tree expand arrows

Status: RESOLVED FIXED

(DevTools :: General, enhancement)

Description

[Alexandre Poirot [:ochameau]]

There is a lot of duplicated and slightly different ways to handle arrows in our various trees.
Let's try to unify that a bit, so that the various tree behaves the same, while removing a bunch of CSS rules.

Comment 1

[Alexandre Poirot [:ochameau]]

Attachment: Bug 1906125 - [devtools] Unify VirtualizedTree and Tree CSS and move SourcesTree specifics to Tree.

• make them both use .theme-twisty to show an arrow icon.
• move some specifics stylings of SourcesTree to the base class.
• make SourcesTree use the arrow React component provided by Tree class.
• use .theme-twisty instead of .arrow (which already implements rotation and colors on expand). But it uses "open" instead of "expanded" classname.
  (VirtualizedTree was already using theme-twisty)

This impacts the Source Tree, ObjectInspector (console, debugger), Watch Expressions, memory panel (dominator view).

Comment 2

[Alexandre Poirot [:ochameau]]

Attachment: Bug 1906125 - [devtools] Use default Tree stylesheets for the memory panel.

We could also drop the custom "focused" classname and instead rely on one being put by VirtualizedTree on tree-node
(like Tree is doing).

Comment 3

[Alexandre Poirot [:ochameau]]

Attachment: Bug 1906125 - [devtools] Fix arrows orientation of debugger accordion in RTL.

Comment 4

[Alexandre Poirot [:ochameau]]

Attachment: Bug 1906125 - [devtools] Implement memory panel odd background in CSS instead of JS.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a8eff52b3a26
[devtools] Unify VirtualizedTree and Tree CSS and move SourcesTree specifics to Tree. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/0c2896d93e21
[devtools] Use default Tree stylesheets for the memory panel. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/92c474b8b41a
[devtools] Fix arrows orientation of debugger accordion in RTL. r=devtools-reviewers,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/be6b3324bc2c
[devtools] Implement memory panel odd background in CSS instead of JS. r=devtools-reviewers,nchevobbe

Comment 6

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/a8eff52b3a26
https://hg.mozilla.org/mozilla-central/rev/0c2896d93e21
https://hg.mozilla.org/mozilla-central/rev/92c474b8b41a
https://hg.mozilla.org/mozilla-central/rev/be6b3324bc2c