-Old PR: Fix UI regression of asciinema player https://github.com/go-gitea/gitea/pull/26159 */
-.ap-term {
- overflow: hidden !important;
-}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 79d1b12692..d433cd6fb4 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -210,10 +210,6 @@ td .commit-summary {
overflow: auto;
}
-.non-diff-file-content .asciicast {
- padding: 0 !important;
-}
-
.repo-editor-header {
/* it should match ".repo-button-row" so the tree toggle button stays aligned */
margin: 8px 0;
@@ -1867,11 +1863,11 @@ tbody.commit-list {
}
.username-display {
- max-width: 100%; /* the inner part might have "gt-ellipsis" */
- min-width: 0; /* if it is the top flex container, "max-width" works; but if it is inside another flex container, the parent needs to handle the x-axis and here also needs "min-width" */
display: inline-flex;
gap: var(--gap-inline);
align-items: center;
+ max-width: 100%; /* min/max widths are for "gt-ellipsis", see the comment of other "flex-xxx" family classes */
+ min-width: 0;
}
.username-display > .username-fullname {
diff --git a/web_src/fomantic/build/components/dropdown.js b/web_src/fomantic/build/components/dropdown.js
index 0faed1858c..f971fecda4 100644
--- a/web_src/fomantic/build/components/dropdown.js
+++ b/web_src/fomantic/build/components/dropdown.js
@@ -1953,8 +1953,8 @@ $.fn.dropdown = function(parameters) {
$choice.find(selector.menu).remove();
$choice.find(selector.menuIcon).remove();
}
- return ($choice.data(metadata.text) !== undefined)
- ? $choice.data(metadata.text)
+ return ($choice.attr('data-' + metadata.text) !== undefined) // GITEA-PATCH: use "attr" but not "data", don't decode JSON like "false"
+ ? $choice.attr('data-' + metadata.text)
: (preserveHTML)
? $choice.html().trim()
: $choice.text().trim()
@@ -2007,8 +2007,8 @@ $.fn.dropdown = function(parameters) {
value = ( $option.attr('value') !== undefined )
? $option.attr('value')
: name,
- text = ( $option.data(metadata.text) !== undefined )
- ? $option.data(metadata.text)
+ text = ( $option.attr('data-' + metadata.text) !== undefined ) // GITEA-PATCH: use "attr" but not "data", don't decode JSON like "false"
+ ? $option.attr('data-' + metadata.text)
: name,
group = $option.parent('optgroup')
;
diff --git a/web_src/js/external-render-frontend.ts b/web_src/js/external-render-frontend.ts
index 9d969bcf90..e7e3f4f1be 100644
--- a/web_src/js/external-render-frontend.ts
+++ b/web_src/js/external-render-frontend.ts
@@ -8,6 +8,7 @@ type LazyLoadFunc = () => Promise<{frontendRender: FrontendRenderFunc}>;
const frontendPlugins: Record = {
'viewer-3d': () => import('./render/plugins/frontend-viewer-3d.ts'),
'openapi-swagger': () => import('./render/plugins/frontend-openapi-swagger.ts'),
+ 'asciicast': () => import('./render/plugins/frontend-asciicast.ts'),
};
class Options implements FrontendRenderOptions {
@@ -44,23 +45,28 @@ async function initFrontendExternalRender() {
const viewerContainer = document.querySelector('#frontend-render-viewer')!;
const renderNames = viewerContainer.getAttribute('data-frontend-renders')!.split(' ');
const fileTreePath = viewerContainer.getAttribute('data-file-tree-path')!;
+ viewerContainer.setAttribute('data-window-origin', window.origin); // mainly for testing purpose
const fileDataElem = document.querySelector('#frontend-render-data')!;
fileDataElem.remove();
const fileDataContent = fileDataElem.value;
const fileDataEncoding = fileDataElem.getAttribute('data-content-encoding')!;
const opts = new Options(viewerContainer, fileTreePath, fileDataEncoding, fileDataContent);
-
- let found = false;
+ let renderName = '', rendered = false;
for (const name of renderNames) {
if (!(name in frontendPlugins)) continue;
const plugin = await frontendPlugins[name]();
- found = true;
- if (await plugin.frontendRender(opts)) break;
+ renderName = name;
+ rendered = await plugin.frontendRender(opts);
+ if (rendered) break;
}
- if (!found) {
+ if (!renderName) {
viewerContainer.textContent = 'No frontend render plugin found for this file, but backend declares that there must be one, there must be a bug';
+ } else if (!rendered) {
+ viewerContainer.textContent = `Failed to render by ${renderName}`;
+ } else {
+ viewerContainer.setAttribute('data-frontend-render-name', renderName); // succeeded render, mainly for testing purpose
}
}
diff --git a/web_src/js/external-render-helper.test.ts b/web_src/js/external-render-helper.test.ts
index 452d7f8f2d..3bb524a011 100644
--- a/web_src/js/external-render-helper.test.ts
+++ b/web_src/js/external-render-helper.test.ts
@@ -1,7 +1,7 @@
import './external-render-helper.ts';
test('isValidCssColor', async () => {
- const isValidCssColor = window.testModules.externalRenderHelper!.isValidCssColor;
+ const isValidCssColor = window.giteaExternalRenderHelper!.isValidCssColor;
expect(isValidCssColor(null)).toBe(false);
expect(isValidCssColor('')).toBe(false);
diff --git a/web_src/js/external-render-helper.ts b/web_src/js/external-render-helper.ts
index f92aeb9c6c..8a5122fe99 100644
--- a/web_src/js/external-render-helper.ts
+++ b/web_src/js/external-render-helper.ts
@@ -50,12 +50,12 @@ body { background: ${backgroundColor}; }
}
const iframeId = queryParams.get('gitea-iframe-id');
-if (iframeId) {
- // iframe is in different origin, so we need to use postMessage to communicate
- const postIframeMsg = (cmd: string, data: Record = {}) => {
- window.parent.postMessage({giteaIframeCmd: cmd, giteaIframeId: iframeId, ...data}, '*');
- };
+// iframe is in different origin, so we need to use postMessage to communicate
+const postIframeMsg = (cmd: string, data: Record = {}) => {
+ window.parent.postMessage({giteaIframeCmd: cmd, giteaIframeId: iframeId, ...data}, '*');
+};
+if (iframeId) {
const updateIframeHeight = () => {
if (!document.body) return; // the body might not be available when this function is called
// Use scrollHeight to get the full content height, even when CSS sets html/body to height:100%
@@ -90,6 +90,4 @@ if (iframeId) {
});
}
-if (window.testModules) {
- window.testModules.externalRenderHelper = {isValidCssColor};
-}
+window.giteaExternalRenderHelper = {isValidCssColor, queryParams, postIframeMsg};
diff --git a/web_src/js/globals.d.ts b/web_src/js/globals.d.ts
index 5398d407d1..6579bb2203 100644
--- a/web_src/js/globals.d.ts
+++ b/web_src/js/globals.d.ts
@@ -68,13 +68,13 @@ interface Window {
turnstile: any,
hcaptcha: any,
- // Make IIFE private functions can be tested in unit tests, without exposing the IIFE module to global scope.
+ // Make IIFE private functions can be managed by us in our scope, without exposing the IIFE module to global scope.
// Otherwise, when using "export" in IIFE code, the compiled JS will inject global "var externalRenderHelper = ..."
// which is not expected and may cause conflicts with other modules.
- testModules: {
- externalRenderHelper?: {
- isValidCssColor(s: string | null): boolean,
- }
+ giteaExternalRenderHelper?: {
+ isValidCssColor(s: string | null): boolean,
+ queryParams: URLSearchParams,
+ postIframeMsg(cmd: string, data: Record = {}),
}
// do not add more properties here unless it is a must
diff --git a/web_src/js/markup/asciicast.ts b/web_src/js/markup/asciicast.ts
deleted file mode 100644
index 90515e1363..0000000000
--- a/web_src/js/markup/asciicast.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {queryElems} from '../utils/dom.ts';
-
-export async function initMarkupRenderAsciicast(elMarkup: HTMLElement): Promise {
- queryElems(elMarkup, '.asciinema-player-container', async (el) => {
- const [player] = await Promise.all([
- import('asciinema-player'),
- import('asciinema-player/dist/bundle/asciinema-player.css'),
- ]);
-
- player.create(el.getAttribute('data-asciinema-player-src')!, el, {
- // poster (a preview frame) to display until the playback is started.
- // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more.
- poster: 'npt:1:0:0',
- });
- });
-}
diff --git a/web_src/js/markup/content.ts b/web_src/js/markup/content.ts
index 44c005a7c8..09dee98754 100644
--- a/web_src/js/markup/content.ts
+++ b/web_src/js/markup/content.ts
@@ -1,7 +1,6 @@
import {initMarkupCodeMermaid} from './mermaid.ts';
import {initMarkupCodeMath} from './math.ts';
import {initMarkupCodeCopy} from './codecopy.ts';
-import {initMarkupRenderAsciicast} from './asciicast.ts';
import {initMarkupTasklist} from './tasklist.ts';
import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
import {initExternalRenderIframe} from './render-iframe.ts';
@@ -24,6 +23,5 @@ export function initMarkupContent(): void {
initMarkupTasklist(el);
initMarkupCodeMermaid(el);
initMarkupCodeMath(el);
- initMarkupRenderAsciicast(el);
});
}
diff --git a/web_src/js/markup/render-iframe.ts b/web_src/js/markup/render-iframe.ts
index f05523943a..6a191ac5c6 100644
--- a/web_src/js/markup/render-iframe.ts
+++ b/web_src/js/markup/render-iframe.ts
@@ -1,7 +1,6 @@
import {generateElemId} from '../utils/dom.ts';
import {errorMessage} from '../modules/errors.ts';
import {isDarkTheme} from '../utils.ts';
-import {GET} from '../modules/fetch.ts';
function safeRenderIframeLink(link: any): string | null {
try {
@@ -65,9 +64,31 @@ export async function initExternalRenderIframe(iframe: HTMLIFrameElement) {
u.searchParams.set('gitea-iframe-id', iframe.id);
u.searchParams.set('gitea-iframe-bgcolor', getRealBackgroundColor(iframe));
- // It must use "srcdoc" here, because our backend always sends CSP sandbox directive for the rendered content
- // (to protect from XSS risks), so we can't use "src" to load the content directly, otherwise there will be console errors like:
- // Unsafe attempt to load URL http://localhost:3000/test from frame with URL http://localhost:3000/test
- const resp = await GET(u.href);
- iframe.srcdoc = await resp.text();
+ // There are 3 kinds of external render modes:
+ // * external frontend render:
+ // * parent page creates iframe, iframe navigates to render page
+ // * render generates frame page with external-render-helper (injected), external-render-frontend and file content (hidden textarea)
+ // * frame page executes external-render-frontend JS code to finds a frontend plugin to render
+ // * external backend render (HTML)
+ // * parent page creates iframe, iframe navigates to render page
+ // * render executes command to generate rendered HTML content with external-render-helper (injected)
+ // * frame page displays the rendered content
+ // * external backend render (non-HTML, e.g.: PDF, image)
+ // * parent page creates iframe, iframe navigates to render page
+ // * render executes command to generate rendered content
+ // * response header is automatically detected from rendered content
+
+ // It must use "src" here, because the frame content should not inherit parent's CSP.
+ // Otherwise, "srcdoc" makes the frame content inherit the parent's CSP,
+ // then some renders like "asciicast (asciinema)" which require "unsafe-eval" won't work.
+ //
+ // When using "src", Chrome can report false-alarm error like:
+ // * Unsafe attempt to load URL http://localhost/owner/repo/render/branch/main/file from frame with URL http://localhost/owner/repo/render/branch/main/file. Domains, protocols and ports must match.
+ // (only for the first time that the developer opens the browser console)
+ // Such error log can also appear even if you access the link "http://.../owner/repo/render/branch/main/file" directly.
+ // Everything just works, it is just a false-alarm caused by Chrome's Developer Tools, so such error log can be ignored.
+ //
+ // Another reason for why "src" is a must: if the render outputs non-HTML contents like PDF or image,
+ // Only "src" can correctly load and display the rendered content, "srcdoc" won't work.
+ iframe.src = u.href;
}
diff --git a/web_src/js/modules/fomantic/dropdown.test.ts b/web_src/js/modules/fomantic/dropdown.test.ts
index 542cb854b8..4ea51b3d2c 100644
--- a/web_src/js/modules/fomantic/dropdown.test.ts
+++ b/web_src/js/modules/fomantic/dropdown.test.ts
@@ -1,6 +1,23 @@
+import '../../../fomantic/build/fomantic.js';
import {createElementFromHTML} from '../../utils/dom.ts';
import {hideScopedEmptyDividers} from './dropdown.ts';
+test('dropdown-item-literal-text', () => {
+ // a "choice" workflow_dispatch input can offer the string "false" as an option.
+ // jQuery `.data()` would coerce `data-text="false"` to the boolean `false`, which then renders as empty text.
+ const $dropdown = $(``).dropdown();
+ for (const value of ['1', '0', 'true', 'false']) {
+ $dropdown.dropdown('set selected', value);
+ expect($dropdown.dropdown('get text')).toEqual(value);
+ expect($dropdown.dropdown('get value')).toEqual(value);
+ }
+});
+
test('hideScopedEmptyDividers-simple', () => {
const container = createElementFromHTML(`
diff --git a/web_src/js/render/plugins/frontend-asciicast.ts b/web_src/js/render/plugins/frontend-asciicast.ts
new file mode 100644
index 0000000000..f8bdefb316
--- /dev/null
+++ b/web_src/js/render/plugins/frontend-asciicast.ts
@@ -0,0 +1,23 @@
+import type {FrontendRenderFunc} from '../plugin.ts';
+
+export const frontendRender: FrontendRenderFunc = async (opts): Promise => {
+ try {
+ const [player] = await Promise.all([
+ import('asciinema-player'),
+ import('asciinema-player/dist/bundle/asciinema-player.css'),
+ ]);
+ player.create({data: opts.contentString()}, opts.container, {
+ // poster (a preview frame) to display until the playback is started.
+ // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more.
+ poster: 'npt:1:0:0',
+ });
+ // Related: https://github.com/asciinema/asciinema-player/blob/develop/src/components/Terminal.js :