From a4e1dad4ff45e2bb98f82844ae2997687bd8ed15 Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Fri, 3 Jul 2026 15:23:36 +0200
Subject: [PATCH] [IMP] runbot: lazy load build options dropdown menu

Rendering the build options dropdown menu for every build on page load
significantly increases the initial DOM size and payload.

This commit refactors the dropdown menu to render lazily on client
interaction (hover, focus, touch, or click):
- Introduces `build-options-dropdown`, a custom HTML element that
  captures build context via `data-*` attributes.
- Adds a lightweight client-side QWeb rendering engine (`templating.js`)
  capable of handling `t-foreach`, `t-if`, `t-else`, and `{{...}}`
  interpolations using Python expression evaluation (`py_js`).
- Moves the dropdown HTML structure into client-side `<template>` tags
  (`build-options-dropdown-menu`), generating the DOM nodes only when
  the user interacts with the build menu button.
---
 runbot/__manifest__.py                        |   6 +-
 runbot/static/src/js/elements/base_button.js  |  59 +++++++
 .../src/js/elements/build_options_dropdown.js |  51 ++++++
 runbot/static/src/js/templating.js            | 112 +++++++++++++
 runbot/templates/utils.xml                    | 150 +++++++++---------
 5 files changed, 303 insertions(+), 75 deletions(-)
 create mode 100644 runbot/static/src/js/elements/base_button.js
 create mode 100644 runbot/static/src/js/elements/build_options_dropdown.js
 create mode 100644 runbot/static/src/js/templating.js

diff --git a/runbot/__manifest__.py b/runbot/__manifest__.py
index b542a4086..51a6f0390 100644
--- a/runbot/__manifest__.py
+++ b/runbot/__manifest__.py
@@ -83,9 +83,13 @@
             'runbot/static/src/css/table_group.css',
             'runbot/static/src/css/runbot.css',
 
-            'runbot/static/src/js/polyfill_command_api.js',
+            'web/static/src/module_loader.js',
+            'web/static/src/core/py_js/*.js',
             'runbot/static/lib/jquery/jquery.js',
             'runbot/static/lib/bootstrap/js/bootstrap.bundle.js',
+            'runbot/static/src/js/polyfill_command_api.js',
+            'runbot/static/src/js/elements/*',
+            'runbot/static/src/js/templating.js',
             'runbot/static/src/js/table_filter.js',
             'runbot/static/src/js/table_group.js',
             'runbot/static/src/js/runbot.js',
diff --git a/runbot/static/src/js/elements/base_button.js b/runbot/static/src/js/elements/base_button.js
new file mode 100644
index 000000000..32a37af7e
--- /dev/null
+++ b/runbot/static/src/js/elements/base_button.js
@@ -0,0 +1,59 @@
+/**
+ * A lightweight base class for accessible custom buttons in the Light DOM.
+ * Automatically manages ARIA semantics, keyboard navigation (Enter/Space),
+ * and focus states without relying on Shadow DOM or native wrapper elements.
+ */
+export class BaseButton extends HTMLElement {
+    static get observedAttributes() {
+        return ["disabled"];
+    }
+
+    connectedCallback() {
+    // 1. Set semantic role and focusability directly on the host tag
+        if (!this.hasAttribute("role")) {
+            this.setAttribute("role", "button");
+        }
+        if (!this.hasAttribute("tabindex") && !this.hasAttribute("disabled")) {
+            this.setAttribute("tabindex", "0");
+        }
+
+        // 2. Attach keyboard and click listeners
+        this.addEventListener("keydown", this._onKeyDown);
+        this.addEventListener("click", this._onClick);
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener("keydown", this._onKeyDown);
+        this.removeEventListener("click", this._onClick);
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "disabled") {
+            const isDisabled = newValue !== null;
+            this.setAttribute("aria-disabled", isDisabled ? "true" : "false");
+            if (isDisabled) {
+                this.removeAttribute("tabindex");
+            } else {
+                this.setAttribute("tabindex", "0");
+            }
+        }
+    }
+
+    _onKeyDown(event) {
+        if (this.hasAttribute("disabled")) {
+            return;
+        }
+        // Handle Space and Enter for keyboard accessibility
+        if (event.key === " " || event.key === "Enter") {
+            event.preventDefault();
+            this.click();
+        }
+    }
+
+    _onClick(event) {
+        if (this.hasAttribute("disabled")) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+        }
+    }
+}
diff --git a/runbot/static/src/js/elements/build_options_dropdown.js b/runbot/static/src/js/elements/build_options_dropdown.js
new file mode 100644
index 000000000..de66e4853
--- /dev/null
+++ b/runbot/static/src/js/elements/build_options_dropdown.js
@@ -0,0 +1,51 @@
+import { render } from "../templating";
+import { BaseButton } from "./base_button";
+
+const lazyInteractionEvents = ["mouseenter", "focus", "touchstart", "click"];
+
+function extractDataset(el) {
+    const dataset = {};
+    for (const { name } of [...el.attributes]) {
+        if (name.startsWith("data-")) {
+            const rawValue = el.getAttribute(name);
+            let value;
+            try {
+                value = JSON.parse(rawValue);
+            } catch {
+                value = rawValue;
+            }
+            dataset[name.slice(5)] = value;
+        }
+    }
+    return dataset;
+}
+
+class BuildOptionsDropdown extends BaseButton {
+    constructor() {
+        super();
+        this.template = document.getElementById("build-options-dropdown-menu");
+        this.data = extractDataset(this);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add("dropdown-toggle");
+        this.setAttribute("data-bs-toggle", "dropdown");
+        this.setAttribute("aria-expanded", "false");
+        const lazyBuildMenuHandler = () => {
+            if (this.nextElementSibling?.classList.contains("dropdown-menu")) {
+                return;
+            }
+            const renderedMenu = render(this.template.content.cloneNode(true), this.data);
+            this.after(renderedMenu);
+            for (const eventType of lazyInteractionEvents) {
+                this.removeEventListener(eventType, lazyBuildMenuHandler);
+            }
+        } ;
+        for (const eventType of lazyInteractionEvents) {
+            this.addEventListener(eventType, lazyBuildMenuHandler, { once: true });
+        }
+    }
+}
+
+customElements.define("build-options-dropdown", BuildOptionsDropdown);
diff --git a/runbot/static/src/js/templating.js b/runbot/static/src/js/templating.js
new file mode 100644
index 000000000..ed99a9f4c
--- /dev/null
+++ b/runbot/static/src/js/templating.js
@@ -0,0 +1,112 @@
+import { evaluateExpr } from "@web/core/py_js/py";
+
+/**
+ * Client-side lightweight QWeb rendering engine.
+ * @param {DocumentFragment|HTMLElement} rootNode - The template fragment or element to render.
+ * @param {Object} context - The data context (parsed from the element's dataset).
+ * @returns {DocumentFragment|HTMLElement} The rendered DOM node.
+ */
+export function render(rootNode, context) {
+    // --- LOOPS (t-foreach / t-as) ---
+    // Loops must be processed first so that individual nodes exist before evaluating their conditions.
+    for (const loopEl of [...rootNode.querySelectorAll("[t-foreach]")]) {
+        const arrayExpr = loopEl.getAttribute("t-foreach");
+        const itemKey = loopEl.getAttribute("t-as") || "item";
+
+        // Evaluate the expression via py_js to retrieve the target array
+        const arrayData = evaluateExpr(arrayExpr, context);
+
+        if (Array.isArray(arrayData)) {
+            for (const [index, subItem] of arrayData.entries()) {
+                const liClone = loopEl.cloneNode(true);
+                liClone.removeAttribute("t-foreach");
+                liClone.removeAttribute("t-as");
+
+                // Create a sub-context for the current iteration (inherits parent context + loop variable + index)
+                const loopContext = {
+                    ...context,
+                    [itemKey]: subItem,
+                    [`${itemKey}_index`]: index,
+                };
+
+                // Recursive call to render conditions and bindings inside this specific looped node
+                render(liClone, loopContext);
+
+                loopEl.parentNode.insertBefore(liClone, loopEl);
+            }
+        }
+
+        // Remove the original template node that served as the blueprint
+        loopEl.remove();
+    }
+
+    // --- CONDITIONS (t-if / t-else) ---
+    for (const ifEl of [...rootNode.querySelectorAll("[t-if]")]) {
+        const expression = ifEl.getAttribute("t-if");
+        const conditionMet = evaluateExpr(expression, context);
+
+        // Check if the immediately following sibling is an "else" block
+        const nextEl = ifEl.nextElementSibling;
+        const hasElse = nextEl && nextEl.hasAttribute("t-else");
+
+        if (conditionMet) {
+            ifEl.removeAttribute("t-if");
+            if (hasElse) {
+                nextEl.remove();
+            } // IF is true -> destroy the adjacent ELSE block
+        } else {
+            if (hasElse) {
+                nextEl.removeAttribute("t-else"); // IF is false -> keep the ELSE block (and clean up its attribute)
+            }
+            ifEl.remove(); // Destroy the IF block
+        }
+    }
+
+    // Remove any orphaned t-else blocks
+    for (const el of [...rootNode.querySelectorAll("[t-else]")]) {
+        el.remove();
+    }
+
+    // --- INTERPOLATION {{expression}} ---
+
+    /**
+     * Helper function to replace all {{...}} expressions within a string.
+     * @param {string} str - The string to interpolate.
+     * @returns {string}
+     */
+    const interpolate = (str) => {
+        if (!str || !str.includes("{{")) {
+            return str;
+        }
+        return str.replace(/\{\{\s*(.+?)\s*\}\}/g, (_, expr) => {
+            const val = evaluateExpr(expr, context);
+            return val !== undefined && val !== null ? val : "";
+        });
+    };
+
+    // Attribute interpolation (e.g., href="{{item.url}}", class="btn {{item.class}}", data-val="{{item.id}}")
+    // We collect the root node and all descendants to check every tag's attributes
+    const elements = [rootNode, ...rootNode.querySelectorAll("*")];
+    for (const el of elements) {
+        if (!el.attributes) {
+            continue;
+        }
+        for (const attr of [...el.attributes]) {
+            if (attr.value.includes("{{")) {
+                el.setAttribute(attr.name, interpolate(attr.value));
+            }
+        }
+    }
+
+    // Text node and tag content interpolation (e.g., <span>Hello {{item.title}}</span> or <div>{{item.desc}}</div>)
+    // The TreeWalker naturally visits every text node embedded inside any tag structure
+    const walker = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT, null, false);
+    let textNode;
+    while ((textNode = walker.nextNode())) {
+        if (textNode.nodeValue.includes("{{")) {
+            textNode.nodeValue = interpolate(textNode.nodeValue);
+        }
+    }
+
+    return rootNode;
+}
diff --git a/runbot/templates/utils.xml b/runbot/templates/utils.xml
index 97a52feaa..5105cbb5e 100644
--- a/runbot/templates/utils.xml
+++ b/runbot/templates/utils.xml
@@ -219,6 +219,7 @@
                             </form>
                         </div>
                     </dialog>
+                    <t t-call="runbot.build_menu"/>
                     <t t-out="0"/>
                 </body>
             </xpath>
@@ -295,7 +296,7 @@
                 <a t-if="slot.trigger_id.report_view_id" title="View last trigger report" t-attf-href="/runbot/trigger/report/{{slot.trigger_id.id}}" class="fa fa-eye btn btn-info"/>
                 <a t-if="bu.local_state == 'running' and bu.database_ids" t-attf-href="/runbot/run/{{bu.id}}" class="fa fa-sign-in btn btn-info"/>
                 <a t-if="bu.static_run" t-att-href="bu.static_run" class="fa fa-sign-in btn btn-info"/>
-                <t t-if="bu" t-call="runbot.build_menu"/>
+                <t t-if="bu" t-call="runbot.build_menu_button"/>
                 <a t-if="not bu" groups="base.group_user" class="btn btn-default" title="Create build" t-attf-href="/runbot/batch/slot/{{slot.id}}/build">
                     <t t-set="required_triggers" t-value="slot.trigger_id.starts_after_ids"/>
                     <t t-if="required_triggers">
@@ -328,7 +329,7 @@
                         <i class="fa fa-file-text-o"/>
                     </a>
                     <!--<a t-if="show_commit_button" t-attf-href="https://#{repo.base_url}/commit/#{bu['name']}" class="btn btn-default" title="Open commit on GitHub" aria-label="Open commit on GitHub"><i class="fa fa-github"/></a>-->
-                    <t t-call="runbot.build_menu"/>
+                    <t t-call="runbot.build_menu_button"/>
                 </div>
             </div>
         </template>
@@ -356,83 +357,84 @@
         </template>
 
         <template id="runbot.build_menu">
-            <button t-attf-class="btn {{'btn-default' if bu.global_state not in ('waiting', 'pending', 'testing') else 'btn-info'}} dropdown-toggle" data-bs-toggle="dropdown" title="Build options" aria-label="Build options" aria-expanded="false">
-                <i t-attf-class="fa  {{'fa-spinner' if bu.global_state == 'pending' else 'fa-cog'}} fa-fw"/>
-                <span class="caret"/>
-            </button>
-            <div class="dropdown-menu dropdown-menu-end" role="menu">
-                <a t-if="bu.global_result=='skipped'" groups="runbot.group_runbot_admin" class="dropdown-item" href="#" data-runbot="rebuild" t-att-data-runbot-build="bu['id']">
-                    <i class="fa fa-level-up"/>
-                    Force Build
-                </a>
-                <t t-if="bu.local_state=='running'">
-                    <t t-foreach="bu.database_ids.sorted('name')" t-as="db">
-                        <a t-if="db != bu.database_ids[0]" class="dropdown-item" t-attf-href="/runbot/run/{{bu.id}}/{{db.db_suffix}}">
-                            <i class="fa fa-sign-in"/>
-                            Connect <t t-out="db.db_suffix"></t>
-                        </a>
-                    </t>
-                    <a class="dropdown-item" t-attf-href="http://{{bu.domain}}/web/database/selector">
-                        <i class="fa fa-sign-in"/>
+            <template id="build-options-dropdown-menu">
+                <div class="dropdown-menu dropdown-menu-end" role="menu">
+                    <button groups="runbot.group_runbot_admin" t-attf-t-if="global_result=='skipped'" class="dropdown-item" type="button" data-runbot="rebuild" data-runbot-build="{{id}}">
+                        <i class="fa fa-fw fa-level-up"/>
+                        Force Build
+                    </button>
+                    <a t-attf-t-if="local_state=='running'" t-attf-t-foreach="databases" t-attf-t-as="db_suffix" class="dropdown-item" href="/runbot/run/{{id}}/{{db_suffix}}">
+                        <i class="fa fa-fw fa-sign-in"/>
+                        Connect {{db_suffix}}
+                    </a>
+                    <a t-attf-t-if="local_state=='running'" class="dropdown-item" href="http://{{domain}}/web/database/selector">
+                        <i class="fa fa-fw fa-sign-in"/>
                         Database selector
                     </a>
-                </t>
-                <a class="dropdown-item" t-if="bu.global_state in ['done','running'] or bu.to_kill" groups="base.group_user" href="#" data-runbot="rebuild" t-att-data-runbot-build="bu['id']" title="Retry this build, usefull for false positive">
-                    <i class="fa fa-refresh"/>
-                    Rebuild
-                </a>
-                <t t-if="bu.global_state != 'done'">
-                    <t t-if="not bu.to_kill">
-                        <a groups="base.group_user" href="#" data-runbot="kill" class="dropdown-item" t-att-data-runbot-build="bu['id']">
-                            <i class="fa fa-crosshairs"/>
-                            Kill
-                        </a>
-                    </t>
-                    <t t-else="">
-                        <a groups="base.group_user" class="dropdown-item disabled">
-                            <i class="fa fa-spinner fa-spin"/>
-                            Killing
-                            <i class="fa fa-crosshairs"/>
-                        </a>
-                    </t>
-                </t>
-                <t t-if="bu.global_state == 'done'">
-                    <t t-if="bu.requested_action != 'wake_up' and bu.database_ids">
-                        <a groups="base.group_user" class="dropdown-item" href="#" data-runbot="wakeup" t-att-data-runbot-build="bu['id']">
-                            <i class="fa fa-coffee"/>
-                            Wake up
+                    <button groups="base.group_user" t-attf-t-if="global_state in ['done','running'] or to_kill" class="dropdown-item" type="button" data-runbot="rebuild" data-runbot-build="{{id}}" title="Retry this build, usefull for false positive">
+                        <i class="fa fa-fw fa-refresh"/>
+                        Rebuild
+                    </button>
+                    <button t-attf-t-if="global_state != 'done' and not to_kill" groups="base.group_user" type="button" data-runbot="kill" class="dropdown-item" data-runbot-build="{{id}}">
+                        <i class="fa fa-fw fa-crosshairs"/>
+                        Kill
+                    </button>
+                    <span t-attf-t-if="global_state != 'done' and to_kill" groups="base.group_user" class="dropdown-item disabled">
+                        <i class="fa fa-fw fa-crosshairs"/>
+                        Killing
+                        <i class="fa fa-spinner fa-spin"/>
+                    </span>
+                    <button t-attf-t-if="global_state == 'done' and requested_action != 'wake_up' and databases" groups="base.group_user" class="dropdown-item" type="button" data-runbot="wakeup" data-runbot-build="{{id}}">
+                        <i class="fa fa-fw fa-coffee"/>
+                        Wake up
+                    </button>
+                    <span t-attf-t-if="global_state == 'done' and requested_action == 'wake_up'" groups="base.group_user" class="dropdown-item disabled">
+                        <i class="fa fa-fw fa-coffee"/>
+                        Waking up
+                        <i class="fa fa-spinner fa-spin"/>
+                    </span>
+                    <div t-attf-t-if="host and log_list[0]" groups="base.group_user" class="dropdown-divider"/>
+                    <a t-attf-t-if="host" t-attf-t-foreach="log_list" t-attf-t-as="log_name" class="dropdown-item" href="{{log_url}}/runbot/static/build/#{dest}/logs/#{log_name}.txt">
+                        <i class="fa fa-fw fa-file-text-o"/>
+                        Full {{log_name}} logs
+                    </a>
+                    <t groups="runbot.group_runbot_advanced_user">
+                        <div class="dropdown-divider"/>
+                        <a class="dropdown-item" href="/runbot/build/search?config_id={{config_id}}&amp;trigger_id={{trigger_id}}&amp;version_id={{version_id}}&amp;create_batch_id.bundle_id={{bundle_id}}&amp;description={{description}}">
+                            <i class="fa fa-fw fa-search"/>
+                            Find similar builds
                         </a>
-                    </t>
-                    <t t-if="bu.requested_action == 'wake_up'">
-                        <a groups="base.group_user" class="dropdown-item disabled">
-                            <i class="fa fa-spinner fa-spin"/>
-                            Waking up
-                            <i class="fa fa-crosshairs"/>
+                        <a class="dropdown-item" href="/odoo/build/{{id}}">
+                            <i class="fa fa-fw fa-list"/>
+                            View in backend
                         </a>
                     </t>
-                </t>
-                <div t-if="bu.global_state not in ('testing', 'waiting', 'pending')" groups="base.group_user" class="dropdown-divider"/>
-                <t t-set="log_url" t-value="'http://%s' % bu.host if bu.host != fqdn else ''"/>
-                <t t-if="bu.host" t-foreach="bu.log_list.split(',') if bu.log_list else []" t-as="log_name">
-                    <a class="dropdown-item" t-attf-href="{{log_url}}/runbot/static/build/#{bu.dest}/logs/#{log_name}.txt">
-                        <i class="fa fa-file-text-o"/>
-                        Full
-                        <t t-out="log_name"/>
-                        logs
-                    </a>
-                </t>
-                <t groups="runbot.group_runbot_advanced_user">
-                    <div class="dropdown-divider"/>
-                    <a class="dropdown-item" t-attf-href="/runbot/build/search?config_id={{bu.config_id.id}}&amp;trigger_id={{bu.trigger_id.id}}&amp;version_id={{bu.version_id.id}}&amp;create_batch_id.bundle_id={{bu.create_batch_id.bundle_id.id}}&amp;description={{bu.description or ''}}">
-                        <i class="fa fa-search"/>
-                        Find similar builds
-                    </a>
-                    <a class="dropdown-item" t-attf-href="/odoo/build/{{bu['id']}}">
-                        <i class="fa fa-list"/>
-                        View in backend
-                    </a>
-                </t>
-            </div>
+                </div>
+            </template>
+        </template>
+
+        <template id="runbot.build_menu_button">
+            <build-options-dropdown t-attf-class="btn {{'btn-default' if bu.global_state not in ('waiting', 'pending', 'testing') else 'btn-info'}}" title="Build options" aria-label="Build options"
+                t-att-data-id="bu.id"
+                t-att-data-global_result="bu.global_result"
+                t-att-data-global_state="bu.global_state"
+                t-att-data-local_state="bu.local_state"
+                t-att-data-databases="json.dumps([b.db_suffix for b in bu.database_ids.sorted('name')])"
+                t-att-data-domain="bu.domain"
+                t-att-data-to_kill="bu.to_kill or 'false'"
+                t-att-data-requested_action="bu.requested_action or ''"
+                t-att-data-dest="bu.dest"
+                t-att-data-config_id="bu.config_id.id"
+                t-att-data-trigger_id="bu.trigger_id.id"
+                t-att-data-version_id="bu.version_id.id"
+                t-att-data-bundle_id="bu.create_batch_id.bundle_id.id"
+                t-att-data-description="bu.description or ''"
+                t-att-data-log_list="json.dumps(bu.log_list.split(',') if bu.log_list else [])"
+                t-att-data-host="bu.host"
+                t-att-data-log_url="'http://%s' % host if host != fqdn else ''"
+            >
+                <i t-attf-class="fa {{'fa-spinner' if bu.global_state == 'pending' else 'fa-cog'}} fa-fw"/>
+            </build-options-dropdown>
         </template>
 
         <template id="runbot.branch_github_menu">