Files
tubestation/browser/components/urlbar/content
Drew Willcoxon d798414004 Bug 1938517 - Implement new "simplest" weather suggestion UI. r=fluent-reviewers,desktop-theme-reviewers,urlbar-reviewers,emilio,bolsson,daisuke
This makes a number of changes to support a new UI treatment for weather
suggestions in addition to the two existing treatments. Unfortunately we need
all three to experiment with, but hopefully after experimentation is done we can
remove the two existing treatments.

This patch refers to the new treatment as the "simplest" UI. The Figma is at [1]
although it doesn't reflect some details Josh and I have discussed. One of the
existing treatments is already called "simple", and this patch changes its name
to "simpler". The patch refers to the other existing treatment as "full". These
names are only informal because the Nimbus variable and fallback pref are
integers.

Because the new UI treatment is so simple, we can pretty much use the standard
rich suggestion UI for it. The existing treatments are dynamic. I say "pretty
much" because I did need to add a capability to rich suggestions,
`result.richSuggestionIconVariation`, which lets results set an `icon-variation`
attribute on their rows. Weather suggestions use it to choose the appropriate
weather icon in the CSS.

I also modified l10n string caching in a few ways to address a couple of
problems:

* I like how dynamic results can cache their strings lazily by setting
  `cacheable` in their l10n objects. Standard results can only cache their
  strings by adding them to `UrlbarView.#cacheL10nStrings()`. That method is
  getting pretty big, and it also doesn't work well with strings that have
  arguments since it's called to pre-cache strings before they're used, when
  there are no arguments. So I extended `cacheable` support to all l10n objects,
  not only those from dynamic results.
* Josh's spec calls for the temperature in the suggestion title to be bolded.
  There's no good way to do that right now. We have highlights, but they aren't
  useable for l10n strings. The simplest thing -- and what I've done before in
  cases like this -- is to include `<strong>` tags in the l10n string itself.
  That works except for when we have a cache hit with the l10n cache. In that
  case, we set the `textContent`, which of course renders the tag literally. So
  I added a `parseMarkup` option to l10n objects that says the cached string
  should be set as `innerHTML` instead. Actually, for security I parse the
  string into a sanitized document fragment. We could just always do this and
  get rid of `parseMarkup`, but it seems wasteful since most l10n strings don't
  need it.
* While addressing the previous two points, it made sense to move
  `setElementL10n()` from the view to `L10nCache`. That way all these
  cache-related functions are together.

Finally, Josh noticed one of the dark-mode colors in the icon SVG didn't have
enough contrast with the standard dark-mode panel background, so I updated that
to a new color he chose (from `#80808F` to `#9393A8`).

[1] https://www.figma.com/design/Hdi0oHB7trRcncyVAKZypO/accuweather-explorations?node-id=3548-15992&t=f4YUShEe5RkP2KEg-1

Differential Revision: https://phabricator.services.mozilla.com/D232703
2024-12-27 18:11:23 +00:00
..