Leverage OD_Template_Optimization_Context

admin-bar.css

@@ -0,0 +1,42 @@
+
+#wpadminbar .od-url-metrics-loading,
+#wpadminbar .od-url-metrics-loading a {
+	cursor: wait;
+}
+
+#wpadminbar #wp-admin-bar-od-url-metrics:has(.od-viewport-group-indicator) .ab-label {
+	margin-right: 5px !important;
+}
+
+#wpadminbar .od-viewport-group-indicator {
+	display: inline-block;
+	vertical-align: middle;
+	width: 6px;
+	height: 20px;
+	border: solid 1px black;
+	background-color: gray;
+	opacity: 0.5;
+}
+#wpadminbar .od-viewport-group-indicator.od-populated {
+	background-color: orange;
+}
+#wpadminbar .od-viewport-group-indicator.od-complete {
+	background-color: lime;
+}
+
+#wpadminbar #wp-admin-bar-od-url-metrics .od-viewport-group-indicator:hover {
+	opacity: 1;
+	outline: solid 2px currentColor;
+}
+@media screen and (max-width: 782px) {
+	#wpadminbar #wp-admin-bar-od-url-metrics .ab-icon {
+		display: none;
+	}
+	#wpadminbar #wp-admin-bar-od-url-metrics {
+		display: block;
+	}
+	#wpadminbar .od-viewport-group-indicator {
+		height: 32px;
+		width: 8px;
+	}
+}

admin-bar.js

@@ -0,0 +1,53 @@
+/**
+ * @typedef {Object} ViewportStatus
+ * @property {number}      min_width     - Min width.
+ * @property {boolean}     complete      - Complete
+ * @property {number}      count         - Count
+ * @property {string}      device_label  - Device label.
+ * @property {number}      sample_size   - Sample size.
+ * @property {string|null} last_modified - Last modified label.
+ */
+
+/**
+ * @param {Object}           data
+ * @param {string}           data.tooltip
+ * @param {string|null}      data.edit_post_link
+ * @param {ViewportStatus[]} data.viewport_statuses
+ */
+export default function ( data ) {
+	const adminBarItem = document.getElementById(
+		'wp-admin-bar-od-url-metrics'
+	);
+	const adminBarItemLink = adminBarItem.querySelector( 'a' );
+	adminBarItemLink.title = data.tooltip;
+
+	adminBarItem.classList.remove( 'od-url-metrics-loading' );
+
+	for ( const viewportStatus of data.viewport_statuses ) {
+		const span = document.createElement( 'span' );
+		span.classList.add(
+			'od-viewport-group-indicator',
+			`od-viewport-min-width-${ viewportStatus.min_width }`
+		);
+		if ( viewportStatus.complete ) {
+			span.classList.add( 'od-complete' );
+		} else if ( viewportStatus.count > 0 ) {
+			span.classList.add( 'od-populated' );
+		} else {
+			span.classList.add( 'od-empty' );
+		}
+
+		span.title = viewportStatus.device_label;
+		if ( viewportStatus.complete ) {
+			span.title += ', complete'; // TODO: i18n.
+		}
+		if ( viewportStatus.last_modified ) {
+			span.title += ', ' + viewportStatus.last_modified;
+		}
+		adminBarItemLink.appendChild( span );
+	}
+
+	if ( data.edit_post_link ) {
+		adminBarItemLink.href = data.edit_post_link;
+	}
+}