From eafc7ee2b0733843df01264146f01321fadc1307 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 30 Jan 2026 16:05:32 +0000 Subject: [PATCH 1/2] feat(playground): add share data url button --- components/playground/element.css | 2 +- components/playground/element.js | 22 ++++++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/components/playground/element.css b/components/playground/element.css index 9a56bc330..f5a54881d 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -138,7 +138,7 @@ mdn-modal { flex-direction: column; gap: 0.5rem; - &:first-child { + &:not(:last-child) { margin-bottom: 1rem; } } diff --git a/components/playground/element.js b/components/playground/element.js index 5fa9fe858..25c7d01cd 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -118,6 +118,22 @@ ${"```"}`, } } + async _copyDataUrl() { + const controller = this._controller.value; + if (controller) { + const { css, html, js } = controller.code; + let code = ``; + if (css) code += ``; + if (html) code += html; + if (js) code += ``; + // encode non-space whitespace + code = code.replaceAll(/[^\S ]/g, (ch) => encodeURIComponent(ch)); + await navigator.clipboard.writeText( + `data:text/html;charset=utf-8,${code}`, + ); + } + } + async _createPermalink() { const controller = this._controller.value; if (controller) { @@ -376,6 +392,12 @@ ${"```"}`, >${this.l10n`Copy markdown to clipboard`} +
+

${this.l10n`Share Data URL`}

+ ${this.l10n`Copy data URL to clipboard`} +

${this.l10n`Share your code via Permalink`}

${this._user.render({ From f23d6ec5b3a80332a9fe14e8392f770f08324010 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 30 Jan 2026 16:11:08 +0000 Subject: [PATCH 2/2] add glean pings to playground share buttons --- components/playground/element.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/components/playground/element.js b/components/playground/element.js index 25c7d01cd..9c2847848 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -388,13 +388,19 @@ ${"```"}`,