How to use the @bentley/imodeljs-frontend.IModelApp.makeHTMLElement function in @bentley/imodeljs-frontend

public async openMessageBox(_mbType: MessageBoxType, message: HTMLElement | string, _icon: MessageBoxIconType): Promise {
    const rootDiv = document.getElementById("root") as HTMLDivElement;
    if (!rootDiv)
      return MessageBoxValue.Cancel;

    // create a dialog element.
    const dialog = IModelApp.makeHTMLElement("dialog", { parent: rootDiv, className: "notification-messagebox" });

    // set up the message
    const span = IModelApp.makeHTMLElement("span", { parent: dialog, className: "notification-messageboxtext" });
    if (typeof message === "string")
      span.innerHTML = message;
    else
      span.appendChild(message);

    // make the ok button
    const button = IModelApp.makeHTMLElement("button", { parent: dialog, className: "notification-messageboxbutton" });
    button.innerHTML = "Ok";

    const promise = new Promise((resolve, _rej) => {
      button.addEventListener("click", () => {
        dialog.close();
        rootDiv.removeChild(dialog);
        resolve(MessageBoxValue.Ok);
      });
    });

public constructor(parent: HTMLElement, _vp: Viewport) {
    const settingsDiv = document.createElement("div");
    settingsDiv.style.display = "block";
    settingsDiv.style.textAlign = "left";

    createNestedMenu({
      label: "Tool Settings",
      parent,
      expand: ToolSettingsTracker._expandToolSettings,
      handler: (expanded) => ToolSettingsTracker._expandToolSettings = expanded,
      body: settingsDiv,
    });

    let div = IModelApp.makeHTMLElement("div", { parent: settingsDiv });
    createCheckBox({
      parent: div,
      name: "Preserve World Up When Rotating",
      id: "ts_preserveWorldUp",
      isChecked: ToolSettings.preserveWorldUp,
      handler: (_cb) => { ToolSettings.preserveWorldUp = !ToolSettings.preserveWorldUp; IModelApp.toolAdmin.exitViewTool(); },
    });
    div.style.textAlign = "left";

    // We use a static so the expand/collapse state persists after closing and reopening the drop-down.
    settingsDiv.style.display = ToolSettingsTracker._expandToolSettings ? "block" : "none";

    div = IModelApp.makeHTMLElement("div", { parent: settingsDiv });
    let label = IModelApp.makeHTMLElement("label", { innerText: "Animation Duration (ms): ", parent: div });
    label.style.display = "inline";
    label.htmlFor = "ts_animationTime";

constructor(vp: Viewport, parent: HTMLElement) {
    super();
    this._vp = vp;

    this._element = IModelApp.makeHTMLElement("div", { parent, className: "toolMenu" });
    this._realityModelListDiv = IModelApp.makeHTMLElement("div", { parent: this._element });
    this._modelListDiv = IModelApp.makeHTMLElement("div", { parent: this._element });
    this._propertiesDiv = IModelApp.makeHTMLElement("div", { parent: this._element });
    this._realityModelPickerMenu = createNestedMenu({
      label: "Reality Model Picker",
    });

    this._element.style.display = "block";
    this._element.style.cssFloat = "left";
    this._element.style.width = "max-content";
    this._element.style.minWidth = "350px";

    this._element.appendChild(this._realityModelPickerMenu.div);
  }

protected _showToolTip(el: HTMLElement, message: HTMLElement | string, pt?: XAndY, options?: ToolTipOptions): void {
    this.clearToolTip();

    if (undefined === pt) {
      const rect = el.getBoundingClientRect();
      pt = { x: rect.width / 2, y: rect.height / 2 };
    }

    const location = IModelApp.makeHTMLElement("div", { parent: el });
    const height = 20;
    const width = 20;
    location.style.position = "absolute";
    location.style.top = (pt.y - height / 2) + "px";
    location.style.left = (pt.x - width / 2) + "px";
    location.style.width = width + "px";
    location.style.height = height + "px";

    this._el = el;
    this._tooltipDiv = location;
    this._toolTip = new ToolTip(location, { trigger: "manual", html: true, placement: (options && options.placement) ? options.placement as any : "right-start", title: message });
    this._toolTip!.show();
  }
}

createComboBox({
      parent: this._element,
      id: "section_Type",
      name: "Clip type: ",
      value: this._toolName,
      handler: (select: HTMLSelectElement) => this._toolName = select.value,
      entries: [
        { name: "Plane", value: "ViewClip.ByPlane" },
        { name: "Range", value: "ViewClip.ByRange" },
        { name: "Element", value: "ViewClip.ByElement" },
        { name: "Shape", value: "ViewClip.ByShape" },
      ],
    });

    const div = IModelApp.makeHTMLElement("div", { parent: this._element });
    div.style.textAlign = "center";
    createButton({
      value: "Define",
      handler: () => { IModelApp.tools.run(this._toolName, ViewClipDecorationProvider.create()); setFocusToHome(); },
      parent: div,
      inline: true,
      tooltip: "Define clip",
    });
    createButton({
      value: "Edit",
      handler: () => ViewClipDecorationProvider.create().toggleDecoration(this._vp),
      parent: div,
      inline: true,
      tooltip: "Show clip edit handles",
    });
    createButton({

const toHtml = (msg: HTMLElement | string) => {
      return ("string" !== typeof msg) ? msg : IModelApp.makeHTMLElement("div", { innerText: msg });
    };

constructor(vp: Viewport, parent: HTMLElement) {
    super();
    this._vp = vp;

    this._element = IModelApp.makeHTMLElement("div", { parent, className: "toolMenu" });
    this._realityModelListDiv = IModelApp.makeHTMLElement("div", { parent: this._element });
    this._modelListDiv = IModelApp.makeHTMLElement("div", { parent: this._element });
    this._propertiesDiv = IModelApp.makeHTMLElement("div", { parent: this._element });
    this._realityModelPickerMenu = createNestedMenu({
      label: "Reality Model Picker",
    });

    this._element.style.display = "block";
    this._element.style.cssFloat = "left";
    this._element.style.width = "max-content";
    this._element.style.minWidth = "350px";

    this._element.appendChild(this._realityModelPickerMenu.div);
  }

public constructor(vp: ScreenViewport, parent: HTMLElement) {
    super();
    this._vp = vp;
    this._element = IModelApp.makeHTMLElement("div", { className: "toolMenu", parent });
    this._element.style.cssFloat = "left";
    this._element.style.display = "block";

    createComboBox({
      parent: this._element,
      id: "section_Type",
      name: "Clip type: ",
      value: this._toolName,
      handler: (select: HTMLSelectElement) => this._toolName = select.value,
      entries: [
        { name: "Plane", value: "ViewClip.ByPlane" },
        { name: "Range", value: "ViewClip.ByRange" },
        { name: "Element", value: "ViewClip.ByElement" },
        { name: "Shape", value: "ViewClip.ByShape" },
      ],
    });

label.style.display = "inline";
    label.htmlFor = "ts_walkCameraAngle";
    createNumericInput({
      parent: div,
      id: "ts_walkCameraAngle",
      display: "inline",
      min: 0,
      step: 0.1,
      value: ToolSettings.walkCameraAngle.degrees,
      handler: (value, _input) => { ToolSettings.walkCameraAngle.setDegrees(value); IModelApp.toolAdmin.exitViewTool(); },
      parseAsFloat: true,
    }, true);
    div.style.display = "block";
    div.style.textAlign = "left";

    div = IModelApp.makeHTMLElement("div", { parent: settingsDiv });
    label = IModelApp.makeHTMLElement("label", { innerText: "Walk Velocity (meters per second): ", parent: div });
    label.style.display = "inline";
    label.htmlFor = "ts_walkVelocity";
    createNumericInput({
      parent: div,
      id: "ts_walkVelocity",
      display: "inline",
      min: 0,
      step: 0.1,
      value: ToolSettings.walkVelocity,
      handler: (value, _input) => { ToolSettings.walkVelocity = value; IModelApp.toolAdmin.exitViewTool(); },
      parseAsFloat: true,
    }, true);
    div.style.display = "block";
    div.style.textAlign = "left";

label.style.display = "inline";
    label.htmlFor = "ts_animationTime";
    createNumericInput({
      parent: div,
      id: "ts_animationTime",
      display: "inline",
      min: 0,
      step: 1,
      value: ToolSettings.viewAnimate.time.normal.milliseconds,
      handler: (value, _input) => { ToolSettings.viewAnimate.time.normal = BeDuration.fromMilliseconds(value); IModelApp.toolAdmin.exitViewTool(); },
    });
    div.style.display = "block";
    div.style.textAlign = "left";

    div = IModelApp.makeHTMLElement("div", { parent: settingsDiv });
    label = IModelApp.makeHTMLElement("label", { innerText: "Pick Radius (inches): ", parent: div });
    label.style.display = "inline";
    label.htmlFor = "ts_viewToolPickRadiusInches";
    label.innerText = "Pick Radius (inches): ";
    createNumericInput({
      parent: div,
      id: "ts_viewToolPickRadiusInches",
      display: "inline",
      min: 0,
      step: 0.01,
      value: ToolSettings.viewToolPickRadiusInches,
      handler: (value, _input) => { ToolSettings.viewToolPickRadiusInches = value; IModelApp.toolAdmin.exitViewTool(); },
      parseAsFloat: true,
    }, true);
    div.style.display = "block";
    div.style.textAlign = "left";