From 9423069250a8d9b815b65fbe131956e22576400b Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Fri, 5 Sep 2025 16:51:05 +0530 Subject: [PATCH 01/12] fix(playground): overlay run button for shared playground --- components/playground/element.css | 12 ++++++++++++ components/playground/element.js | 10 ++++++++++ 2 files changed, 22 insertions(+) diff --git a/components/playground/element.css b/components/playground/element.css index f4e0a03be..f4769e04a 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -99,6 +99,8 @@ } &.playground__runner-console { + position: relative; + grid-area: runner; overflow: hidden; @@ -173,3 +175,13 @@ mdn-modal { justify-content: flex-end; } } + +.overlay-run-button { + position: absolute; + inset: 4rem 1rem 9rem; + z-index: 1; + + background-color: var(--color-gray-40); + border: 1px dashed gray; + border-radius: 0.5rem; +} diff --git a/components/playground/element.js b/components/playground/element.js index 66b780e4a..342cd70bd 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -66,6 +66,7 @@ export class MDNPlayground extends L10nMixin(LitElement) { this._autoRun = true; controller.runOnChange = true; this._storeSession(); + this.requestUpdate(); } } } @@ -402,6 +403,15 @@ ${"```"}`, ` : nothing} + ${this._autoRun + ? nothing + : html` + Run + `}
${this.l10n("playground-console")`Console`}
From a11df783933b639858265fb654654de96dd27715 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Fri, 5 Sep 2025 17:15:48 +0530 Subject: [PATCH 02/12] use theme color --- components/playground/element.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/playground/element.css b/components/playground/element.css index f4769e04a..0c467dc51 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -181,7 +181,6 @@ mdn-modal { inset: 4rem 1rem 9rem; z-index: 1; - background-color: var(--color-gray-40); - border: 1px dashed gray; + background-color: var(--color-border-primary); border-radius: 0.5rem; } From 7718fec589cffe3b255dacc649a5f2e56f7a6d65 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Mon, 15 Sep 2025 12:15:15 +0530 Subject: [PATCH 03/12] add circle-play icon, increase size, and responsive icon size --- components/playground/element.css | 2 ++ components/playground/element.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/components/playground/element.css b/components/playground/element.css index 0c467dc51..d5586ba89 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -181,6 +181,8 @@ mdn-modal { inset: 4rem 1rem 9rem; z-index: 1; + font-size: clamp(1.5rem, 3vw, 3rem); + background-color: var(--color-border-primary); border-radius: 0.5rem; } diff --git a/components/playground/element.js b/components/playground/element.js index 342cd70bd..571206055 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -5,6 +5,7 @@ import { createRef, ref } from "lit/directives/ref.js"; import { L10nMixin } from "../../l10n/mixin.js"; import { gleanClick } from "../../utils/glean.js"; import warningIcon from "../icon/triangle-alert.svg?lit"; +import circlePlay from "../icon/circle-play.svg?lit"; import { globalUser } from "../user/context.js"; import styles from "./element.css?lit"; @@ -408,6 +409,7 @@ ${"```"}`, : html` Run From 47fbd10ad262d28ac4bd3fa48b91970dc65f7d77 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Wed, 25 Mar 2026 12:28:14 +0530 Subject: [PATCH 04/12] button to cover entire area and appear like other buttons --- components/playground/element.css | 6 +++--- components/playground/element.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/playground/element.css b/components/playground/element.css index d5586ba89..c0b90cc43 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -100,7 +100,6 @@ &.playground__runner-console { position: relative; - grid-area: runner; overflow: hidden; @@ -178,11 +177,12 @@ mdn-modal { .overlay-run-button { position: absolute; - inset: 4rem 1rem 9rem; + inset: 3.9rem 0 8rem; z-index: 1; font-size: clamp(1.5rem, 3vw, 3rem); - background-color: var(--color-border-primary); + background-color: var(--color-background-page); + border: var(--border); border-radius: 0.5rem; } diff --git a/components/playground/element.js b/components/playground/element.js index 571206055..32205bdb6 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -4,8 +4,8 @@ import { createRef, ref } from "lit/directives/ref.js"; import { L10nMixin } from "../../l10n/mixin.js"; import { gleanClick } from "../../utils/glean.js"; -import warningIcon from "../icon/triangle-alert.svg?lit"; import circlePlay from "../icon/circle-play.svg?lit"; +import warningIcon from "../icon/triangle-alert.svg?lit"; import { globalUser } from "../user/context.js"; import styles from "./element.css?lit"; From e83ea3717bc03db8645f6e400684e181ae8d5717 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Wed, 25 Mar 2026 17:19:32 +0530 Subject: [PATCH 05/12] hide mdn-play-runner --- components/playground/element.css | 24 ++++++++++-------------- components/playground/element.js | 4 +++- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/components/playground/element.css b/components/playground/element.css index c0b90cc43..2303b0f0f 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -99,14 +99,22 @@ } &.playground__runner-console { - position: relative; grid-area: runner; overflow: hidden; - mdn-play-runner { + mdn-play-runner, + .overlay-run-button { flex-grow: 1; border: var(--border); border-radius: 0.25rem; + + &.hidden { + display: none; + } + } + + .overlay-run-button { + font-size: clamp(1.5rem, 3vw, 3rem); } .playground__console { @@ -174,15 +182,3 @@ mdn-modal { justify-content: flex-end; } } - -.overlay-run-button { - position: absolute; - inset: 3.9rem 0 8rem; - z-index: 1; - - font-size: clamp(1.5rem, 3vw, 3rem); - - background-color: var(--color-background-page); - border: var(--border); - border-radius: 0.5rem; -} diff --git a/components/playground/element.js b/components/playground/element.js index 32205bdb6..d038e95ed 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -414,7 +414,9 @@ ${"```"}`, > Run `} - +
${this.l10n("playground-console")`Console`}
From 10555a7294d89e05c572e5614e871818a777452e Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Thu, 26 Mar 2026 09:47:34 +0530 Subject: [PATCH 06/12] add warning text on button --- components/playground/element.css | 22 +++++++++++++++++++++- components/playground/element.js | 22 ++++++++++++++++++++-- 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/components/playground/element.css b/components/playground/element.css index 2303b0f0f..3832f6e30 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -114,7 +114,27 @@ } .overlay-run-button { - font-size: clamp(1.5rem, 3vw, 3rem); + border-color: currentcolor; + + div { + font-size: clamp(1.5rem, 3vw, 3rem); + + svg { + width: clamp(1.5rem, 3vw, 3rem); + height: clamp(1.5rem, 3vw, 3rem); + vertical-align: bottom; + } + } + + ul { + width: 80%; + + margin: 1rem auto; + + font-size: 16px; + + text-align: left; + } } .playground__console { diff --git a/components/playground/element.js b/components/playground/element.js index d038e95ed..16f7c75f1 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -409,10 +409,28 @@ ${"```"}`, : html` - Run +
${circlePlay} Run
+
    +
  • + This is a user-shared playground, not official MDN + content. +
    • +
  • + Always inspect the code first, and run it at your own + risk. +
    • +
  • + Running malicious code can expose you to serious risks, + including theft of data, IP address, browser fingerprint, + current session, etc. +
    • +
  • + Never enter passwords, payment details, or any sensitive + information. +
    • +
`} Date: Thu, 26 Mar 2026 10:18:46 +0530 Subject: [PATCH 07/12] use l10n and add En and Fr strings --- components/playground/element.js | 23 +++++++++++++---------- l10n/locales/fr.ftl | 4 ++++ l10n/template.ftl | 4 ++++ 3 files changed, 21 insertions(+), 10 deletions(-) diff --git a/components/playground/element.js b/components/playground/element.js index 16f7c75f1..c2d3722c7 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -411,24 +411,27 @@ ${"```"}`, @click=${this._run} variant="plain" > -
${circlePlay} Run
+
${circlePlay} ${this.l10n("playground-run")`Run`}
  • - This is a user-shared playground, not official MDN - content. + ${this.l10n( + "playground-run-warning-line-one", + )`This is a user-shared playground, not official MDN content.`}
  • - Always inspect the code first, and run it at your own - risk. + ${this.l10n( + "playground-run-warning-line-two", + )`Always inspect the code first, and run it at your own risk.`}
  • - Running malicious code can expose you to serious risks, - including theft of data, IP address, browser fingerprint, - current session, etc. + ${this.l10n( + "playground-run-warning-line-three", + )`Running malicious code can expose you to serious risks, including theft of data, IP address, browser fingerprint, current session, etc.`}
  • - Never enter passwords, payment details, or any sensitive - information. + ${this.l10n( + "playground-run-warning-line-four", + )`Never enter passwords, payment details, address, or any sensitive information.`}
`} diff --git a/l10n/locales/fr.ftl b/l10n/locales/fr.ftl index 9fcd73d28..e7896607b 100644 --- a/l10n/locales/fr.ftl +++ b/l10n/locales/fr.ftl @@ -272,6 +272,10 @@ playground-share = Partager playground-clear = Effacer playground-reset = Réinitialiser playground-seeing-something-inappropriate = Voir quelque chose d'inapproprié ? +playground-run-warning-line-one = Il s'agit d'un espace de jeu partagé par les utilisateurs, et non d'un contenu officiel de MDN. +playground-run-warning-line-two = Toujours inspecter le code au préalable et l'exécuter à vos propres risques. +playground-run-warning-line-three = L'exécution de code malveillant peut vous exposer à des risques graves, notamment le vol de données, d'adresse IP, d'empreinte digitale du navigateur, de session en cours, etc. +playground-run-warning-line-four = Ne saisissez jamais vos mots de passe, vos informations de paiement, votre adresse ou toute autre information sensible. playground-console = Console playground-share-markdown = Partager le Markdown playground-copy-markdown-to-clipboard = Copier le Markdown dans le presse-papiers diff --git a/l10n/template.ftl b/l10n/template.ftl index 5863e64a6..10d469c02 100644 --- a/l10n/template.ftl +++ b/l10n/template.ftl @@ -273,6 +273,10 @@ playground-share = Share playground-clear = Clear playground-reset = Reset playground-seeing-something-inappropriate = Seeing something inappropriate? +playground-run-warning-line-one = This is a user-shared playground, not official MDN content. +playground-run-warning-line-two = Always inspect the code first, and run it at your own risk. +playground-run-warning-line-three = Running malicious code can expose you to serious risks, including theft of data, IP address, browser fingerprint, current session, etc. +playground-run-warning-line-four = Never enter passwords, payment details, address, or any sensitive information. playground-console = Console playground-share-markdown = Share Markdown playground-copy-markdown-to-clipboard = Copy markdown to clipboard From f677b02ffbf6353f6f8406e92e44ce1853b0c51d Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Fri, 24 Apr 2026 15:50:25 +0530 Subject: [PATCH 08/12] Use single div warning --- components/playground/element.css | 18 +++++++----------- components/playground/element.js | 26 ++++---------------------- l10n/locales/fr.ftl | 4 ---- l10n/template.ftl | 4 ---- 4 files changed, 11 insertions(+), 41 deletions(-) diff --git a/components/playground/element.css b/components/playground/element.css index 3832f6e30..efb1ea1f3 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -116,24 +116,20 @@ .overlay-run-button { border-color: currentcolor; - div { + div:first-child { font-size: clamp(1.5rem, 3vw, 3rem); svg { - width: clamp(1.5rem, 3vw, 3rem); - height: clamp(1.5rem, 3vw, 3rem); + width: clamp(1.5rem, 3vw, 3rem) !important; + height: clamp(1.5rem, 3vw, 3rem) !important; vertical-align: bottom; } } - ul { - width: 80%; - - margin: 1rem auto; - - font-size: 16px; - - text-align: left; + div:nth-child(2) { + margin-top: 0.5rem; + line-height: var(--font-line-normal); + color: var(--color-text-secondary); } } diff --git a/components/playground/element.js b/components/playground/element.js index c2d3722c7..8a3778739 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -412,28 +412,10 @@ ${"```"}`, variant="plain" >
${circlePlay} ${this.l10n("playground-run")`Run`}
-
    -
  • - ${this.l10n( - "playground-run-warning-line-one", - )`This is a user-shared playground, not official MDN content.`} -
    • -
  • - ${this.l10n( - "playground-run-warning-line-two", - )`Always inspect the code first, and run it at your own risk.`} -
    • -
  • - ${this.l10n( - "playground-run-warning-line-three", - )`Running malicious code can expose you to serious risks, including theft of data, IP address, browser fingerprint, current session, etc.`} -
    • -
  • - ${this.l10n( - "playground-run-warning-line-four", - )`Never enter passwords, payment details, address, or any sensitive information.`} -
    • -
+
+ This is a user-shared playground.
+ Always inspect the code before running it. +
`} Date: Sat, 2 May 2026 05:11:36 +0530 Subject: [PATCH 09/12] Apply suggestions from code review Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com> --- components/playground/element.css | 4 ++-- components/playground/element.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/playground/element.css b/components/playground/element.css index efb1ea1f3..29620f95e 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -116,7 +116,7 @@ .overlay-run-button { border-color: currentcolor; - div:first-child { + .overlay-run-button--header { font-size: clamp(1.5rem, 3vw, 3rem); svg { @@ -126,7 +126,7 @@ } } - div:nth-child(2) { + .overlay-run-button--body { margin-top: 0.5rem; line-height: var(--font-line-normal); color: var(--color-text-secondary); diff --git a/components/playground/element.js b/components/playground/element.js index 8a3778739..3c1e702c5 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -411,14 +411,14 @@ ${"```"}`, @click=${this._run} variant="plain" > -
${circlePlay} ${this.l10n("playground-run")`Run`}
-
+
${circlePlay} ${this.l10n("playground-run")`Run`}
+
This is a user-shared playground.
Always inspect the code before running it.
`}
${this.l10n("playground-console")`Console`}
From a9a797043d6fe4bc61886f17404b29fc3ab1a2c4 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sat, 2 May 2026 05:19:56 +0530 Subject: [PATCH 10/12] unnest --- components/playground/element.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/components/playground/element.css b/components/playground/element.css index 29620f95e..80a5c2ee9 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -115,22 +115,22 @@ .overlay-run-button { border-color: currentcolor; + } - .overlay-run-button--header { - font-size: clamp(1.5rem, 3vw, 3rem); + .overlay-run-button--header { + font-size: clamp(1.5rem, 3vw, 3rem); - svg { - width: clamp(1.5rem, 3vw, 3rem) !important; - height: clamp(1.5rem, 3vw, 3rem) !important; - vertical-align: bottom; - } + svg { + width: clamp(1.5rem, 3vw, 3rem) !important; + height: clamp(1.5rem, 3vw, 3rem) !important; + vertical-align: bottom; } + } - .overlay-run-button--body { - margin-top: 0.5rem; - line-height: var(--font-line-normal); - color: var(--color-text-secondary); - } + .overlay-run-button--body { + margin-top: 0.5rem; + line-height: var(--font-line-normal); + color: var(--color-text-secondary); } .playground__console { From 262fafccf421e03529a85228be37f8b36c659c3b Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sun, 3 May 2026 09:11:04 +0530 Subject: [PATCH 11/12] lint --- components/playground/element.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/playground/element.js b/components/playground/element.js index 3c1e702c5..4fe310cf5 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -411,7 +411,9 @@ ${"```"}`, @click=${this._run} variant="plain" > -
${circlePlay} ${this.l10n("playground-run")`Run`}
+
+ ${circlePlay} ${this.l10n("playground-run")`Run`} +
This is a user-shared playground.
Always inspect the code before running it. From 55cc48c1cbd292541e56d50c87af9863d957a9c1 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Mon, 4 May 2026 15:43:24 +0200 Subject: [PATCH 12/12] chore(playground): localize shared warning --- components/playground/element.js | 3 +-- l10n/locales/en-US.ftl | 2 ++ l10n/locales/fr.ftl | 1 + l10n/template.ftl | 1 + 4 files changed, 5 insertions(+), 2 deletions(-) diff --git a/components/playground/element.js b/components/playground/element.js index 4fe310cf5..36babdb89 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -415,8 +415,7 @@ ${"```"}`, ${circlePlay} ${this.l10n("playground-run")`Run`}
- This is a user-shared playground.
- Always inspect the code before running it. + ${this.l10n.raw({ id: "playground-user-shared-warning" })}
`} by Developers + +playground-user-shared-warning = This is a user-shared playground.
Always inspect the code before running it. homepage-hero-description = Documenting CSS, HTML, and JavaScript, since 2005. not-found-title = Page not found diff --git a/l10n/locales/fr.ftl b/l10n/locales/fr.ftl index 9fcd73d28..f4dbb25d7 100644 --- a/l10n/locales/fr.ftl +++ b/l10n/locales/fr.ftl @@ -272,6 +272,7 @@ playground-share = Partager playground-clear = Effacer playground-reset = Réinitialiser playground-seeing-something-inappropriate = Voir quelque chose d'inapproprié ? +playground-user-shared-warning = Il s'agit d'un terrain d'essai partagé par un·e utilisateur·ice.
Inspectez toujours le code avant de l'exécuter. playground-console = Console playground-share-markdown = Partager le Markdown playground-copy-markdown-to-clipboard = Copier le Markdown dans le presse-papiers diff --git a/l10n/template.ftl b/l10n/template.ftl index 5863e64a6..4f669a380 100644 --- a/l10n/template.ftl +++ b/l10n/template.ftl @@ -11,6 +11,7 @@ baseline-supported-in = Supported in { $browsers } baseline-unsupported-in = Not widely supported in { $browsers } baseline-supported-and-unsupported-in = Supported in { $supported }, but not widely supported in { $unsupported } homepage-hero-title = Resources for Developers,
by Developers +playground-user-shared-warning = This is a user-shared playground.
Always inspect the code before running it. homepage-hero-description = Documenting CSS, HTML, and JavaScript, since 2005. not-found-title = Page not found not-found-description = Sorry, the page { $url } could not be found.