scan x-extension on DOMContentLoaded; extension-friendly CSS
Alessandro committed
Mar 13, 2026 at 10:23 UTC
70cbf6fb9d71987035ffe30673c7dc230f927a55
4 files changed
+24
-2
webui/components/chat/input/chat-bar.html
+1
-1
@@ -35,7 +35,7 @@
35
display: flex;
36
flex-direction: column;
37
gap: var(--spacing-xs);
38
- padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 0.8rem;
38
+ padding: var(--spacing-xxs) var(--spacing-md) var(--spacing-sm) 0.8rem;
39
align-items: start;
40
place-items: normal;
41
flex-shrink: 0;
webui/components/chat/input/progress.html
+1
-1
@@ -37,7 +37,7 @@
37
38
39
<style>
40
- #progress-bar-box { background-color: var(--color-panel); padding: var(--spacing-sm) var(--spacing-md); padding-bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; z-index: 1001; gap: var(--spacing-sm); }
40
+ #progress-bar-box { background-color: var(--color-panel); padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs) var(--spacing-md); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; z-index: 1001; gap: var(--spacing-sm); }
41
#progress-bar-box > x-extension { display: contents; }
42
#progress-bar-box h4 { margin: 0 1.2em 0 0; }
43
#progress-bar-h { color: var(--color-primary); display: flex; align-items: left; justify-content: flex-start; height: 1.2em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: normal; }
webui/index.css
+13
@@ -139,6 +139,19 @@ body {
139
-webkit-overscroll-behavior: none;
140
}
141
142
+x-extension:not(:empty) {
143
+ display: contents;
144
+}
145
+
146
+x-extension:empty {
147
+ display: none;
148
+}
149
+
150
+x-extension > x-component,
151
+x-extension > x-component > div[x-data] {
152
+ display: contents;
153
+}
154
+
155
p:last-child {
156
margin-bottom: 0;
157
}
webui/js/extensions.js
+9
@@ -215,3 +215,12 @@ const extensionObserverCallback = (mutations) => {
215
/** @type {MutationObserver} */
216
const extensionObserver = new MutationObserver(extensionObserverCallback);
217
extensionObserver.observe(document.body, { childList: true, subtree: true });
218
+
219
+// Do an initial scan for static x-extension tags
220
+// that already exist in the DOM (index.html), then rely on
221
+// the observer for dynamically inserted nodes coming from components.
222
+if (document.readyState === "loading") {
223
+ document.addEventListener("DOMContentLoaded", () => loadHtmlExtensions());
224
+} else {
225
+ loadHtmlExtensions();
226
+}