internal/relui: fix log viewing errors

Wait for DOMContentLoaded before trying to add listeners, as some of the
data may not be in the dom yet when many workflows are visible. If the
page has already loaded, register them immediately.

Update eslint to require function expression declarations in javascript.

Remove inline JavaScript from the workflow form. Registering event
listeners in JavaScript instead of in HTML attributes is preferable for
several reasons:

- Separation of JavaScript logic from view
- Avoids polluting the global namespace
- Allows attaching multiple listeners to elements
- Easier code re-use

Updates golang/go#53382

Change-Id: I3dfefd1212482448eb2ff23aa77f89ead57823d8
Reviewed-on: https://go-review.googlesource.com/c/build/+/412678
Run-TryBot: Alex Rakoczy <[email protected]>
Reviewed-by: Dmitri Shuralyov <[email protected]>
TryBot-Result: Gopher Robot <[email protected]>
Reviewed-by: Dmitri Shuralyov <[email protected]>

Author: toothrot

cmd/relui/.eslintrc.yaml

@@ -15,7 +15,12 @@ overrides:
       - eslint:recommended
       - plugin:prettier/recommended
     rules:
-      max-len: off
+      func-style:
+        - error
+        - "expression"
+      prettier/prettier:
+        - error
+        - printWidth: 120
       valid-jsdoc:
         - error
         - requireParamType: false

internal/relui/static/site.js

@@ -14,58 +14,83 @@
    *
    * @param {string} selector - css selector for target element
    */
-  function registerTaskListExpandListeners(selector) {
+  const registerTaskListExpandListeners = (selector) => {
     document.querySelectorAll(selector).forEach((element) => {
       element.addEventListener("click", (e) => {
         e.stopPropagation();
         element.classList.toggle("TaskList-expanded");
         element.nextElementSibling.classList.toggle("TaskList-expanded");
       });
     });
-  }
+  };
 
-  registerTaskListExpandListeners(".TaskList-expandableItem");
-})();
+  /**
+   * addSliceRow creates and appends a row to a slice parameter
+   * for filling in an element.
+   *
+   * @param {HTMLElement} container - the container element
+   * @param {string} paramName - the parameter name
+   * @param {string} element - the element tag to create
+   * @param {string} inputType - the type attribute if element is "input"
+   * @param {string} paramExample - an example value for the parameter
+   */
+  const addSliceRow = (container, paramName, element, inputType, paramExample) => {
+    /*
+      Create an input element, a button to remove it, group them in a "parameterRow" div:
 
-/* eslint-disable no-unused-vars */
-/**
- * addSliceRow creates and appends a row to a slice parameter
- * for filling in an element.
- *
- * @param {HTMLElement} container - the container element
- * @param {string} paramName - the parameter name
- * @param {string} element - the element tag to create
- * @param {string} inputType - the type attribute if element is "input"
- * @param {string} paramExample - an example value for the parameter
- */
-function addSliceRow(container, paramName, element, inputType, paramExample) {
-  /*
-    Create an input element, a button to remove it, group them in a "parameterRow" div:
+      <div class="NewWorkflow-parameterRow">
+        <input name="workflow.params.{{$p.Name}}" placeholder="{{paramExample}}" />
+        <button title="Remove this row from the slice." onclick="/ * Remove this row. * /">-</button>
+      </div>
+    */
+    const input = document.createElement(element);
+    input.name = "workflow.params." + paramName;
+    if (element === "input") {
+      input.type = inputType;
+    }
+    input.placeholder = paramExample;
+    const removeButton = document.createElement("button");
+    removeButton.title = "Remove this row from the slice.";
+    removeButton.addEventListener("click", (e) => {
+      e.preventDefault();
+      container.removeChild(div);
+    });
+    removeButton.appendChild(document.createTextNode("-"));
+    const div = document.createElement("div");
+    div.className = "NewWorkflow-parameterRow";
+    div.appendChild(input);
+    div.appendChild(removeButton);
 
-    <div class="NewWorkflow-parameterRow">
-      <input name="workflow.params.{{$p.Name}}" placeholder="{{paramExample}}" />
-      <button title="Remove this row from the slice." onclick="/ * Remove this row. * /">-</button>
-    </div>
-  */
-  const input = document.createElement(element);
-  input.name = "workflow.params." + paramName;
-  if (element === "input") {
-    input.type = inputType;
-  }
-  input.placeholder = paramExample;
-  const removeButton = document.createElement("button");
-  removeButton.title = "Remove this row from the slice.";
-  removeButton.addEventListener("click", (e) => {
-    e.preventDefault();
-    container.removeChild(div);
-  });
-  removeButton.appendChild(document.createTextNode("-"));
-  const div = document.createElement("div");
-  div.className = "NewWorkflow-parameterRow";
-  div.appendChild(input);
-  div.appendChild(removeButton);
+    // Add the "parameterRow" div to the document.
+    container.appendChild(div);
+  };
 
-  // Add the "parameterRow" div to the document.
-  container.appendChild(div);
-}
-/* eslint-enable no-unused-vars */
+  /** addSliceRowListener registers listeners for addSliceRow.
+   *
+   * @param {string} selector - elements to add click listener for addSliceRow.
+   */
+  const addSliceRowListener = (selector) => {
+    document.querySelectorAll(selector).forEach((element) => {
+      element.addEventListener("click", (e) => {
+        e.stopPropagation();
+        addSliceRow(
+          element.parentElement.parentElement,
+          element.dataset.paramname,
+          element.dataset.element,
+          element.dataset.inputtype,
+          element.dataset.paramexample
+        );
+      });
+    });
+  };
+
+  const registerListeners = () => {
+    registerTaskListExpandListeners(".TaskList-expandableItem");
+    addSliceRowListener(".NewWorkflow-addSliceRowButton");
+  };
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", registerListeners);
+  } else {
+    registerListeners();
+  }
+})();

internal/relui/templates/new_workflow.html

@@ -37,7 +37,12 @@ <h2>New Go Release</h2>
             <div class="NewWorkflow-parameter NewWorkflow-parameter--slice">
               <div class="NewWorkflow-parameterRow">
                 <label title="{{$p.Doc}}">{{$p.Name}}</label>
-                <button title="Increment the slice length." onclick="event.preventDefault(); addSliceRow(this.parentElement.parentElement, '{{$p.Name}}', '{{$p.HTMLElement}}', '{{$p.HTMLInputType}}', '{{$p.Example}}');">+</button>
+                <button class="NewWorkflow-addSliceRowButton" title="Increment the slice length."
+                        type="button"
+                        data-ParamName="{{$p.Name}}"
+                        data-Element="{{$p.HTMLElement}}"
+                        data-InputType="{{$p.HTMLInputType}}"
+                        data-ParamExample="{{$p.Example}}">+</button>
               </div>
             </div>
           {{else}}