This introduces two new variables for 16px icon inline margins. We can use these
any time we need to align something with the "standard" 16px icons and text, no
matter whether rich suggestions are enabled or not.
Differential Revision: https://phabricator.services.mozilla.com/D202784
Added
- `--space-medium`
- `--space-large`
Changed
- `--space-xlarge` has a new value and the old one is now `--space-xxlarge`
Differential Revision: https://phabricator.services.mozilla.com/D202739
In order to do it, expose the button padding to CSS via env(), and make
the buttons just use the regular drawing.
This slightly changes the padding to the end of the titlebar to match
one half of the inter-button spacing, rather that however much padding
the headerbar has.
We could improve on this slightly by also exposing the headerbar padding
and applying that to the last button, but that's not terribly easy to do
due to us supporting re-ordering of the titlebar buttons, and reversing
their placement, so it'd involve some rather hacky CSS. Not impossible,
but not trivial, and this looks good enough IMO.
Differential Revision: https://phabricator.services.mozilla.com/D202616
Renames the XUL/HTML element ids of the fullPageTranslationsPanel
to be `full-page-translations-panel-...` to distinguish them
from the `select-translations-panel-...` ids.
Depends on D200857
Differential Revision: https://phabricator.services.mozilla.com/D200876
Fixing the following:
1. The heading is only implicit and is marked up with `<p>` instead of `<h1>` or `<h2>`
1. The images for the location and contact information lack any textual alternative, while being used as a subgroup headings visually - we are providing `alt=""` for now, marking up these icons as decorative while the bug 1870155 is being resolved.
Differential Revision: https://phabricator.services.mozilla.com/D196497
This makes the Yelp suggestion UI closer to the spec. Summary:
* Always set `isRichSuggestion: true` so that the bottom "Yelp · Sponsored" text
is visible when the row is not a top pick.
* For the top pick treatment, the icon itself should be 38px and centered in a
52px box with a border.
* For the non-top-pick treatment, the icon size should be 24px.
* Currently rich suggestion rows with 24px icons aren't properly aligned with
the icons and text in other rows. We have some rules that fix this for rows
with 16px icons and non-rich suggestions. The problem happens for any row
whose icon is smaller than the 28px icon of most rich suggestion rows, so I
added a rule to cover 24px icons.
* Add `HIGHLIGHT.TYPED` to the title, but I need to verify this with Loren
References:
* [Figma](https://www.figma.com/file/Vx9PB3b4oU1ilLwqZVq8r4/Yelp-suggestions?type=design&node-id=406%3A14439&mode=design&t=Q1UyIltVH2bniMwp-1)
* [Spec doc](https://docs.google.com/document/d/13ByGyGK-gMRX5hz9Buj3Xo6Q19hnu2oOvvI1DS29PCs/edit?usp=sharing)
Depends on D201182
Differential Revision: https://phabricator.services.mozilla.com/D201184
Using a background for text color is not great.
Provide a text color to draw on top of the toolbarbutton-icon-attention
color.
Differential Revision: https://phabricator.services.mozilla.com/D201202
This patch makes us commit to the deemphasized color descriptive pattern throughout settings.
I also made some changes where some settings were using description and should most likely be using a label instead and vice versa.
Quick note that if the descriptive text is tied to an input such as a checkbox or toggle, as opposed to a section heading, we opt for the `.text-deemphasized` class/treatment where not only do we use the `--text-color-deemphasized` color but also shrink the font size. You'll see I opted for such treatment in the Experiments page checkbox list.
Differential Revision: https://phabricator.services.mozilla.com/D197615
This patch makes us commit to the deemphasized color descriptive pattern throughout settings.
I also made some changes where some settings were using description and should most likely be using a label instead and vice versa.
Quick note that if the descriptive text is tied to an input such as a checkbox or toggle, as opposed to a section heading, we opt for the `.text-deemphasized` class/treatment where not only do we use the `--text-color-deemphasized` color but also shrink the font size. You'll see I opted for such treatment in the Experiments page checkbox list.
Differential Revision: https://phabricator.services.mozilla.com/D197615
Emilio's suggestion 🙂
The zoom level is equivalent to what the current touchmode does, the difference is that this uses the simple `zoom` instead.
Differential Revision: https://phabricator.services.mozilla.com/D198690
This is preferable behavior. Otherwise the behavior changes with
and without scrolling enabled, which is rather weird.
Depends on D198395
Differential Revision: https://phabricator.services.mozilla.com/D198396
