refactor(ui): Move expando construction

packages/userscript/source/ui/EngineSettingsUi.ts

@@ -2,6 +2,7 @@ import { EngineSettings } from "../options/EngineSettings";
 import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
+import { SettingsPanelUi } from "./SettingsPanelUi";
 import { SettingsSectionUi } from "./SettingsSectionUi";
 
 export class EngineSettingsUi extends SettingsSectionUi {
@@ -44,7 +45,7 @@ export class EngineSettingsUi extends SettingsSectionUi {
       }
     });
 
-    const toggleOptionsVisiblity = this._getItemsToggle(toggleName);
+    const toggleOptionsVisiblity = SettingsPanelUi.makeItemsToggle(this._host, toggleName);
     element.append(toggleOptionsVisiblity);
 
     this.element = element;

packages/userscript/source/ui/SettingsPanelUi.ts

@@ -29,12 +29,9 @@ export class SettingsPanelUi {
     });
 
     // The expando button for this panel.
-    const itemsElement = $("<div/>", {
-      id: `toggle-items-${id}`,
-      title: host.engine.i18n("ui.itemsShow"),
-    })
-      .addClass("ks-expando-button")
-      .text(initiallyExpanded ? "-" : "+");
+    const itemsElement = SettingsPanelUi.makeItemsToggle(host, id).text(
+      initiallyExpanded ? "-" : "+"
+    );
     panelElement.append(itemsElement);
 
     let itemsExpanded = initiallyExpanded;
@@ -55,4 +52,20 @@ export class SettingsPanelUi {
 
     return panelElement;
   }
+
+  /**
+   * Constructs an expando element that is commonly used to expand and
+   * collapses a section of the UI.
+   *
+   * @param host A reference to the host.
+   * @param id The ID of the section this is the expando for.
+   * @returns The constructed expando element.
+   */
+  static makeItemsToggle(host: UserScript, id: string): JQuery<HTMLElement> {
+    return $("<div/>", {
+      id: `toggle-items-${id}`,
+      title: host.engine.i18n("ui.itemsShow"),
+      text: "+",
+    }).addClass("ks-expando-button");
+  }
 }

packages/userscript/source/ui/SettingsSectionUi.ts

@@ -27,22 +27,6 @@ export abstract class SettingsSectionUi {
 
   abstract refreshUi(): void;
 
-  /**
-   * Constructs an expando element that is commonly used to expand and
-   * collapses a section of the UI.
-   *
-   * @param id The ID of the section this is the expando for.
-   * @returns The constructed expando element.
-   */
-  protected _getItemsToggle(id: string): JQuery<HTMLElement> {
-    return $("<div/>", {
-      id: `toggle-items-${id}`,
-      title: this._host.engine.i18n("ui.itemsShow"),
-    })
-      .addClass("ks-expando-button")
-      .text("+");
-  }
-
   /**
    * Creates a new button to control a trigger value in a configuration section.
    *