From 18475cd3c6a8f0417b9025a0ba2059ba09731ef4 Mon Sep 17 00:00:00 2001 From: imbajin Date: Tue, 13 Oct 2026 01:49:13 +0800 Subject: [PATCH 1/3] fix(filetree): wrap long comments without hover --- assets/scss/td/_filetree.scss | 11 +++++----- bin/check-content-primitives.py | 21 +++++++++++++++++++ .../content/fixtures/filetree-comments.md | 21 +++++++++++++++++++ .../content/fixtures/filetree-comments.zh.md | 21 +++++++++++++++++++ 4 files changed, 69 insertions(+), 5 deletions(-) create mode 100644 tests/site/content/fixtures/filetree-comments.md create mode 100644 tests/site/content/fixtures/filetree-comments.zh.md diff --git a/assets/scss/td/_filetree.scss b/assets/scss/td/_filetree.scss index 54364cdf..b8e6c6d8 100644 --- a/assets/scss/td/_filetree.scss +++ b/assets/scss/td/_filetree.scss @@ -153,7 +153,8 @@ display: grid; grid-template-columns: minmax(0, var(--td-filetree-split)) minmax(0, 1fr); align-items: center; - block-size: var(--td-filetree-row); + block-size: auto; + min-block-size: var(--td-filetree-row); padding-inline: var(--td-filetree-gutter); // Indent guides: one hairline per ancestor level, ending under the parent // entry's icon centre. Physical direction; the RTL block below flips it. @@ -281,7 +282,7 @@ color: var(--td-filetree-muted); font-size: 0.86em; gap: 0.75ch; - white-space: nowrap; + white-space: normal; } .td-filetree__hash { @@ -291,11 +292,11 @@ .td-filetree__comment-text { min-width: 0; - overflow: hidden; - text-overflow: ellipsis; + // Keep descriptions readable without hover, including unbroken identifiers. + overflow-wrap: anywhere; } -// Narrow viewports: the comment drops under the name instead of truncating. +// Narrow viewports: the comment drops under the name. @include media-breakpoint-down(sm) { .td-filetree__row { grid-template-columns: minmax(0, 1fr); diff --git a/bin/check-content-primitives.py b/bin/check-content-primitives.py index 1d359af1..d46ee7f8 100755 --- a/bin/check-content-primitives.py +++ b/bin/check-content-primitives.py @@ -10,6 +10,7 @@ from __future__ import annotations import argparse +from html import escape from pathlib import Path import re import tempfile @@ -155,6 +156,26 @@ def check_outputs(public: Path) -> list[str]: require(any(">Site tree

" in tree and "", errors) + # Keep full descriptions in the actual row text in every output, including + # CJK and unbroken tokens. Layout/resize checks live in the sibling site's + # FileTree browser suite; text presence alone cannot detect CSS clipping. + for language, suffix in (("", ""), ("zh/", ".zh")): + source = (FIXTURE / f"content/fixtures/filetree-comments{suffix}.md").read_text() + comments = re.findall(r" # (.+)$", source, re.MULTILINE) + comment_page = (public / language / "fixtures/filetree-comments/index.html").read_text() + comment_markdown = (public / language / "fixtures/filetree-comments/index.md").read_text() + comment_print = (public / language / "_print/fixtures/index.html").read_text() + rendered = re.findall(r'([^<]*)', comment_page) + require(len(comments) == 4 and rendered == [escape(text) for text in comments], + f"{language}FileTree long comments are missing from row text", errors) + require(comment_page.count('data-td-filetree-divider') == 2, + f"{language}FileTree long-comment fixtures lost their native dividers", errors) + for text in comments: + require(text in comment_markdown, + f"{language}FileTree Markdown lost long comment {text}", errors) + require(f'{escape(text)}' in comment_print, + f"{language}FileTree Print lost long comment {text}", errors) + # --- Native list forms: cards / gallery + filetree fences (lists fixture) -- for marker in ( '
@@ -1514,17 +1517,21 @@

Release assets<

-

21 - Gallery

+

21 - File tree comments

+

Storage directory comments

  • rocksdb-data/
    • data/
      • m/schema store: property keys, vertex/edge/index labels, counters
      • g/graph store: vertices, edges, index tables, olap tables
      • s/system store: tasks, server info, backend meta (driver version)
    • wal/
      • m/
      • g/
      • s/

Unbroken comment

  • storage/
    • id.txtabcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789

Compact comments

  • compact/
    • config.ymlAn explicitly compact description stays on one line even when the text is too long for its column.

Wrapped comments

  • wrapped/
    • a-deliberately-long-runbook-filename-for-a-failover-drill.mdComplete recovery procedure: verify the previous leader, inspect replication, and only then promote the standby.
    • graph/Graph storage: vertices, edges, index tables, and OLAP analysis data all remain readable.
      • metadata.ymlBackend metadata and driver version for the current storage engine.
+
+
+

22 - Gallery

Regression fixtures for a static-first responsive image Gallery.
  • Blue and gold local dashboard overview

    Local page resource with intrinsic dimensions.

  • Green and violet global dashboard detail

    A deliberately long caption that must wrap inside its own card without widening the page or covering the neighboring image.

  • Tall static SVG settings overview

    واجهة إعدادات عربية طويلة لاختبار الالتفاف والاتجاه التلقائي

  • Remote deployment history view

    远程图片保持静态 URL，构建过程不会下载它。

-

22 - Gallery with Zoom disabled

+

23 - Gallery with Zoom disabled

Gallery remains complete when page-level Image Zoom is disabled.
  • Static Gallery overview

    The first static figure remains readable without JavaScript.

  • Static Gallery detail

    The second static figure keeps its caption and author order.

-

23 - Release assets with an explicit base

+

24 - Release assets with an explicit base

Asset tables can remain useful outside release pages without inventing version facts.
@@ -1554,7 +1561,7 @@

23 - Release assets with an explici

-

24 - Table layout policy

+

25 - Table layout policy

Ordinary prose

@@ -1697,7 +1704,7 @@

-

25 - Unpublished download demo

+

26 - Unpublished download demo

Pinned release facts remain visible without exposing download actions.
diff --git a/tests/goldens/rss/fixtures.xml b/tests/goldens/rss/fixtures.xml index 344bf596..78e50e01 100644 --- a/tests/goldens/rss/fixtures.xml +++ b/tests/goldens/rss/fixtures.xml @@ -128,6 +128,13 @@ +File tree comments +https://example.org/fixtures/filetree-comments/ +Mon, 01 Jan 0001 00:00:00 +0000 +https://example.org/fixtures/filetree-comments/ +<pre class="td-filetree-source"><code class="language-filetree">rocksdb-data/ data/ m/ # schema store: property keys, vertex/edge/index labels, counters g/ # graph store: vertices, edges, index tables, olap tables s/ # system store: tasks, server info, backend meta (driver version) wal/ m/ g/ s/</code></pre><pre class="td-filetree-source"><code class="language-filetree">storage/ id.txt # abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789</code></pre><pre class="td-filetree-source"><code class="language-filetree">compact/ config.yml # An explicitly compact description stays on one line even when the text is too long for its column.</code></pre><pre class="td-filetree-source"><code class="language-filetree">wrapped/ a-deliberately-long-runbook-filename-for-a-failover-drill.md # Complete recovery procedure: verify the previous leader, inspect replication, and only then promote the standby. graph/ # Graph storage: vertices, edges, index tables, and OLAP analysis data all remain readable. metadata.yml # Backend metadata and driver version for the current storage engine.</code></pre> + + Gallery https://example.org/fixtures/gallery/ Mon, 01 Jan 0001 00:00:00 +0000 diff --git a/tests/js/filetree-style-source.test.js b/tests/js/filetree-style-source.test.js deleted file mode 100644 index a82ca7eb..00000000 --- a/tests/js/filetree-style-source.test.js +++ /dev/null @@ -1,36 +0,0 @@ -'use strict'; - -// Source contracts complement output text checks; only the sibling docsite's -// browser tests establish actual text-fragment containment and interactions. -const assert = require('node:assert/strict'); -const fs = require('node:fs'); -const path = require('node:path'); -const test = require('node:test'); - -const source = fs.readFileSync( - path.join(__dirname, '../../assets/scss/td/_filetree.scss'), 'utf8', -).replace(/\/\*[\s\S]*?\*\/|\/\/[^\n]*/g, ''); - -function block(selector) { - const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); - const found = source.match(new RegExp('^' + escaped + '\\s*\\{([\\s\\S]*?)^\\}', 'm')); - assert.ok(found, 'missing owning block: ' + selector); - return found[1]; -} - -test('FileTree rows grow but preserve their minimum height', () => { - const row = block('.td-filetree__row'); - assert.match(row, /\bblock-size:\s*auto;/); - assert.match(row, /\bmin-block-size:\s*var\(--td-filetree-row\);/); - assert.doesNotMatch(row, /(?:^|[;\n])\s*block-size:\s*var\(/); -}); - -test('FileTree comments wrap without clipping while names retain ellipsis', () => { - assert.match(block('.td-filetree__comment'), /white-space:\s*normal;/); - const text = block('.td-filetree__comment-text'); - assert.match(text, /overflow-wrap:\s*anywhere;/); - assert.doesNotMatch(text, /overflow:\s*hidden|text-overflow:\s*ellipsis|white-space:\s*nowrap/); - const name = block('.td-filetree__name'); - assert.match(name, /white-space:\s*nowrap;/); - assert.match(name, /text-overflow:\s*ellipsis;/); -}); diff --git a/tests/site/content/fixtures/filetree-comments.md b/tests/site/content/fixtures/filetree-comments.md index e0aab9f2..88e9cb12 100644 --- a/tests/site/content/fixtures/filetree-comments.md +++ b/tests/site/content/fixtures/filetree-comments.md @@ -15,7 +15,19 @@ rocksdb-data/ s/ ``` -```filetree {title="Unbroken comment"} +```filetree {title="Unbroken comment" wrap=true} storage/ id.txt # abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789 ``` + +```filetree {title="Compact comments" wrap=false} +compact/ + config.yml # An explicitly compact description stays on one line even when the text is too long for its column. +``` + +```filetree {title="Wrapped comments" wrap=true} +wrapped/ + a-deliberately-long-runbook-filename-for-a-failover-drill.md # Complete recovery procedure: verify the previous leader, inspect replication, and only then promote the standby. + graph/ # Graph storage: vertices, edges, index tables, and OLAP analysis data all remain readable. + metadata.yml # Backend metadata and driver version for the current storage engine. +``` diff --git a/tests/site/content/fixtures/filetree-comments.zh.md b/tests/site/content/fixtures/filetree-comments.zh.md index fe4b8873..b986d147 100644 --- a/tests/site/content/fixtures/filetree-comments.zh.md +++ b/tests/site/content/fixtures/filetree-comments.zh.md @@ -15,7 +15,19 @@ rocksdb-data/ s/ ``` -```filetree {title="无空格注释"} +```filetree {title="无空格注释" wrap=true} storage/ id.txt # abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789 ``` + +```filetree {title="紧凑注释" wrap=false} +compact/ + config.yml # 显式关闭换行后，较长的配置说明仍然保持单行，并在当前注释列的边界处显示省略号。 +``` + +```filetree {title="换行注释" wrap=true} +wrapped/ + a-deliberately-long-runbook-filename-for-a-failover-drill.md # 完整恢复流程：先确认原主节点状态，再检查复制进度，最后才将备用节点提升为主节点。 + graph/ # 图存储：顶点、边、索引表，以及 OLAP 分析任务使用的数据表，全部保持完整可读。 + metadata.yml # 当前存储引擎的后端元数据与驱动版本。 +```