fix (playground): allow report hint banner to be dismissed

Author: brysonbw

components/playground/element.css

@@ -104,6 +104,34 @@
         flex-grow: 1;
       }
 
+      .playground__runner-report-hint-banner-button {
+        display: flex;
+
+        padding: 0.5em;
+
+        font-size: 0.875em;
+        font-weight: 450;
+
+        background-color: transparent;
+        border: none;
+
+        &:hover {
+          background-color: var(--color-background-secondary);
+        }
+
+        .report-hint {
+          flex-grow: 1;
+        }
+
+        .report-hint-banner-close-button {
+          margin-left: auto;
+        }
+
+        .report-hint-banner-close-button:hover {
+          color: var(--error-color, #dd3333);
+        }
+      }
+
       .playground__console {
         background-color: var(--color-background-secondary);
         border-top: var(--border);

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<MDNPlayController>} */
@@ -188,6 +191,7 @@ ${"```"}`,
 
       if (idParam) {
         this._gistId = idParam;
+        this._showReportHintBanner = true;
       }
 
       const { srcPrefix: srcPrefixState, code } =
@@ -255,7 +259,16 @@ ${"```"}`,
     this.requestUpdate();
   }
 
+  /** @param {Event} [event] */
+  _dismissReportHintBanner(event) {
+    if (event && event instanceof Event) {
+      event.stopPropagation();
+    }
+    this._showReportHintBanner = false;
+  }
+
   _reportOpen() {
+    this._dismissReportHintBanner();
     this._reportModal.value?.showModal();
   }
 
@@ -282,6 +295,22 @@ ${"```"}`,
     this._user.run();
   }
 
+  _renderReportHintBanner() {
+    return html`<button
+      class="playground__runner-report-hint-banner-button"
+      @click=${this._reportOpen}
+    >
+      <span class="report-hint">Seeing something inappropriate?</span>
+      <span
+        role="button"
+        class="report-hint-banner-close-button"
+        @click=${this._dismissReportHintBanner}
+        aria-label=${this.l10n`Close report hint banner`}
+        >X</span
+      >
+    </button>`;
+  }
+
   render() {
     const { code, initialCode } = this._controller.value ?? {};
     const hasCode = Object.values(code ?? {}).some(Boolean);
@@ -356,10 +385,8 @@ ${"```"}`,
             </details>
           </section>
           <section class="playground__runner-console">
-            ${this._gistId
-              ? html`<mdn-button @click=${this._reportOpen} variant="plain">
-                  Seeing something inappropriate?
-                </mdn-button>`
+            ${this._gistId && this._showReportHintBanner
+              ? html`${this._renderReportHintBanner()}`
               : nothing}
             <mdn-play-runner></mdn-play-runner>
             <div class="playground__console">