From 016229537740a10b4a032b867281c97df2f77163 Mon Sep 17 00:00:00 2001 From: brysonbw <77869922+brysonbw@users.noreply.github.com> Date: Fri, 24 Oct 2025 09:16:09 -0600 Subject: [PATCH 1/6] fix(playground): allow report hint banner to be dismissed --- components/playground/element.css | 26 ++++++++++++++++++++++++++ components/playground/element.js | 30 ++++++++++++++++++++++++++---- 2 files changed, 52 insertions(+), 4 deletions(-) diff --git a/components/playground/element.css b/components/playground/element.css index 9a56bc330..5cec9e165 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -104,6 +104,32 @@ flex-grow: 1; } + .playground__runner-report-hint-banner { + display: flex; + + &:hover { + background-color: var(--color-background-secondary); + } + + button { + padding: 0.5em; + + font-size: 0.875em; + font-weight: 450; + + background-color: transparent; + border: none; + } + + .report-hint-button { + flex-grow: 1; + } + + .report-hint-close-button span:hover { + color: var(--error-color, #dd3333); + } + } + .playground__console { background-color: var(--color-background-secondary); border-top: var(--border); diff --git a/components/playground/element.js b/components/playground/element.js index 5fa9fe858..f2f990df5 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -30,6 +30,7 @@ export class MDNPlayground extends L10nMixin(LitElement) { static properties = { _gistID: { state: true }, + _showReportHintBanner: { state: true }, }; constructor() { @@ -38,6 +39,8 @@ export class MDNPlayground extends L10nMixin(LitElement) { this._autoRun = true; /** @type {string | undefined} */ this._gistId = undefined; + /** @type {boolean} */ + this._showReportHintBanner = false; } /** @type {Ref} */ @@ -188,6 +191,7 @@ ${"```"}`, if (idParam) { this._gistId = idParam; + this._showReportHintBanner = true; } const { srcPrefix: srcPrefixState, code } = @@ -255,7 +259,12 @@ ${"```"}`, this.requestUpdate(); } + _dismissReportHintBanner() { + this._showReportHintBanner = false; + } + _reportOpen() { + this._dismissReportHintBanner(); this._reportModal.value?.showModal(); } @@ -282,6 +291,21 @@ ${"```"}`, this._user.run(); } + _renderReportHintBanner() { + return html`
+ + +
`; + } + render() { const { code, initialCode } = this._controller.value ?? {}; const hasCode = Object.values(code ?? {}).some(Boolean); @@ -356,10 +380,8 @@ ${"```"}`,
- ${this._gistId - ? html` - ${this.l10n`Seeing something inappropriate?`} - ` + ${this._gistId && this._showReportHintBanner + ? html`${this._renderReportHintBanner()}` : nothing}
From 09db907a370e2a47b220ffd37903a5b68ec25e4a Mon Sep 17 00:00:00 2001 From: brysonbw <77869922+brysonbw@users.noreply.github.com> Date: Thu, 9 Oct 2025 06:09:41 -0600 Subject: [PATCH 2/6] fix(playground): dismiss report hint banner when clearing playground --- components/playground/element.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/playground/element.js b/components/playground/element.js index f2f990df5..80c331601 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -84,6 +84,7 @@ export class MDNPlayground extends L10nMixin(LitElement) { ) { controller.clear(); this._autoRun = true; + this._showReportHintBanner && this._dismissReportHintBanner(); this._storeSession(); this.requestUpdate(); const urlWithoutSearch = new URL(location.href); From c6946eafeb042ac971f56c398afc71575660a1f2 Mon Sep 17 00:00:00 2001 From: brysonbw <77869922+brysonbw@users.noreply.github.com> Date: Fri, 17 Oct 2025 20:19:29 -0600 Subject: [PATCH 3/6] fix(playground): undue dismissing report hint banner upon report dialog action --- components/playground/element.js | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/components/playground/element.js b/components/playground/element.js index 80c331601..dc03f4788 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -4,6 +4,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 { globalUser } from "../user/context.js"; import styles from "./element.css?lit"; @@ -265,7 +266,6 @@ ${"```"}`, } _reportOpen() { - this._dismissReportHintBanner(); this._reportModal.value?.showModal(); } @@ -293,18 +293,15 @@ ${"```"}`, } _renderReportHintBanner() { - return html`
- - -
`; + Seeing something inappropriate? + +
`; } render() { @@ -380,10 +377,10 @@ ${"```"}`, > + ${this._gistId && this._showReportHintBanner + ? html`${this._renderReportHintBanner()}` + : nothing}
- ${this._gistId && this._showReportHintBanner - ? html`${this._renderReportHintBanner()}` - : nothing}
${this.l10n`Console`}
From d09ea918c64d1149bdffae747a4b930ddf130678 Mon Sep 17 00:00:00 2001 From: brysonbw <77869922+brysonbw@users.noreply.github.com> Date: Fri, 17 Oct 2025 20:20:31 -0600 Subject: [PATCH 4/6] fix(playground): rework playground grid layout --- components/playground/element.css | 84 +++++++++++++++++-------------- 1 file changed, 45 insertions(+), 39 deletions(-) diff --git a/components/playground/element.css b/components/playground/element.css index 5cec9e165..4580f1f7e 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -3,14 +3,21 @@ .wrapper { display: grid; - grid-template-areas: "left runner"; - grid-template-rows: 1fr; + grid-template-areas: + "left banner" + "left runner"; + grid-template-rows: auto 1fr; grid-template-columns: 1fr 1fr; gap: 1rem; height: 100%; + &:not(:has(.playground__runner-report-hint-banner)) { + grid-template-areas: "left runner"; + grid-template-rows: 1fr; + } + section { display: flex; @@ -91,58 +98,57 @@ height: calc(100% - 2em); } } + } - &.playground__runner-console { - grid-area: runner; + .playground__runner-report-hint-banner { + display: flex; - overflow: hidden; + flex-wrap: wrap; + + grid-area: banner; + gap: 0.5rem; + align-items: center; + + padding: 0.5rem 0; + + mdn-button { + align-self: flex-end; border: var(--border); border-radius: 0.25rem; + } - mdn-play-runner { - flex-grow: 1; + @media (--screen-medium-and-narrower) { + mdn-button { + align-self: center; } + } + } - .playground__runner-report-hint-banner { - display: flex; - - &:hover { - background-color: var(--color-background-secondary); - } + .playground__runner-console { + grid-area: runner; - button { - padding: 0.5em; + overflow: hidden; - font-size: 0.875em; - font-weight: 450; + border: var(--border); + border-radius: 0.25rem; - background-color: transparent; - border: none; - } + mdn-play-runner { + flex-grow: 1; + } - .report-hint-button { - flex-grow: 1; - } + .playground__console { + background-color: var(--color-background-secondary); + border-top: var(--border); - .report-hint-close-button span:hover { - color: var(--error-color, #dd3333); - } + div { + font-size: var(--font-size-small); + font-weight: var(--font-weight-bold); + text-align: center; } - .playground__console { - background-color: var(--color-background-secondary); - border-top: var(--border); - - div { - font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); - text-align: center; - } - - mdn-play-console { - height: 6rem; - } + mdn-play-console { + height: 6rem; } } } From 20863bcc491f15215652750e0db6fe18f75dda64 Mon Sep 17 00:00:00 2001 From: brysonbw <77869922+brysonbw@users.noreply.github.com> Date: Wed, 5 Nov 2025 23:12:18 -0700 Subject: [PATCH 5/6] fix(playground): apply suggestions --- components/playground/element.css | 80 +++++++++++-------------------- components/playground/element.js | 37 +++++--------- 2 files changed, 42 insertions(+), 75 deletions(-) diff --git a/components/playground/element.css b/components/playground/element.css index 4580f1f7e..19bbbca62 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -3,21 +3,14 @@ .wrapper { display: grid; - grid-template-areas: - "left banner" - "left runner"; - grid-template-rows: auto 1fr; + grid-template-areas: "left runner"; + grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; gap: 1rem; height: 100%; - &:not(:has(.playground__runner-report-hint-banner)) { - grid-template-areas: "left runner"; - grid-template-rows: 1fr; - } - section { display: flex; @@ -38,9 +31,6 @@ padding: 0.5rem; - border: var(--border); - border-radius: 0.25rem; - h1 { margin: 0; margin-right: auto; @@ -98,57 +88,45 @@ height: calc(100% - 2em); } } - } - - .playground__runner-report-hint-banner { - display: flex; - flex-wrap: wrap; - - grid-area: banner; - - gap: 0.5rem; - align-items: center; - - padding: 0.5rem 0; - - mdn-button { + .playground__runner-menu { align-self: flex-end; - border: var(--border); - border-radius: 0.25rem; - } + padding: 0.5rem 0; - @media (--screen-medium-and-narrower) { mdn-button { + border: var(--border); + border-radius: 0.25rem; + } + + @media (--screen-medium-and-narrower) { align-self: center; } } - } - - .playground__runner-console { - grid-area: runner; - - overflow: hidden; - border: var(--border); - border-radius: 0.25rem; + &.playground__runner-console { + grid-area: runner; + overflow: hidden; - mdn-play-runner { - flex-grow: 1; - } + mdn-play-runner { + flex-grow: 1; + border: var(--border); + border-radius: 0.25rem; + } - .playground__console { - background-color: var(--color-background-secondary); - border-top: var(--border); + .playground__console { + background-color: var(--color-background-secondary); + border: var(--border); + border-radius: 0.25rem; - div { - font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); - text-align: center; - } + div { + font-size: var(--font-size-small); + font-weight: var(--font-weight-bold); + text-align: center; + } - mdn-play-console { - height: 6rem; + mdn-play-console { + height: 6rem; + } } } } diff --git a/components/playground/element.js b/components/playground/element.js index dc03f4788..a999cc860 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -31,7 +31,6 @@ export class MDNPlayground extends L10nMixin(LitElement) { static properties = { _gistID: { state: true }, - _showReportHintBanner: { state: true }, }; constructor() { @@ -40,8 +39,6 @@ export class MDNPlayground extends L10nMixin(LitElement) { this._autoRun = true; /** @type {string | undefined} */ this._gistId = undefined; - /** @type {boolean} */ - this._showReportHintBanner = false; } /** @type {Ref} */ @@ -85,7 +82,6 @@ export class MDNPlayground extends L10nMixin(LitElement) { ) { controller.clear(); this._autoRun = true; - this._showReportHintBanner && this._dismissReportHintBanner(); this._storeSession(); this.requestUpdate(); const urlWithoutSearch = new URL(location.href); @@ -193,7 +189,6 @@ ${"```"}`, if (idParam) { this._gistId = idParam; - this._showReportHintBanner = true; } const { srcPrefix: srcPrefixState, code } = @@ -261,10 +256,6 @@ ${"```"}`, this.requestUpdate(); } - _dismissReportHintBanner() { - this._showReportHintBanner = false; - } - _reportOpen() { this._reportModal.value?.showModal(); } @@ -292,18 +283,6 @@ ${"```"}`, this._user.run(); } - _renderReportHintBanner() { - return html`
- - Seeing something inappropriate? - -
`; - } - render() { const { code, initialCode } = this._controller.value ?? {}; const hasCode = Object.values(code ?? {}).some(Boolean); @@ -377,10 +356,20 @@ ${"```"}`, >
- ${this._gistId && this._showReportHintBanner - ? html`${this._renderReportHintBanner()}` - : nothing}
+ ${this._gistId + ? html`` + : nothing}
${this.l10n`Console`}
From 48f13a64e93be49b68c0429872d4064348f9c304 Mon Sep 17 00:00:00 2001 From: brysonbw <77869922+brysonbw@users.noreply.github.com> Date: Fri, 30 Jan 2026 16:44:09 -0700 Subject: [PATCH 6/6] fix(playground): align grid columns --- components/playground/element.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/playground/element.css b/components/playground/element.css index 19bbbca62..7aa269086 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -8,6 +8,7 @@ grid-template-columns: 1fr 1fr; gap: 1rem; + align-items: stretch; height: 100%; @@ -29,7 +30,7 @@ gap: 0.5rem; align-items: center; - padding: 0.5rem; + padding: 0.57rem; h1 { margin: 0;