`MouseEvent.pointerId` is `undefined` so that `setPointerCapture(undefined)`
means `setPointerCapture(0)` and it captures both click of mouse and first
touch of touch input devices. It needs to listen to `pointerdown` event to
get the correct `pointerId` value. Then, it can use only `pointerdown` and
`pointerup` because they are fired before `mousedown` and `mouseup`.
Additionally, it handles a drag while a mouse button is pressed. Therefore,
it can ignore pointer events which are caused by other devices.
Although it's not required explicitly to release the capture when the pointer
is up, it needs to release capturing the pointer if `Escape` is pressed.
Therefore, this patch keeps the explicit release call.
Depends on D217216
Differential Revision: https://phabricator.services.mozilla.com/D217217
We could also drop the custom "focused" classname and instead rely on one being put by VirtualizedTree on tree-node
(like Tree is doing).
Differential Revision: https://phabricator.services.mozilla.com/D216025
- 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).
Differential Revision: https://phabricator.services.mozilla.com/D215637
We want to use the color for stylesheet location in the rules view, which doesn't
load component-frame.css, so let's move the custom property to variables.css, and
rename it so it's a bit more explicit.
Differential Revision: https://phabricator.services.mozilla.com/D213244
This should allow the number of hidden messages to be notified to
screen reader users.
We update the Console FilterBar behavior to always show the "X hidden" message
when the input is focused, so screen reader can also pick up when no messages
are hidden.
Differential Revision: https://phabricator.services.mozilla.com/D213181
Now that the a11y engine correctly traverses aria-labelledby during name computation per the spec, the aria-labelledby overrides the content of the cell when computing the name for the tree item.
Strictly speaking, putting aria-labelledby on a span is a spec violation these days anyway.
Differential Revision: https://phabricator.services.mozilla.com/D211503
We make the focused tab appear in fronts of the others,
so the box-shadow of the focus-indicator applies properly
on each side.
We also hide the small line on active tab when it is also
focused, so we avoid it to overlap with the focus-indicator
outline.
Differential Revision: https://phabricator.services.mozilla.com/D210818
We were calling this getFilename many times from many callsites.
Cache it once for all on the source object.
Also clarify what we typically display in the UI:
* we display internal ID for source without a URL,
* we strip query/search parameters,
* we decode the URI string for special characters,
* index files, i.e. files loaded without a file name, are named "(index)",
* we omit the internal ":formatted" URL prefix used for pretty printed sources.
Differential Revision: https://phabricator.services.mozilla.com/D202442
The CSS property was applied broadly on all element with
a objectBox parent, which was bad for performance.
We now use `Services.intl.stringHasRTLChars` to detect if the string we're going
to render has some RTL chars, and in such case, we add a `has-rtl-char` class
to the element so we can target it in CSS.
Differential Revision: https://phabricator.services.mozilla.com/D202200
The CSS property was applied broadly on all element with
a objectBox parent, which was bad for performance.
We now use `Services.intl.stringHasRTLChars` to detect if the string we're going
to render has some RTL chars, and in such case, we add a `has-rtl-char` class
to the element so we can target it in CSS.
Differential Revision: https://phabricator.services.mozilla.com/D202200
It allows
* toggling Source Map support entirely
* open the source map URL (when a bundle file is currently selected)
* open the mapped source (original or bundle)
* toggle the "open original source by default" setting
* show source map status (source map error, is it original or bundle file, is this a regular source?)
Differential Revision: https://phabricator.services.mozilla.com/D187577
It allows
* toggling Source Map support entirely
* open the source map URL (when a bundle file is currently selected)
* open the mapped source (original or bundle)
* toggle the "open original source by default" setting
* show source map status (source map error, is it original or bundle file, is this a regular source?)
Differential Revision: https://phabricator.services.mozilla.com/D187577
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
The frame elements already had the correct roles assigned,
but this was made completely useless because we had a
`display: contents` on them, which strips any accessibility role.
This was done for layout purpose that we now can do with
subgrids, so we update the component's CSS.
We also update the markup so copying stacktrace still works as expected.
A webconsole test is added to ensure those stactkrace frames
can be navigated with the keyboard.
Differential Revision: https://phabricator.services.mozilla.com/D190594
The frame elements already had the correct roles assigned,
but this was made completely useless because we had a
display: contents on them, which strips any accessibility role.
This was done for layout purpose that we now can do with
subgrids, so we update the component's CSS.
A webconsole test is added to ensure those stactkrace frames
can be navigated with the keyboard.
Differential Revision: https://phabricator.services.mozilla.com/D190594
Julian Descottes