From 5b48c9c38c4dbaf61074eeb95eccb5c7c6184b6b Mon Sep 17 00:00:00 2001
From: Leo McArdle <leo@mca.is>
Date: Thu, 9 Jan 2025 15:44:03 +0000
Subject: [PATCH] fix(interactive-examples): telemetry, font-size, class-based
 hiding

---
 client/src/document/index.scss        |  2 +-
 client/src/lit/interactive-example.js | 34 ++++++++++++++-------------
 client/src/lit/play/console.scss      |  2 +-
 client/src/lit/play/editor.scss       |  5 +---
 4 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/client/src/document/index.scss b/client/src/document/index.scss
index 7ddb8a7f3228..4d36a6f27a7d 100644
--- a/client/src/document/index.scss
+++ b/client/src/document/index.scss
@@ -570,7 +570,7 @@ math[display="block"] {
   margin-bottom: 2rem;
   position: relative;
 
-  interactive-example ~ & {
+  [class*="interactive-example"] {
     display: none;
   }
 
diff --git a/client/src/lit/interactive-example.js b/client/src/lit/interactive-example.js
index ababc2137cb7..52222836ab62 100644
--- a/client/src/lit/interactive-example.js
+++ b/client/src/lit/interactive-example.js
@@ -28,8 +28,9 @@ export class InteractiveExample extends GleanMixin(LitElement) {
   }
 
   _initialCode() {
-    const examples =
-      this.closest("section")?.querySelectorAll(".code-example pre");
+    const examples = this.closest("section")?.querySelectorAll(
+      ".code-example pre[class*=interactive-example]"
+    );
     return Array.from(examples || []).reduce((acc, pre) => {
       const language = pre.classList[1];
       return language && pre.textContent
@@ -58,11 +59,12 @@ export class InteractiveExample extends GleanMixin(LitElement) {
 
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("focus", this._telemetryHandler);
-    this.addEventListener("copy", this._telemetryHandler);
-    this.addEventListener("cut", this._telemetryHandler);
-    this.addEventListener("paste", this._telemetryHandler);
-    this.addEventListener("click", this._telemetryHandler);
+    this._telemetryHandler = this._telemetryHandler.bind(this);
+    this.renderRoot.addEventListener("focus", this._telemetryHandler);
+    this.renderRoot.addEventListener("copy", this._telemetryHandler);
+    this.renderRoot.addEventListener("cut", this._telemetryHandler);
+    this.renderRoot.addEventListener("paste", this._telemetryHandler);
+    this.renderRoot.addEventListener("click", this._telemetryHandler);
   }
 
   render() {
@@ -70,12 +72,12 @@ export class InteractiveExample extends GleanMixin(LitElement) {
       <play-controller ${ref(this._controller)}>
         <div class="template-javascript">
           <h4>JavaScript Demo:</h4>
-          <play-editor language="javascript"></play-editor>
+          <play-editor id="editor" language="javascript"></play-editor>
           <div class="buttons">
-            <button @click=${this._run}>Run</button>
-            <button @click=${this._reset}>Reset</button>
+            <button id="execute" @click=${this._run}>Run</button>
+            <button id="reset" @click=${this._reset}>Reset</button>
           </div>
-          <play-console></play-console>
+          <play-console id="console"></play-console>
           <play-runner></play-runner>
         </div>
       </play-controller>
@@ -91,11 +93,11 @@ export class InteractiveExample extends GleanMixin(LitElement) {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("focus", this._telemetryHandler);
-    this.removeEventListener("copy", this._telemetryHandler);
-    this.removeEventListener("cut", this._telemetryHandler);
-    this.removeEventListener("paste", this._telemetryHandler);
-    this.removeEventListener("click", this._telemetryHandler);
+    this.renderRoot.removeEventListener("focus", this._telemetryHandler);
+    this.renderRoot.removeEventListener("copy", this._telemetryHandler);
+    this.renderRoot.removeEventListener("cut", this._telemetryHandler);
+    this.renderRoot.removeEventListener("paste", this._telemetryHandler);
+    this.renderRoot.removeEventListener("click", this._telemetryHandler);
   }
 }
 
diff --git a/client/src/lit/play/console.scss b/client/src/lit/play/console.scss
index 19827089b0b8..eecc6cf33735 100644
--- a/client/src/lit/play/console.scss
+++ b/client/src/lit/play/console.scss
@@ -3,7 +3,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  font-size: var(--type-smaller-font-size);
+  font-size: 0.875rem;
   height: 6rem;
   margin: 0;
   max-height: 6rem;
diff --git a/client/src/lit/play/editor.scss b/client/src/lit/play/editor.scss
index 60466cd2dd72..99728dd3e6c6 100644
--- a/client/src/lit/play/editor.scss
+++ b/client/src/lit/play/editor.scss
@@ -2,6 +2,7 @@
 
 :host {
   display: block;
+  font-size: 0.875rem;
 }
 
 .editor {
@@ -10,9 +11,5 @@
   .cm-editor {
     height: 100%;
     width: 100%;
-
-    @media (max-width: $screen-sm) {
-      font-size: 1rem;
-    }
   }
 }