The new focus indicator is bigger and has a better contrast, making it more accessible
than the thin dotted line we had previously.
It also includes a white box-shadow so even on our blue "active/selected" backgrounds,
the indicator is still visible (e.g. in the markup view, for a selected node, with
focus on badges / text inputs).
Finally, I tried to go over the elements of the shared components and most used
panels to adjust the outline offset when it was not visible/clipped, or when
it could be conflated with the focused element border/background.
Differential Revision: https://phabricator.services.mozilla.com/D192185
This Rep hooks into the default display of objects and outputs a JsonML (http://www.jsonml.org) representation of them if custom formatters are enabled and a custom formatter is defined for them.
It handles headers and bodies of custom formatters. Bodies are handled asynchronously from their corresponding headers.
Because custom formatters allow a website to provide CSS styles to be used for formatting an object within the DevTools, those styles are filtered first to avoid breaking their layout.
It is currently only applied to the output of the Webconsole and within the variable value popup and the watch expressions within the Debugger.
***
Differential Revision: https://phabricator.services.mozilla.com/D140119
Changes impact theme-twisty icons in the TreeView component:
- Make sure theme-twisty uses the selection color (white) in selected rows;
but override that style for Network details accordion headers.
- Improve the vertical alignment and pixel-perfect icon rendering by
making sure the icon element takes the full available height (16px)
and avoiding assymetrical padding (affects the rendering of centered
background-image, making them blurry on 1x displays).
- Tweak the horizontal spacing of theme-twisty icons so that they take
up a total of 20px width (similar to what is used in Debugger and
Inspector), versus 17px previously.
Differential Revision: https://phabricator.services.mozilla.com/D29550
Nicolas Chevobbe