fix(interactive-examples): telemetry, font-size, class-based hiding

mdn · Jan 9, 2025 · 5b48c9c · 5b48c9c
1 parent 8dbb3eb
commit 5b48c9c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 22 deletions.
diff --git 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
@@ -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,24 +59,25 @@ 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() {
     return html`
       <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
@@ -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
@@ -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;
-    }
   }
 }