fix: cleanup and update post message listener (#642)

mdn · Nov 18, 2021 · e27ddf8 · e27ddf8
1 parent c489ffa
commit e27ddf8
Show file tree

Hide file tree

Showing 19 changed files with 1,465 additions and 1,057 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,29 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "plugin:import/errors",
+        "prettier"
+    ],
+    "rules": {
+        "no-console": [
+            "error",
+            {
+                "allow": [
+                    "info",
+                    "error"
+                ]
+            }
+        ]
+    },
+    "plugins": [
+        "import"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 2021
+    },
+    "env": {
+        "es6": true,
+        "browser": true,
+        "node": true
+    }
+}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
diff --git a/.prettierrc b/.prettierrc
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/editor/js/editable-css.js b/editor/js/editable-css.js
@@ -1,133 +1,111 @@
-(function() {
-    'use strict';
+(function () {
+  "use strict";
 
-    var clippy = require('./editor-libs/clippy');
-    var mceEvents = require('./editor-libs/events');
-    var mceUtils = require('./editor-libs/mce-utils');
+  var clippy = require("./editor-libs/clippy");
+  var mceEvents = require("./editor-libs/events");
+  var mceUtils = require("./editor-libs/mce-utils");
 
-    var exampleChoiceList = document.getElementById('example-choice-list');
-    var exampleChoices = exampleChoiceList.querySelectorAll('.example-choice');
-    var header = document.querySelector('header');
-    var initialChoice = 0;
-    var originalChoices = [];
-    var output = document.getElementById('output');
+  var exampleChoiceList = document.getElementById("example-choice-list");
+  var exampleChoices = exampleChoiceList.querySelectorAll(".example-choice");
+  var header = document.querySelector("header");
+  var initialChoice = 0;
+  var originalChoices = [];
+  var output = document.getElementById("output");
 
-    /**
-     * Enables and initializes the live code editor
-     */
-    function enableLiveEditor() {
-        header.classList.remove('hidden');
-        exampleChoiceList.classList.add('live');
-        output.classList.remove('hidden');
+  /**
+   * Enables and initializes the live code editor
+   */
+  function enableLiveEditor() {
+    header.classList.remove("hidden");
+    exampleChoiceList.classList.add("live");
+    output.classList.remove("hidden");
 
-        for (var i = 0, l = exampleChoices.length; i < l; i++) {
-            var exampleChoice = exampleChoices[i];
+    for (var i = 0, l = exampleChoices.length; i < l; i++) {
+      var exampleChoice = exampleChoices[i];
 
-            originalChoices.push(
-                exampleChoice.querySelector('code').textContent
-            );
+      originalChoices.push(exampleChoice.querySelector("code").textContent);
 
-            if (exampleChoice.getAttribute('initial-choice')) {
-                initialChoice = indexOf(exampleChoices, exampleChoice);
-            }
-        }
-
-        mceEvents.register();
-        handleResetEvents();
-        handleChoiceHover();
-
-        clippy.addClippy();
+      if (exampleChoice.getAttribute("initial-choice")) {
+        initialChoice = indexOf(exampleChoices, exampleChoice);
+      }
     }
 
-    /**
-     * Attached an event handler on the reset button, and handles
-     * reset all the CSS examples to their original state
-     */
-    function handleResetEvents() {
-        var resetButton = document.getElementById('reset');
+    mceEvents.register();
+    handleResetEvents();
+    handleChoiceHover();
 
-        resetButton.addEventListener('click', function() {
-            for (var i = 0, l = exampleChoices.length; i < l; i++) {
-                var highlighted = Prism.highlight(
-                    originalChoices[i],
-                    Prism.languages.css
-                );
-                // IE11 does not support multiple selectors in `remove`
-                exampleChoices[i].classList.remove('invalid');
-                exampleChoices[i].classList.remove('selected');
-                exampleChoices[i].querySelector('code').innerHTML = highlighted;
-            }
+    clippy.addClippy();
+  }
 
-            // if there is an initial choice set, set it as selected
-            if (initialChoice) {
-                mceEvents.onChoose(exampleChoices[initialChoice]);
-                clippy.toggleClippy(exampleChoices[initialChoice]);
-            } else {
-                mceEvents.onChoose(exampleChoices[0]);
-                clippy.toggleClippy(exampleChoices[0]);
-            }
-        });
-    }
+  /**
+   * Attached an event handler on the reset button, and handles
+   * reset all the CSS examples to their original state
+   */
+  function handleResetEvents() {
+    var resetButton = document.getElementById("reset");
+
+    resetButton.addEventListener("click", function () {
+      for (var i = 0, l = exampleChoices.length; i < l; i++) {
+        var highlighted = Prism.highlight(
+          originalChoices[i],
+          Prism.languages.css
+        );
+        // IE11 does not support multiple selectors in `remove`
+        exampleChoices[i].classList.remove("invalid");
+        exampleChoices[i].classList.remove("selected");
+        exampleChoices[i].querySelector("code").innerHTML = highlighted;
+      }
+
+      // if there is an initial choice set, set it as selected
+      if (initialChoice) {
+        mceEvents.onChoose(exampleChoices[initialChoice]);
+        clippy.toggleClippy(exampleChoices[initialChoice]);
+      } else {
+        mceEvents.onChoose(exampleChoices[0]);
+        clippy.toggleClippy(exampleChoices[0]);
+      }
+    });
+  }
 
-    function indexOf(exampleChoices, choice) {
-        for (var i = 0, l = exampleChoices.length; i < l; i++) {
-            if (exampleChoices[i] === choice) {
-                return i;
-            }
-        }
-        return -1;
+  function indexOf(exampleChoices, choice) {
+    for (var i = 0, l = exampleChoices.length; i < l; i++) {
+      if (exampleChoices[i] === choice) {
+        return i;
+      }
     }
+    return -1;
+  }
 
-    /**
-     * Attach mouse events to example choices 
-     * for allowing clippy button to display on hover 
-     * and otherwise return to intial hidden state
-     */
-    function handleChoiceHover() {
-        for (var i = 0, l = exampleChoices.length; i < l; i++) {
-            var choice = exampleChoices[i];
-            var copyBtn = choice.querySelector('.copy');
-            copyBtn.setAttribute('aria-label', 'Copy to clipboard');
-
-            choice.addEventListener('mouseover', () => {
-                copyBtn.setAttribute('aria-hidden', false);
-            });
-            choice.addEventListener('mouseout', () => {
-                copyBtn.setAttribute('aria-hidden', true);
-            });
-        }
+  /**
+   * Attach mouse events to example choices
+   * for allowing clippy button to display on hover
+   * and otherwise return to intial hidden state
+   */
+  function handleChoiceHover() {
+    for (var i = 0, l = exampleChoices.length; i < l; i++) {
+      var choice = exampleChoices[i];
+      var copyBtn = choice.querySelector(".copy");
+      copyBtn.setAttribute("aria-label", "Copy to clipboard");
+
+      choice.addEventListener("mouseover", () => {
+        copyBtn.setAttribute("aria-hidden", false);
+      });
+      choice.addEventListener("mouseout", () => {
+        copyBtn.setAttribute("aria-hidden", true);
+      });
     }
+  }
 
-    /* only show the live code view if JS is enabled and the property is supported.
+  /* only show the live code view if JS is enabled and the property is supported.
     Also, only execute JS in our supported browsers. As `document.all`
     is a non standard object available only in IE10 and older,
     this will stop JS from executing in those versions. */
-    if (
-        mceUtils.isPropertySupported(exampleChoiceList.dataset) &&
-        !document.all
-    ) {
-        enableLiveEditor();
-        mceEvents.onChoose(exampleChoices[initialChoice]);
-        clippy.toggleClippy(exampleChoices[initialChoice]);
-    }
-
-    /* Ensure that performance is supported before
-       gathering the performance metric */
-    if (performance !== undefined) {
-        document.addEventListener('readystatechange', function(event) {
-            if (event.target.readyState === 'complete') {
-                /* loadEventEnd happens a split second after we
-                   reached complete. So we wait an additional
-                   100ms before getting it’ value */
-                setTimeout(function() {
-                    mceEvents.trackloadEventEnd(
-                        'CSS editor load time',
-                        performance.timing.loadEventEnd
-                    );
-                    // Posts mark to set on the Kuma side and used in measure
-                    mceUtils.postToKuma({ markName: 'css-ie-load-event-end' });
-                }, 100);
-            }
-        });
-    }
+  if (
+    mceUtils.isPropertySupported(exampleChoiceList.dataset) &&
+    !document.all
+  ) {
+    enableLiveEditor();
+    mceEvents.onChoose(exampleChoices[initialChoice]);
+    clippy.toggleClippy(exampleChoices[initialChoice]);
+  }
 })();