Playground: Display panel name (#18651)

website/playground/Playground.jsx

@@ -398,6 +398,7 @@ function setup(props) {
                 <div class="editors">
                   {editorState.showInput ? (
                     <InputPanel
+                      name="Input"
                       mode={getCodemirrorMode(options.parser)}
                       ruler={options.printWidth}
                       value={content}
@@ -416,6 +417,7 @@ function setup(props) {
                   ) : null}
                   {editorState.showAst ? (
                     <DebugPanel
+                      name="AST"
                       mode="JSON"
                       value={debug.ast || ""}
                       autoFold={getAstAutoFold(options.parser)}
@@ -423,16 +425,22 @@ function setup(props) {
                   ) : null}
                   {editorState.showPreprocessedAst && !isDocExplorer ? (
                     <DebugPanel
+                      name="Preprocessed AST"
                       mode="JSON"
                       value={debug.preprocessedAst || ""}
                       autoFold={getAstAutoFold(options.parser)}
                     />
                   ) : null}
                   {editorState.showDoc && !isDocExplorer ? (
-                    <DebugPanel mode="JavaScript" value={debug.doc || ""} />
+                    <DebugPanel
+                      name="Doc"
+                      mode="JavaScript"
+                      value={debug.doc || ""}
+                    />
                   ) : null}
                   {editorState.showComments && !isDocExplorer ? (
                     <DebugPanel
+                      name="Comments"
                       mode="JSON"
                       value={debug.comments || ""}
                       autoFold={getAstAutoFold(options.parser)}
@@ -440,6 +448,7 @@ function setup(props) {
                   ) : null}
                   {editorState.showOutput ? (
                     <OutputPanel
+                      name="Output"
                       mode={getCodemirrorMode(options.parser)}
                       value={formatted}
                       ruler={options.printWidth}
@@ -453,6 +462,7 @@ function setup(props) {
                   ) : null}
                   {editorState.showSecondFormat && !isDocExplorer ? (
                     <OutputPanel
+                      name="Output (Second format)"
                       mode={getCodemirrorMode(options.parser)}
                       value={getSecondFormat(formatted, debug.reformatted)}
                       ruler={options.printWidth}

website/playground/header.vue

@@ -34,7 +34,6 @@ defineProps({
 .links {
   display: flex;
   gap: 8px;
-  font-size: 16px;
   align-items: flex-end;
 }
 

website/playground/panels.jsx

@@ -285,6 +285,7 @@ function setup(props, { emit }) {
   const render = () => (
     <div class="editor input">
       <div ref="editorRef" style={{ position: "absolute", inset: 0 }} />
+      <div class="editor__name">{props.name}</div>
     </div>
   );
 
@@ -388,6 +389,7 @@ function setup(props, { emit }) {
 const CodeMirrorPanel = {
   name: "CodeMirrorPanel",
   props: {
+    name: { type: String, required: true },
     value: { type: String, required: true },
     selection: { type: Object, default: undefined },
     onSelectionChange: { type: Function, default: undefined },
@@ -438,7 +440,7 @@ export function OutputPanel(props) {
   );
 }
 
-export function DebugPanel({ mode, value, autoFold }) {
+export function DebugPanel({ mode, value, autoFold, name }) {
   return (
     <CodeMirrorPanel
       readOnly={true}
@@ -447,6 +449,7 @@ export function DebugPanel({ mode, value, autoFold }) {
       autoFold={autoFold}
       mode={mode}
       value={value}
+      name={name}
     />
   );
 }

website/playground/playground.css

@@ -131,6 +131,10 @@ header h1 {
   padding: 10px 20px;
 }
 
+.editor {
+  position: relative;
+}
+
 /* display as 2x2 grid */
 @media (min-width: 800px) {
   .options-container {
@@ -155,6 +159,18 @@ header h1 {
   opacity: 0;
 }
 
+.editor__name {
+  color: #fff;
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  background: #000;
+  opacity: 0.4;
+  padding: 0.25em 0.5em;
+  pointer-events: none;
+  border-start-end-radius: 4px;
+}
+
 .bottom-bar {
   position: relative;
 }