This supports the fact that devtools, which is hosted in an "about:" page,
does not use inline styles. They are prevented from working by the CSP defined
at devtools/client/framework/toolbox.xhtml. This patch moves The styles that
are added by the MozPanel.initialize method into the popup.css files for each
theme, where the other .panel-arrowcontent class selectors live.
Differential Revision: https://phabricator.services.mozilla.com/D78832
The background color for the tree column headers is drawn using the
system APIs, but the foreground uses custom colors, which didn't follow
theme. This can lead to unreadable text with specific colors, e.g.
leading to black on black.
Fix this by using system colors for the foreground as well. It also
adds on-hover styling to match possible background change on hover.
Differential Revision: https://phabricator.services.mozilla.com/D78073
This fixes the following issues:
- hover/active colours now look better on dark theme (match main toolbar lwtheme styles)
- radio-type items now have custom styling
- radio-type items no longer use buttons, only input[type=radio] with a subsequent label
- hover/active/selection styling for the radio items is improved
- cleans up unused CSS variables
- styling of the 'current value' boxes
- removes display:none hr elements
- uses classes for each 'row' container to simplify the CSS
Differential Revision: https://phabricator.services.mozilla.com/D77535
Using `white-space: pre` avoids collapsing multiple spaces as HTML is wont to do.
With thanks to Jelle Geerts for reporting this and providing a strategy to patch this.
Differential Revision: https://phabricator.services.mozilla.com/D77246
The z-index: initial for the keep-open class was redundant (see https://bugzilla.mozilla.org/show_bug.cgi?id=1640410#c4 ).
However, one more change was necessary to fix this bug: the .narrating class
gets z-index: 1 in narrate.css, in order to position the word highlights
below it. But the toolbar-container also gets z-index: 1, and because it
comes before the reader mode content in the DOM, its content will never
appear above the reader mode content unless it gets a higher z-index. So
we give it a z-index of 2.
Differential Revision: https://phabricator.services.mozilla.com/D76851
This problem only happens if you're scrolled down on the page and then change
font configuration settings (like line height or font size) that cause the
scroll position to change. The scroll event fires and we hide popups in
response. To fix this, we keep a cached height of the body, so that if the
page height has changed since the last scroll event, we don't immediately close
the popup.
Differential Revision: https://phabricator.services.mozilla.com/D76311
The fact that CSS set a fixed line-height on an inner element meant that the
main body of the reader mode text was not changing line height based on the CSS
variable we set on a container higher in the DOM hierarchy.
Differential Revision: https://phabricator.services.mozilla.com/D76310
See https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c2 for the
context for which this pseudo-element was added.
In the previous patch, I had to special-case range appearance because of
this pseudo-class, but that patch makes this pseudo-class completely
redundant, as now all form controls, themed and unthemed, display
outlines, unless the native theme displays a focus indicator on its own.
Remove the special case, and make ranges use outlines like everything
else rather than this bespoke pseudo-element.
Differential Revision: https://phabricator.services.mozilla.com/D74734
See https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c2 for the
context for which this pseudo-element was added.
In the previous patch, I had to special-case range appearance because of
this pseudo-class, but that patch makes this pseudo-class completely
redundant, as now all form controls, themed and unthemed, display
outlines, unless the native theme displays a focus indicator on its own.
Remove the special case, and make ranges use outlines like everything
else rather than this bespoke pseudo-element.
Differential Revision: https://phabricator.services.mozilla.com/D74734
These used to be `[anonid]` back when we used anonymous content. But now
that this is in a shadow tree we can use regular id selectors, which are
faster.
Differential Revision: https://phabricator.services.mozilla.com/D74872
We keep the ::-moz-focus-inner pseudo-element for these, so that acts
enough as a focus indicator.
We may want to opt buttons out of focus outlines altogether (given we
have the ::-moz-focus-inner style) or do something else, if we get
reports of web content showing a lot of outlines because of bug 1311444,
but for now this is better.
Differential Revision: https://phabricator.services.mozilla.com/D74723
These elements handle focus on their own. They're right now not
having outlines because they specify background-color, which disables
theming, but that is about to change.
Differential Revision: https://phabricator.services.mozilla.com/D73855
Things that were broken:
- prompts become unreadable when using dark-background lwthemes, because they
keep the window text-shadow (due to the namespace change of tabmodalprompt)
- prompts with long text without word-wrap possibilities
(e.g. `alert("x".repeat(1000))`) cause the text to escape its container.
Differential Revision: https://phabricator.services.mozilla.com/D73131