mdn · queengooborg · Jan 26, 2023 · Nov 27, 2022 · Nov 27, 2022 · Jul 20, 2022
@@ -9,5 +9,7 @@
     "examplesMediaDest": "./docs/media/",
     "fontsMediaDest": "./docs/media/fonts/",
     "metaGlob": "./live-examples/**/meta.json",
-    "pagesDir": "./docs/pages/"
+    "pagesDir": "./docs/pages/",
+    "editorHeights": "./editor-heights.json",
+    "heightData": "./docs/height-data.json"
 }
@@ -0,0 +1,134 @@
+{
+  "editors": [
+    {
+      "name": "css",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 675
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 375
+        }
+      ]
+    },
+    {
+      "name": "js-taller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 723
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 654
+        }
+      ]
+    },
+    {
+      "name": "js-standard",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 513
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 444
+        }
+      ]
+    },
+    {
+      "name": "js-smaller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 433
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 364
+        }
+      ]
+    },
+    {
+      "name": "wat-taller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 686
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 617
+        }
+      ]
+    },
+    {
+      "name": "wat-standard",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 476
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 407
+        }
+      ]
+    },
+    {
+      "name": "wat-smaller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 406
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 337
+        }
+      ]
+    },
+    {
+      "name": "tabbed-taller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 774
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 630
+        }
+      ]
+    },
+    {
+      "name": "tabbed-standard",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 549
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 420
+        }
+      ]
+    },
+    {
+      "name": "tabbed-shorter",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 487
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 350
+        }
+      ]
+    }
+  ]
+}
@@ -457,19 +457,30 @@ body {
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
-  border-bottom: 1px solid var(--border-primary);
 }
 
-.output-header.no-border {
-  border-bottom: 0 none;
+.border-rounded-top {
+  border: 1px solid var(--border-primary);
+  border-radius: var(--button-radius) var(--button-radius) 0 0;
 }
 
-.output-header.full-border {
-  border: 1px solid var(--border-primary);
-  border-width: 1px 1px 0 1px;
+.border-rounded-top-no-bottom {
+  border: solid var(--border-primary);
+  border-width: 1px 1px 0;
   border-radius: var(--button-radius) var(--button-radius) 0 0;
 }
 
+.border-sides {
+  border: solid var(--border-primary);
+  border-width: 0 1px;
+}
+
+.border-rounded-bottom {
+  border: solid var(--border-primary);
+  border-width: 0 1px 1px;
+  border-radius: 0 0 var(--button-radius) var(--button-radius);
+}
+
 .output-heading {
   margin: 0;
   font: var(--type-body-l);

@@ -75,7 +75,6 @@
 
 .console-container {
   position: relative;
-  border-top: 1px solid var(--border-primary);
   padding-top: 0.5rem;
 }
 

@@ -12,7 +12,7 @@
 
   <body>
     <section class="css-editor-container">
-      <header class="output-header">
+      <header class="output-header border-rounded-top">
         <h4 class="output-heading">%title%</h4>
         <button id="reset" class="reset" type="button">Reset</button>
       </header>
@@ -25,7 +25,10 @@ <h4 class="output-heading">%title%</h4>
         This feature is not supported by your current browser. Check Browser
         compatibility for more details.
       </div>
-      <div id="editor-wrapper" class="editor-wrapper hidden">
+      <div
+        id="editor-wrapper"
+        class="editor-wrapper border-rounded-bottom hidden"
+      >
         %example-code%
       </div>
     </section>

@@ -14,7 +14,7 @@
     <section id="static">%example-code%</section>
 
     <section id="live" class="live hidden">
-      <header class="output-header full-border">
+      <header class="output-header border-rounded-top-no-bottom">
         <h4 class="output-heading">%title%</h4>
       </header>
       <div id="editor" class="editor"></div>

@@ -10,7 +10,7 @@
   </head>
 
   <body>
-    <header class="output-header">
+    <header class="output-header border-rounded-top">
       <h4 class="output-heading">%title%</h4>
       <button id="reset" class="reset" type="button">Reset</button>
     </header>
@@ -21,7 +21,7 @@ <h4 class="output-heading">%title%</h4>
     </noscript>
     <div
       id="editor-container"
-      class="editor-container %editor-height% hidden"
+      class="editor-container %editor-height% hidden border-rounded-bottom"
       %active-tabs%
       %default-tab%
     >

@@ -11,12 +11,12 @@
   <body>
     <section id="static">%example-code%</section>
 
-    <header class="output-header">
+    <header class="output-header border-rounded-top">
       <h4 class="output-heading">%title%</h4>
     </header>
 
     <section id="tab-container" class="tabs">
-      <div class="tab-list" id="tablist" role="tablist">
+      <div class="tab-list border-sides" id="tablist" role="tablist">
         <button
           role="tab"
           aria-selected="false"

@@ -0,0 +1,116 @@
+import fse from "fs-extra";
+import glob from "glob";
+
+import getConfig from "./config.js";
+import { getJSPageHeight, getWatPageHeight } from "./processor.js";
+
+const config = getConfig();
+
+function getEditorHeights() {
+  return fse.readJsonSync(config.editorHeights);
+}
+
+/**
+ * Converts content of meta.json to object containing path and editor name of every interactive example present in that file
+ *
+ * In case meta.json is missing required height property or it has unsupported value, exception is thrown
+ * @param metaContent - Content of meta.json as an JS object
+ */
+function getPagesEditorNames(metaContent) {
+  const pages = Object.values(metaContent.pages);
+  const editorNames = {};
+
+  for (const page of pages) {
+    const height = getEditorName(page);
+    if (height !== undefined) {
+      const path = getPagePath(page);
+      editorNames[path] = height;
+    }
+  }
+  return editorNames;
+}
+
+function getPagePath(page) {
+  return `pages/${page.type}/${page.fileName}`;
+}
+
+/**
+ * Returns editor name for a given page, based on its height
+ * Every editor name must have a record in editor-heights.json
+ * @param page - Object describing single interactive example
+ * @return {String} - editor name
+ */
+function getEditorName(page) {
+  switch (page.type) {
+    case "css":
+      return "css";
+    case "tabbed":
+    case "webapi-tabbed":
+      switch (page.height) {
+        case "tabbed-taller":
+        case "tabbed-standard":
+        case "tabbed-shorter":
+          return page.height;
+        default:
+          throw new Error(
+            `MDN-BOB: (heightBuilder.js) Invalid height property for ${page.fileName}`
+          );
+      }
+    case "js": {
+      const height = getJSPageHeight(page.exampleCode);
+      switch (height) {
+        case "taller":
+          return "js-taller";
+        case "":
+          return "js-standard";
+        case "shorter":
+          return "js-smaller";
+        default:
+          throw new Error(
+            `MDN-BOB: (heightBuilder.js) Height '${height}' calculated for JS example '${page.fileName}' is invalid`
+          );
+      }
+    }
+    case "wat": {
+      const height = getWatPageHeight(page.watExampleCode);
+      switch (height) {
+        case "taller":
+          return "wat-taller";
+        case "standard":
+          return "wat-standard";
+        case "shorter":
+          return "wat-smaller";
+        default:
+          throw new Error(
+            `MDN-BOB: (heightBuilder.js) Height '${height}' calculated for WAT example '${page.fileName}' is invalid`
+          );
+      }
+    }
+    default:
+      throw new Error(
+        `MDN-BOB: (heightBuilder.js) Unsupported page type ${page.type}`
+      );
+  }
+}
+
+/**
+ * Builds height-data.json containing path and editor name of every interactive example in `examples` property,
+ * together with content of editor-heights which contains name and the height of every editor type
+ */
+export default function buildHeightData() {
+  const metaJSONArray = glob.sync(config.metaGlob, {});
+  const heightData = {
+    ...getEditorHeights(),
+  };
+  heightData.examples = {};
+
+  for (const metaJson of metaJSONArray) {
+    const file = fse.readJsonSync(metaJson);
+
+    const names = getPagesEditorNames(file);
+    Object.assign(heightData.examples, names);
+  }
+
+  const jsonData = JSON.stringify(heightData, null, 4);
+  fse.outputFileSync(config.heightData, jsonData);
+}
@@ -6,6 +6,7 @@ import webpack from "webpack";
 import webpackConfig from "../webpack.config.js";
 import getConfig from "./config.js";
 import * as pageBuilder from "./pageBuilder.js";
+import buildHeightData from "./heightBuilder.js";
 import * as utils from "./utils.js";
 
 function doWebpack() {
@@ -48,6 +49,10 @@ async function init() {
     console.info("MDN-BOB: Running Webpack...");
     await doWebpack();
 
+    console.info("MDN-BOB: Building height-data");
+    buildHeightData();
+    console.info("MDN-BOB: Height Data was successfully constructed");
+
     console.info("MDN-BOB: Building pages....");
     console.log(await pageBuilder.buildPages());