Use the same expand arrow icon as Inspector, Console etc.

[fvsch]

We updated the expand arrow icon recently (ux issue) and implemented the new icon in mozilla-central but not yet in Debugger/Reps.

The correct icon can be found here:
https://searchfox.org/mozilla-central/source/devtools/client/themes/images/arrow.svg

It's a 10x10 icon, but is visually just 8x8. It will probably appear a little bit smaller than the current icon in Debugger.

When it's implemented as an icon-only button (e.g. if the user needs to click the icon itself, rather than the surrounding label or row), we should aim for a minimum button size of 14x14 pixels (which is tiny, but better than 10x10, and a bigger button often doesn't work with our small text and line-height).

[darkwing]

@fvsch Could you detail where this would be implemented? Sources Tree? Accordion? Object Inspector?

[fvsch]

All of them. :)

One way to proceed is to take https://searchfox.org/mozilla-central/source/devtools/client/themes/images/arrow.svg, remove the fill so that it's fully black, and use that to replace the code of https://github.com/devtools-html/debugger.html/blob/master/assets/images/arrow.svg

Then we need to do a pass on every place that uses this icon, to make sure the icon is rendered at 10x10 (not smaller, not bigger).

For example in the Sources tree, currently we have an <img class="arrow"> (perhaps changed to <span class="arrow"></span> in a recent PR), which is 9x9 pixel and uses mask: url("resource://devtools/client/debugger/new/images/arrow.svg") (a 16x16 SVG image). Since the whole row is clickable, having a small image here is not an issue, but it should be 10x10 pixels to render the new icon correctly.

So with the new icon, we need to change the image's width and height to 10px, probably remove 1px from its margin-inline-end and/or margin-top to keep a nice alignment, and call it a day.
(For vertical alignment, we should probably remove any vertical margin, and align the bottom of the icon with the text's baseline, for example with vertical-align: -1px. In my experience that's more reliable than vertical-align: middle, which often ends up too low by 1 or 2 pixels.)

Second example: the pane header arrows. Here we use the same icon I believe, but injected as SVG nodes in the DOM, and sized at 10px. We could use the icon as a mask here as well, and apply it directly to the parent <i class="arrow">...</i> (and not inject the SVG at all).

Then there is the object inspector, and maybe some other uses in the stack trace pane I believe?

Oh, and the arrow's color (so, the background color of the masked elements) should be one of these two variables:

• --theme-twisty-fill (a shade of grey specific to the current Light or Dark theme)
• --theme-twisty-selected-fill (the color to use on top of a "selected" blue line, I believe it's pure white in both themes; this color should be used at least for selected rows in the Sources tree).

[ash-tamraz]

/claim

[claim]

Thanks for claiming the issue! 👋

Here are some links for getting setup, contributing, and developing. We're always happy to answer questions in slack! If you become busy, feel free to /unclaim it.

🦊 Debugger team!

[darkwing]

Hello @ash-tamraz! Are you still working on this or should we open it up?

[ash-tamraz]

I'm still working on this, @darkwing, just taking longer than I wanted. Sorry about that!

[darkwing]

No problem @ash-tamraz ! We appreciate your efforts!