{flag.value_to_set})
-
- );
- return (
- {flag.name}
- {flag.type === "preference" && <> preference{valueToSet}}
- {flag.type === "runtime_flag" && <> runtime flag{valueToSet}}
- {i < flags.length - 1 && " and the "}
- {name}
- );
- const activeBrowser = activeCell !== null ? browsers[activeCell] : null;
-
- let titleNode: string | React.ReactNode;
-
- if (compat.mdn_url && depth > 0) {
- const href = compat.mdn_url.replace(
- `/${DEFAULT_LOCALE}/docs`,
- `/${locale}/docs`
- );
- titleNode = (
- ${href}`}
- >
- {title}
- {compat.status && - Tip: you can click/tap on a cell for more information. -
-- BCD tables only load in the browser - -
- ); - } - if (error) { - if (error.message === "404") { - return ( -
- No compatibility data found for {query}.
- Check for problems with this page or
- contribute missing data to{" "}
-
- mdn/browser-compat-data
-
- .
-
Error loading BCD data
; - } - if (!data) { - return- Error loading browser compatibility table -
-- This can happen if the JavaScript, which is loaded later, didn't - successfully load. -
-- { - event.preventDefault(); - window.location.reload(); - }} - > - Try reloading the page - -
-
- If you're curious, this was the error:
-
-
- {this.state.error.toString()}
-
-
${name}`;
+
+ let titleNode;
+ const titleContent = html`${title}${compat.status &&
+ this._renderStatusIcons(compat.status)}`;
+ if (compat.mdn_url && depth > 0) {
+ const href = compat.mdn_url.replace(
+ `/${DEFAULT_LOCALE}/docs`,
+ `/${locale}/docs`
+ );
+ titleNode = html` ${href}`}
+ >
+ ${titleContent}
+ `;
+ } else {
+ titleNode = html`${flag.value_to_set})`
+ : "";
+
+ return [
+ html`${flag.name}`,
+ flag.type === "preference" &&
+ html` preference${valueToSet}`,
+ flag.type === "runtime_flag" &&
+ html` runtime flag${valueToSet}`,
+ i < flags.length - 1 && " and the ",
+ ].filter(Boolean);
+ }),
+ ".",
+ browser.pref_url &&
+ flags.some((flag) => flag.type === "preference") &&
+ ` To change preferences in ${browser.name}, visit ${browser.pref_url}.`,
+ ]
+ .filter(Boolean)
+ .map((value) => html`${value}`)}
+ `;
+ })(),
+ }
+ : null,
+ item.notes
+ ? (Array.isArray(item.notes) ? item.notes : [item.notes]).map(
+ (note) => ({ iconName: "footnote", label: note })
+ )
+ : null,
+ item.impl_url
+ ? (Array.isArray(item.impl_url)
+ ? item.impl_url
+ : [item.impl_url]
+ ).map((impl_url) => ({
+ iconName: "footnote",
+ label: html`See
+ ${bugURLToString(impl_url)}.`,
+ }))
+ : null,
+ versionIsPreview(item.version_added, browser)
+ ? {
+ iconName: "footnote",
+ label: "Preview browser support",
+ }
+ : null,
+ // If we encounter nothing else than the required `version_added` and
+ // `release_date` properties, assume full support.
+ // EDIT 1-5-21: if item.version_added doesn't exist, assume no support.
+ isFullySupportedWithoutLimitation(item) &&
+ !versionIsPreview(item.version_added, browser)
+ ? {
+ iconName: "footnote",
+ label: "Full support",
+ }
+ : isNotSupportedAtAll(item)
+ ? {
+ iconName: "footnote",
+ label: "No support",
+ }
+ : {
+ iconName: "unknown",
+ label: "Support unknown",
+ },
+ ].flat();
+
+ /**
+ * @type {Array<{iconName: string; label: string | TemplateResult }>}
+ */
+ const filteredSupportNotes = supportNotes.filter((v) => v !== null);
+
+ const hasNotes = supportNotes.length > 0;
+ return (
+ (i === 0 || hasNotes) &&
+ html`+ Tip: you can click/tap on a cell for more information. +
+Loading...
`, + + complete: + /** + * @param {Compat} compat + */ + (compat) => + compat + ? html`No compatibility data found
`, + error: (error) => html`Error loading data: ${error}