1525939 - Consider using the new shared Accordion

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

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

In Bug 1518487, an accessible accordion component that is identical to debugger.html will be landed. We should consider moving all the Accordion components that are used in the inspector over to it.

Comment 1

[Florens Verschelde :fvsch]

Attachment: Bug 1525939 - Use shared Accordion component in Inspector; r=yzen

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bd5ca045d481
Use shared Accordion component in Inspector; r=yzen

Comment 3

[Dorel Luca [:dluca]]

https://hg.mozilla.org/mozilla-central/rev/bd5ca045d481

Comment 4

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

@fvsch: Just wanted to get an executive summary about your patch. Does this change move the entire devtools to using a shared Accordion component?

Thank you for the clean up as well!

Comment 5

[Florens Verschelde :fvsch]

So this patch moved all of Inspector to use the new shared Accordion component.
Other panels already used that component (Accessibility) or were untouched (Debugger, Network).

• Untouched: devtools/client/debugger/src/components/shared/Accordion.js
• Removed: devtools/client/inspector/layout/components/Accordion.js
• Tweaked to keep feature parity: devtools/client/shared/components/Accordion.js

On top of that, there are some CSS changes across all remaining Accordion and Accordion-like implementations to make sure we use the same background color (normal and on hover) across DevTools, because that was a low hanging fruit (fixes https://github.com/firefox-devtools/ux/issues/24).

Next I'll probably want to use the shared Accordion in Network, which has a bunch of small visual and UX issues with its TreeView-styled-as-accordion (bug 1403203).

For now I'm not considering replacing the Debugger's own Accordion, which works well. Not sure it's worth the effort, but we'll see.