fix(compat-table): simplify compat-support-flags fluent string

components/compat-table/element.js

@@ -737,19 +737,28 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
     // heading (see `_renderBranchHeading`), so they aren't pushed here.
 
     if (item.flags) {
+      const hasAdded =
+        typeof item.version_added === "string" &&
+        item.version_added !== "preview";
+      const hasLast = typeof item.version_last === "string";
+
+      const versionRange = hasAdded
+        ? hasLast
+          ? "range"
+          : "from"
+        : hasLast
+          ? "until"
+          : "none";
+
       for (const { type, name, value_to_set } of item.flags) {
         supportNotes.push({
           iconName: "disabled",
           label: this.l10n.raw({
-            id: "compat-support-flags",
+            id: "compat-support-flag-range",
             args: {
-              has_added: Number(
-                typeof item.version_added === "string" &&
-                  item.version_added !== "preview",
-              ),
+              version_range: versionRange,
               version_added: item.version_added,
-              has_last: Number(typeof item.version_last === "string"),
-              versionLast: item.version_last,
+              version_last: item.version_last,
               flag_type: type,
               flag_name: name,
               has_value: Number(typeof value_to_set === "string"),

l10n/locales/en-US.ftl

@@ -91,36 +91,26 @@ compat-branch-altname = Alternate name: <code data-l10n-name="altname">{ $altnam
 compat-branch-prefix-altname = Prefix: <code data-l10n-name="prefix">{ $prefix }</code>, alternate name: <code data-l10n-name="altname">{ $altname }</code>
 compat-support-removed = Removed in { $version } and later
 compat-support-see-impl-url = See <a data-l10n-name="impl_url">{ $label }</a>
-compat-support-flags =
-  { $has_added ->
-    [1] From version { $version_added }
-    *[0] {""}
-  }{ $has_last ->
-    [1] { $has_added ->
-          *[0] Until { $versionLast } users
-          [1] {" "}until { $versionLast } users
-      }
-    *[0] { $has_added ->
-          *[0] Users
-          [1] {" "}users
-      }
-  }
-  {" "}must explicitly set the <code data-l10n-name="name">{ $flag_name }</code>{" "}
-  { $flag_type ->
-    *[preference] preference
-    [runtime_flag] runtime flag
-  }{ $has_value ->
-    [1] {" "}to <code data-l10n-name="value">{ $flag_value }</code>
-    *[0] {""}
-  }{"."}
-  { $has_pref_url ->
-    [1] { $flag_type ->
-      [preference] To change preferences in { $browser_name }, visit { $browser_pref_url }.
-      *[other] {""}
+compat-support-flag-range =
+    { $version_range ->
+        [range] From version { $version_added } until { $version_last }, users
+        [from] From version { $version_added }, users
+        [until] Until { $version_last }, users
+       *[none] Users
+    } must explicitly set the <code data-l10n-name="name">{ $flag_name }</code> { $flag_type ->
+       *[preference] preference
+        [runtime_flag] runtime flag
+    }{ $has_value ->
+        [1] { " " }to <code data-l10n-name="value">{ $flag_value }</code>
+       *[0] { "" }
+    }.{ $has_pref_url ->
+        [1]
+            { $flag_type ->
+                [preference] { " " }To change preferences in { $browser_name }, visit { $browser_pref_url }.
+               *[other] { "" }
+            }
+       *[0] { "" }
     }
-    *[0] {""}
-  }
-
 compat-legend = Legend
 compat-legend-tip = Tip: you can click/tap on a cell for more information.
 compat-legend-yes = { compat-support-full }

l10n/template.ftl

@@ -56,34 +56,22 @@ compat-branch-altname = Alternate name: <code data-l10n-name="altname">{ $altnam
 compat-branch-prefix-altname = Prefix: <code data-l10n-name="prefix">{ $prefix }</code>, alternate name: <code data-l10n-name="altname">{ $altname }</code>
 compat-support-removed = Removed in { $version } and later
 compat-support-see-impl-url = See <a data-l10n-name="impl_url">{ $label }</a>
-compat-support-flags =
-    { $has_added ->
-        [1] From version { $version_added }
-       *[0] { "" }
-    }{ $has_last ->
-        [1]
-            { $has_added ->
-               *[0] Until { $versionLast } users
-                [1] { " " }until { $versionLast } users
-            }
-       *[0]
-            { $has_added ->
-               *[0] Users
-                [1] { " " }users
-            }
-    }
-    { " " }must explicitly set the <code data-l10n-name="name">{ $flag_name }</code>{ " " }
-    { $flag_type ->
+compat-support-flag-range =
+    { $version_range ->
+        [range] From version { $version_added } until { $version_last }, users
+        [from] From version { $version_added }, users
+        [until] Until { $version_last }, users
+       *[none] Users
+    } must explicitly set the <code data-l10n-name="name">{ $flag_name }</code> { $flag_type ->
        *[preference] preference
         [runtime_flag] runtime flag
     }{ $has_value ->
         [1] { " " }to <code data-l10n-name="value">{ $flag_value }</code>
        *[0] { "" }
-    }{ "." }
-    { $has_pref_url ->
+    }.{ $has_pref_url ->
         [1]
             { $flag_type ->
-                [preference] To change preferences in { $browser_name }, visit { $browser_pref_url }.
+                [preference] { " " }To change preferences in { $browser_name }, visit { $browser_pref_url }.
                *[other] { "" }
             }
        *[0] { "" }