Add logic to apply theme colors to Feature Callout based on where it's
going to show. We can use in-content CSS properties for Firefox View and
other themed system pages, but not for PDF.js, nor for any callouts we
might show in the browser chrome in the future. For the browser chrome
in general, we can use the lightweight theme properties directly, in the
same way the chrome frontend does. But PDF.js is a special case, since
although it exists in the chrome, it's meant to appear like it's in the
PDF.js viewer. And the PDF.js viewer has its own theme totally
independent of everything else. So this dynamically applies themes from
different sources.
This also fixes the bug where the PDF.js color scheme could mismatch the
PDF.js viewer if the browser theme and system color scheme don't match,
e.g. where system color scheme is light but a dark theme is installed,
or vice versa. For PDF.js specifically, we can use the
-moz-content-prefers-color-scheme media query to follow the color scheme
as it exists in the PDF.js viewer page instead of the color scheme in
the chrome window where the Feature Callout actually exists.
It also adds or modifies some colors that were previously missing or
different from the prototype, fixes the illegibility of buttons in HCM
and forced colors mode, and makes some other minor color changes.
Differential Revision: https://phabricator.services.mozilla.com/D173088
The schema still imposes the following restrictions:
- Having "template" present makes "content" and "id" required.
- Having "content" present makes "template" and "id" required.
Template and content are dependent on eachother because we do not know how to
interpret content without a template and we a template with no content to
interpret is useless.
If we have a template and content, then we also need an ID for the message
because we cannot reference the message content except by its ID.
Differential Revision: https://phabricator.services.mozilla.com/D172458
The schema still imposes the following restrictions:
- Having "template" present makes "content" and "id" required.
- Having "content" present makes "template" and "id" required.
Template and content are dependent on eachother because we do not know how to
interpret content without a template and we a template with no content to
interpret is useless.
If we have a template and content, then we also need an ID for the message
because we cannot reference the message content except by its ID.
Differential Revision: https://phabricator.services.mozilla.com/D172458
The schema still imposes the following restrictions:
- Having "template" present makes "content" and "id" required.
- Having "content" present makes "template" and "id" required.
Template and content are dependent on eachother because we do not know how to
interpret content without a template and we a template with no content to
interpret is useless.
If we have a template and content, then we also need an ID for the message
because we cannot reference the message content except by its ID.
Differential Revision: https://phabricator.services.mozilla.com/D172458
Currently, the Glean `newtab` ping and legacy scalars collect
impressions and clicks for sponsored (Pocket and Contile) tiles, but
not organic tiles from Places.
This commit adds:
* Support for recording organic impressions to the
`TopSiteImpressionWrapper` component.
* Support for recording organic clicks to the `TopSiteLink`
component.
* Instrumentation for recording organic impressions and clicks,
separate from sponsored ones, to `TelemetryFeed`.
Differential Revision: https://phabricator.services.mozilla.com/D171830
This also fixes a bug in ASRouter devtools that prevented evaluation of
expressions containing nested promises. Objects containing promises are now
correctly serialized to the ASRouter devtools and expressions evaluate
correctly.
Differential Revision: https://phabricator.services.mozilla.com/D169408
This also fixes a bug in ASRouter devtools that prevented evaluation of
expressions containing nested promises. Objects containing promises are now
correctly serialized to the ASRouter devtools and expressions evaluate
correctly.
Differential Revision: https://phabricator.services.mozilla.com/D169408
Fixes the border radius and color/style of the outline applied to
feature callouts when they are focused. Also applies the focus ring to
the callout's arrow with some CSS changes.
Differential Revision: https://phabricator.services.mozilla.com/D170524
Fixes the border radius and color/style of the outline applied to
feature callouts when they are focused. Also applies the focus ring to
the callout's arrow with some CSS changes.
Differential Revision: https://phabricator.services.mozilla.com/D170524
Remove all the transition-in and transition-out animations from the
Spotlight dismiss button, leaving the dialog-initial and dialog-last
animations, anticipating that all our messages will either have a
dismiss button on every screen or on none of the screens.
Differential Revision: https://phabricator.services.mozilla.com/D170527
This patch does two things:
1. Brings focus into the add/edit top site dialogs when they are opened.
2. Sets the `aria-haspopup=dialog` attribute on the buttons that open the dialogs. This helps assistive technologies announce that a dialog is being opened before it opens.
Differential Revision: https://phabricator.services.mozilla.com/D168564
Adds new "dismiss" about:welcome action that can be used to close Spotlight modals, sending a DISMISS telemetry ping.
This will allow us to configure buttons permitting a user to exit a multistage Spotlight modal on any screen (currently we can only do this for the last screen and for single screen messages).
Depends on D165254
Differential Revision: https://phabricator.services.mozilla.com/D165981
Unify the values of "source" and "page" as used in FeatureCallout.sys.mjs:
- Explicitly pass in a value for "page" when instantiating a Feature Callout and use this for the value of "page" when sending Feature Callout telemetry and as the "source" when making calls to `sendTriggerMessage`. This avoids the risk of including non-about: page URLs or PDF file extensions in our telemetry.
- Set the value of "page" in an HTML data attribute that can be accessed for use in about:welcome telemetry for Spotlight and Feature Callouts.
- Update references to the page value previously used as the page/source for telemetry from `about:firefoxview` Feature Callouts from "firefoxview" to "about:firefoxview"
- Pass the token "chrome" when creating a callout from the browser chrome and update references to the source in PDF.js messages' targeting
- Update the page value expected in automated tests as needed
Differential Revision: https://phabricator.services.mozilla.com/D165910
This patch accomplishes a couple different things in one go.
about:welcome has a feature to allow switching screens by history
navigation. But the screen transitions don't play in that case. There
was also an issue (see bug 1804098) where rounding inconsistencies could
cause 1px gaps to appear in the animated progress bar, because of the
use of transform. By converting the progress bar into a single element
and just modulating its width, we can stop using transform and also
enable transitions for history navigation. Technically, this also allows
us to advance by more than 1 screen without messing up the animations,
though this is not currently used. Incidentally, it simplifies the CSS.
Differential Revision: https://phabricator.services.mozilla.com/D164310
Modify the enzyme assertions in unit tests so they can fail when
regressed. Update the same tests since now they would fail otherwise.
One of them also required fixing a bug in MSLocalized.jsx.
Differential Revision: https://phabricator.services.mozilla.com/D164403
This patch accomplishes a couple different things in one go.
about:welcome has a feature to allow switching screens by history
navigation. But the screen transitions don't play in that case. There
was also an issue (see bug 1804098) where rounding inconsistencies could
cause 1px gaps to appear in the animated progress bar, because of the
use of transform. By converting the progress bar into a single element
and just modulating its width, we can stop using transform and also
enable transitions for history navigation. Technically, this also allows
us to advance by more than 1 screen without messing up the animations,
though this is not currently used. Incidentally, it simplifies the CSS.
Differential Revision: https://phabricator.services.mozilla.com/D164310
ASRouter's remote message providers were written to include a property
to specify the desired collection on the Remote Settings Kinto server.
But this property was mistakenly labeled `bucket` in many places. This
could be confusing because Kinto storage is organized by both buckets
and collections, with buckets being a higher level of organization and
collections belonging to buckets. Each individual message provider
specifies a collection like "cfr", while the bucket is set by the router
code ("main"). This carried over to everything that interacted with the
providers, so this patch effectively replaces every reference to a
"message provider bucket" with "message provider collection." But more
importantly, provider definitions are stored as JSON strings in
preference values, so these definitions erroneously contained key-value
pairs like `bucket: "cfr"` which should have been `collection: "cfr"`.
That means the pref values themselves must be migrated to ensure that
modified prefs continue to work. Existing tests are updated and a new
test is added for the migrator, to meet minimum coverage requirements.
Documentation is also updated to reflect the correct property name.
Differential Revision: https://phabricator.services.mozilla.com/D162067
Because of the `::before` element which requires a z-index of 1 to render the box-shadow, it was causing links to be unclickable/behind the element. By adding `pointer-events: none` to the pseudo element, it is possible to click through the elements again/interact with the `<a>` tag
Differential Revision: https://phabricator.services.mozilla.com/D162226
Update Feature Callout code to ensure styling is the same in browser chrome as it is when used in content pages such as Firefox View.
Differential Revision: https://phabricator.services.mozilla.com/D159598
The Sign In button on about:welcome is currently hidden when it would
overlap with the screen. This patch changes the CSS so that instead of
hiding it, we reposition it when it would overlap, aligning it to the
top right of the screen.
Differential Revision: https://phabricator.services.mozilla.com/D158207
Also define explicit HCM color rules for headings in the secondary section of
split screens to fulfill minimum contrast guidelines.
Differential Revision: https://phabricator.services.mozilla.com/D158512
Added high contrast rule for mr background images.
To test this in macOS enable the following:
{F4178464}
and enable a dark theme for firefox
Differential Revision: https://phabricator.services.mozilla.com/D158264
I'll wait to land this until next week, so that we're not putting in new strings right at the end of Nightly.
I've tested this with MacOS VoiceOver & NVDA on windows and the behaviour is pretty good. VoiceOver will repeat the colorway group & name a few times which is annoying, but it's an existing problem we haven't found a tidy solution for yet.
Differential Revision: https://phabricator.services.mozilla.com/D157369
Add a list of screen initials to the message ID strings sent with
AboutWelcomeTelemetry impression pings. Each screen's message ID will
include a string representing the screen ID of each screen in the
message, in addition to information about the screen itself (for
example, `PLSICMG` represents AW_PIN_FIREFOX, AW_LANGUAGE_MISMATCH,
etc). This will support, for example, comparisons of user engagement
between messages with many screens versus messages with few screens.
Also change the screen ID for one screen that was adjacent to another
screen with the same initial, in order to disambiguate them (since both
screens can potentially be removed, currently).
Differential Revision: https://phabricator.services.mozilla.com/D157581
Remove image_overrides custom replacing the QR code for FOCUS message and instead use a separate message for de locale that also configures the links correctly like the KLAR message.
Differential Revision: https://phabricator.services.mozilla.com/D157518
Fix a bug where a rule for about:welcome was causing the background for
the multistage spotlight dialog to be white in HCM.
Differential Revision: https://phabricator.services.mozilla.com/D157367
Just remove the import of normalize.scss from aboutwelcome.scss, without
removing the file itself. Add styles needed to maintain the current
appearance and remove styles that were only necessary because of
normalize.scss.
Differential Revision: https://phabricator.services.mozilla.com/D157224
Make the dialog frame for Spotlight modal dialogs cover the full window,
prevent the fixed sizing in SubDialog for these dialogs, and vertically
center the dialog relative to its frame. Make the scrollport accommodate
the full Spotlight so it can be scrolled, without wasting any scroll
distance on margins. So, the top margin will shrink with the window,
like the other margins do.
Differential Revision: https://phabricator.services.mozilla.com/D156127
Make the dialog frame for Spotlight modal dialogs cover the full window,
prevent the fixed sizing in SubDialog for these dialogs, and vertically
center the dialog relative to its frame. Make the scrollport accommodate
the full Spotlight so it can be scrolled, without wasting any scroll
distance on margins. So, the top margin will shrink with the window,
like the other margins do.
Differential Revision: https://phabricator.services.mozilla.com/D156127
The secondary CTA in Spotlight and AboutWelcome lacks a rule to set a
hover color (probably because outside of HCM, the hover color should be
the same as the base color). This patch adds the needed styles.
Differential Revision: https://phabricator.services.mozilla.com/D156223
Everything here is Windows-only for now, since that's the immediate
use case and these implementation details are specific to Windows
native notifications relaunching Firefox when it is not running --
functionality not supported by the other system alert backends at this
time.
This commit adds a `launch_url` parameter to `ToastNotification`.
This should be viewed as the simplest possible "action" that a toast
notification can take when it is clicked, namely navigating to the
given URL. In the future, we might generalize this to describe more
of the existing actions (like opening settings, snoozing or dismissing
the toast, etc), but for now, this handles my use case.
In addition, this uses `content.tag` as the alert `name`, allowing to
replace existing toast notifications.
Differential Revision: https://phabricator.services.mozilla.com/D155912
Update About Welcome's invocations of window functions to use optional
chaining to avoid errors when they are undefined. Then, the surfaces
that load the About Welcome bundle will no longer need to define those
references as empty functions.
Differential Revision: https://phabricator.services.mozilla.com/D155011
Add new properties to ProtonScreen logos: reducedMotionImageURL and
darkModeReducedMotionImageURL. These are intended to be used when
imageURL and/or darkModeImageURL is an animated image such as a GIF. If
reduced motion images are passed, they will be used instead of
imageURL/darkModeImageURL if the user has enabled a reduced motion
preference through their OS or Firefox settings. So, consumers can pass
up to 4 logo URLs to be matched with the following media queries:
1. imageURL: not (prefers-color-scheme: dark)
2. darkModeImageURL: (prefers-color-scheme: dark)
3. reducedMotionImageURL: (prefers-reduced-motion: reduce)
4. darkModeReducedMotionImageURL: (prefers-color-scheme: dark) and (prefers-reduced-motion: reduce)
Differential Revision: https://phabricator.services.mozilla.com/D155037
Add new properties to ProtonScreen logos: reducedMotionImageURL and
darkModeReducedMotionImageURL. These are intended to be used when
imageURL and/or darkModeImageURL is an animated image such as a GIF. If
reduced motion images are passed, they will be used instead of
imageURL/darkModeImageURL if the user has enabled a reduced motion
preference through their OS or Firefox settings. So, consumers can pass
up to 4 logo URLs to be matched with the following media queries:
1. imageURL: not (prefers-color-scheme: dark)
2. darkModeImageURL: (prefers-color-scheme: dark)
3. reducedMotionImageURL: (prefers-reduced-motion: reduce)
4. darkModeReducedMotionImageURL: (prefers-color-scheme: dark) and (prefers-reduced-motion: reduce)
Differential Revision: https://phabricator.services.mozilla.com/D155037
As part of installing the lang pack, add the negotiated language as string args and convert to raw if it wants to use the lang pack.
Differential Revision: https://phabricator.services.mozilla.com/D155021
Update About Welcome's invocations of window functions to use optional
chaining to avoid errors when they are undefined. Then, the surfaces
that load the About Welcome bundle will no longer need to define those
references as empty functions.
Differential Revision: https://phabricator.services.mozilla.com/D155011
`Aria-valuetext` attribute is expected to be mutated with each change of user's input, thus it does not have to be listed as localizable attribute.
Also, this approach removes pre-selected value from the DOM on init of a component like a spinbutton, preventing users of assistive technology from accessing human-readable value that was pre-selected and is present on-screen.
Updating a patch to ensure [the fix for bug 1779625](https://bugzilla.mozilla.org/show_bug.cgi?id=1779625) is still working after the change per discussion in Bugzilla.
Differential Revision: https://phabricator.services.mozilla.com/D142371
