tor-browser

commit 66c0bf0d3c3f3693d1274c644e8ce9aa30d80c4f
parent 5d62ceaa082881c5594adb279aab88801fdfef08
Author: Mark Striemer <mstriemer@mozilla.com>
Date:   Thu,  8 Jan 2026 05:28:01 +0000

Bug 1997198 - Part 2: Trim leading on moz-fieldsets with headings r=desktop-theme-reviewers,tgiles

Differential Revision: https://phabricator.services.mozilla.com/D275336

Diffstat:
M
toolkit/content/widgets/moz-fieldset/moz-fieldset.css
 | 
6
+++---
M
toolkit/content/widgets/moz-fieldset/moz-fieldset.mjs
 | 
20
+++++++++++++++-----
M
toolkit/themes/shared/design-system/src/text-and-typography.css
 | 
16
++++++++++++++++

3 files changed, 34 insertions(+), 8 deletions(-)
diff --git a/toolkit/content/widgets/moz-fieldset/moz-fieldset.css b/toolkit/content/widgets/moz-fieldset/moz-fieldset.css
@@ -15,12 +15,12 @@ fieldset {
 legend {
   padding: 0;
   font-weight: var(--font-weight-semibold);
-  display: inline-flex;
+  display: flex;
   gap: var(--space-small);
   align-items: baseline;
 
-  &:has(+ .description) {
-    display: flex;
+  &:has(+ a, + slot[name="support-link"]:has-slotted) {
+    display: inline-flex;
   }
 
   /* Hack to handle vertical alignment in cases where we have an icon + heading
diff --git a/toolkit/content/widgets/moz-fieldset/moz-fieldset.mjs b/toolkit/content/widgets/moz-fieldset/moz-fieldset.mjs
@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { html, ifDefined } from "../vendor/lit.all.mjs";
+import { classMap, html, ifDefined } from "../vendor/lit.all.mjs";
 import { MozLitElement } from "../lit-utils.mjs";
 
 /**
@@ -11,9 +11,9 @@ import { MozLitElement } from "../lit-utils.mjs";
  * @type {Record<number, (label: string) => ReturnType<typeof html>>}
  */
 const HEADING_LEVEL_TEMPLATES = {
-  1: label => html`<h1>${label}</h1>`,
-  2: label => html`<h2>${label}</h2>`,
-  3: label => html`<h3>${label}</h3>`,
+  1: label => html`<h1 class="text-box-trim-start">${label}</h1>`,
+  2: label => html`<h2 class="text-box-trim-start">${label}</h2>`,
+  3: label => html`<h3 class="text-box-trim-start">${label}</h3>`,
   4: label => html`<h4>${label}</h4>`,
   5: label => html`<h5>${label}</h5>`,
   6: label => html`<h6>${label}</h6>`,
@@ -135,7 +135,17 @@ export default class MozFieldset extends MozLitElement {
     if (!this.iconSrc) {
       return "";
     }
-    return html`<img src=${this.iconSrc} role="presentation" class="icon" />`;
+    return html`<img
+      src=${this.iconSrc}
+      role="presentation"
+      class=${classMap({
+        icon: true,
+        "heading-xlarge": this.headingLevel == 1,
+        "heading-large": this.headingLevel == 2,
+        "heading-medium": this.headingLevel == 3,
+        "text-box-trim-start": this.headingLevel >= 1 && this.headingLevel <= 3,
+      })}
+    />`;
   }
 
   render() {
diff --git a/toolkit/themes/shared/design-system/src/text-and-typography.css b/toolkit/themes/shared/design-system/src/text-and-typography.css
@@ -43,3 +43,19 @@ h3,
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.text-box-trim-start {
+  /* Trim the "leading" from top of the text. This visually removes the
+   * line-height above the first line of text so we don't end up with too much
+   * padding between text and its container.
+   *
+   * `1cap` is the cap height, or height of capital letters. `1lh` is the
+   * computed line-height. This calc therefore removes half of the difference
+   * between the two from the height of the element. This has the result of
+   * spacing the top of a capital letter from its container similarly to how a
+   * border or background would be spaced.
+   *
+   * NOTE: This emulates the `text-box-trim` property (bug 1816038). */
+  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
+  margin-block-start: calc((1cap - 1lh) / 2);
+}