Restrict UI text selection to app data

Author: zhaobozhen

AGENTS.md

@@ -98,6 +98,7 @@
 - WebUI CSS gzip budget is intentionally tight. Before raising the budget, prefer lazy CSS for non-first-screen UI (`runtime-log.css`, `lcapps-bubble.css`), removing duplicated control rules, or consolidating existing tokens. A modest budget raise is acceptable only when the transferred gzip size and first-screen impact are understood.
 - Runtime log UI is page-session frontend diagnostics only: live while the page is open, capped, not Cloudflare logs, and not persisted across refresh. Keep runtime log event names/fields in English; localize only visible labels.
 - For slow Web UI link analysis, inspect runtime log split timings (`client_duration_ms`, `server_duration_ms`, `fetch_headers_ms`, `response_text_ms`, `json_parse_ms`, `render_ms`) before blaming rendering, history writes, or remote parsing. Large reports can justify moving noncritical work off the visible-result path, but they are not evidence of multi-second stalls by themselves.
+- Static Web UI text should stay non-selectable for drag/long-press copy. Only application/report data values should opt into selection, using the existing `app-data-text` whitelist class or an equivalent narrowly scoped report-data selector.
 
 ## Worker Notes
 

packages/apk-webui/src/app.css

@@ -188,6 +188,32 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Segoe UI", sans-serif;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+input,
+textarea,
+[contenteditable="true"] {
+  -webkit-touch-callout: default;
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+select {
+  -webkit-user-select: auto;
+  user-select: auto;
+}
+
+.app-data-text,
+.app-data-text *,
+.history-list :is(.history-title, .history-package, .history-badge-value, .history-stat-value),
+.history-file-line span:not([aria-hidden="true"]),
+.lcapps-picker__grid :is(.lcapps-app-title, .lcapps-app-package, .lcapps-app-meta) {
+  -webkit-touch-callout: default;
+  -webkit-user-select: text;
+  user-select: text;
 }
 
 .color-orb-background {

packages/apk-webui/src/app/compare-controller.js

@@ -542,12 +542,12 @@ export class CompareController {
       `<div class="compare-app-card">`,
       this.renderAppIcon(info),
       `<div class="compare-app-copy">`,
-      `<h3>${escapeHtml(info.appName || this.t("unknown"))}</h3>`,
-      `<code>${escapeHtml(info.packageName || this.t("unknown"))}</code>`,
+      `<h3 class="app-data-text">${escapeHtml(info.appName || this.t("unknown"))}</h3>`,
+      `<code class="app-data-text">${escapeHtml(info.packageName || this.t("unknown"))}</code>`,
       `<div class="hero-meta">`,
       chip(`${this.t("versionName")}: ${info.versionName || this.t("unknown")}`, this.t("unknown")),
       chip(`${this.t("versionCode")}: ${info.versionCode || this.t("unknown")}`, this.t("unknown")),
-      chip(sourceLabel, this.t("unknown")),
+      chip(sourceLabel, this.t("unknown"), { appData: false }),
       `</div>`,
       `<div class="compare-stat-strip">`,
       compareMiniStat(this.t("permissions"), stats.permissions),
@@ -653,8 +653,8 @@ export class CompareController {
         return [
           `<div class="compare-table-row${changed}">`,
           `<div>${escapeHtml(label)}</div>`,
-          `<div>${escapeHtml(leftValue)}</div>`,
-          `<div>${escapeHtml(rightValue)}</div>`,
+          `<div class="app-data-text">${escapeHtml(leftValue)}</div>`,
+          `<div class="app-data-text">${escapeHtml(rightValue)}</div>`,
           `</div>`,
         ].join("");
       }).join(""),
@@ -755,10 +755,10 @@ export class CompareController {
     return [
       `<article class="compare-diff-item${status ? ` is-${escapeAttr(status)}` : ""}">`,
       `<div class="compare-diff-item-header">`,
-      `<strong>${item.labelHtml || escapeHtml(item.label || item.key || this.t("unknown"))}</strong>`,
+      `<strong class="app-data-text">${item.labelHtml || escapeHtml(item.label || item.key || this.t("unknown"))}</strong>`,
       statusLabel ? `<span class="compare-diff-status">${escapeHtml(statusLabel)}</span>` : "",
       `</div>`,
-      item.metaHtml || item.meta ? `<span>${item.metaHtml || escapeHtml(item.meta)}</span>` : "",
+      item.metaHtml || item.meta ? `<span class="app-data-text">${item.metaHtml || escapeHtml(item.meta)}</span>` : "",
       `</article>`,
     ].join("");
   }
@@ -942,9 +942,9 @@ export class CompareController {
 
   renderPairMeta(left, right) {
     return [
-      `<span class="compare-diff-pair-value">${left.pairValueHtml || escapeHtml(left.pairValue || left.meta || left.label || this.t("unknown"))}</span>`,
+      `<span class="compare-diff-pair-value app-data-text">${left.pairValueHtml || escapeHtml(left.pairValue || left.meta || left.label || this.t("unknown"))}</span>`,
       `<span class="compare-diff-arrow" aria-hidden="true">→</span>`,
-      `<span class="compare-diff-pair-value">${right.pairValueHtml || escapeHtml(right.pairValue || right.meta || right.label || this.t("unknown"))}</span>`,
+      `<span class="compare-diff-pair-value app-data-text">${right.pairValueHtml || escapeHtml(right.pairValue || right.meta || right.label || this.t("unknown"))}</span>`,
     ].join("");
   }
 
@@ -1207,7 +1207,7 @@ function compareMiniStat(label, value) {
   return [
     `<span class="compare-mini-stat">`,
     `<span>${escapeHtml(label)}</span>`,
-    `<strong>${escapeHtml(String(value || 0))}</strong>`,
+    `<strong class="app-data-text">${escapeHtml(String(value || 0))}</strong>`,
     `</span>`,
   ].join("");
 }
@@ -1216,7 +1216,7 @@ function metric(label, value) {
   return [
     `<article class="metric-card">`,
     `<div class="metric-label">${escapeHtml(label)}</div>`,
-    `<div class="metric-value">${escapeHtml(String(value))}</div>`,
+    `<div class="metric-value app-data-text">${escapeHtml(String(value))}</div>`,
     `</article>`,
   ].join("");
 }
@@ -1229,8 +1229,9 @@ function sectionStack(items) {
   return `<div class="section-stack">${items.join("")}</div>`;
 }
 
-function chip(value, unknownLabel) {
-  return `<span class="chip">${escapeHtml(value || unknownLabel)}</span>`;
+function chip(value, unknownLabel, { appData = true } = {}) {
+  const className = appData ? "chip app-data-text" : "chip";
+  return `<span class="${className}">${escapeHtml(value || unknownLabel)}</span>`;
 }
 
 function emptyList(message) {

packages/apk-webui/src/app/report-renderer.js

@@ -99,7 +99,7 @@ function renderHero(report) {
     chip(`${t("heroVersionName")}: ${info.versionName || t("unknown")}`),
     chip(`${t("heroVersionCode")}: ${info.versionCode || t("unknown")}`),
     chip(`${t("targetSdk")}: ${info.targetSdk || t("unknown")}`),
-    chip(t("localFile")),
+    chip(t("localFile"), { appData: false }),
     `</div>`,
     `</div>`,
   ].join("");
@@ -359,9 +359,9 @@ function renderNativeTab(report) {
     const sdk = library.sdk ? renderSdkChip(library.sdk) : "";
     return [
       `<article class="list-row native-library-row">`,
-      `<div class="row-title"><span>${escapeHtml(library.name || t("unknown"))}</span></div>`,
-      `<div class="row-meta native-library-meta"><span>${escapeHtml(t("size"))}: ${escapeHtml(formatBytes(library.size || 0))}</span>${renderNativeLibraryLabels(library)}</div>`,
-      sdk ? `<div class="row-meta native-library-sdk">${sdk}</div>` : "",
+      `<div class="row-title"><span class="app-data-text">${escapeHtml(library.name || t("unknown"))}</span></div>`,
+      `<div class="row-meta native-library-meta app-data-text"><span>${escapeHtml(t("size"))}: ${escapeHtml(formatBytes(library.size || 0))}</span>${renderNativeLibraryLabels(library)}</div>`,
+      sdk ? `<div class="row-meta native-library-sdk app-data-text">${sdk}</div>` : "",
       `</article>`,
     ].join("");
   }).join("");
@@ -422,7 +422,7 @@ function renderAppTitle(title) {
   const value = title || t("unknown");
   return [
     `<h2 class="app-title-mask" data-app-title-mask>`,
-    `<span class="app-title-mask__base">${escapeHtml(value)}</span>`,
+    `<span class="app-title-mask__base app-data-text">${escapeHtml(value)}</span>`,
     `<span class="app-title-mask__color" aria-hidden="true">${escapeHtml(value)}</span>`,
     `</h2>`,
   ].join("");
@@ -457,7 +457,7 @@ function renderComponentRow(component) {
     `<article class="list-row component-row">`,
     `<div class="component-row-header">`,
     `<div class="component-row-main">`,
-    `<div class="row-title component-row-title"><span>${escapeHtml(component.name || t("unknown"))}</span></div>`,
+    `<div class="row-title component-row-title"><span class="app-data-text">${escapeHtml(component.name || t("unknown"))}</span></div>`,
     `</div>`,
     `</div>`,
     renderComponentDetails(component),
@@ -644,9 +644,9 @@ function renderMetaDataTab(report) {
 
   const rows = metaData.map((item) => [
     `<article class="list-row">`,
-    `<div class="row-title"><span>${escapeHtml(item.name || t("unknown"))}</span></div>`,
-    `<div class="row-meta">${renderMetaDataValue(item)}</div>`,
-    item.resourceId != null ? `<div class="row-meta">${escapeHtml(t("resource"))}: ${codeChip(formatResourceId(item.resourceId))}</div>` : "",
+    `<div class="row-title"><span class="app-data-text">${escapeHtml(item.name || t("unknown"))}</span></div>`,
+    `<div class="row-meta app-data-text">${renderMetaDataValue(item)}</div>`,
+    item.resourceId != null ? `<div class="row-meta app-data-text">${escapeHtml(t("resource"))}: ${codeChip(formatResourceId(item.resourceId))}</div>` : "",
     `</article>`,
   ].join("")).join("");
 
@@ -673,7 +673,7 @@ function renderRawTab(report) {
     `<span>${escapeHtml(t("exportJson"))}</span>`,
     `</button>`,
     `</div>`,
-    `<pre class="json-block">${escapeHtml(formatExportJson(report))}</pre>`,
+    `<pre class="json-block app-data-text">${escapeHtml(formatExportJson(report))}</pre>`,
   ].join("");
 }
 
@@ -720,12 +720,12 @@ function renderSdkRows(entries) {
     return [
       `<article class="sdk-row">`,
       `<div class="sdk-row-header">`,
-      `<div class="sdk-title">${renderSdkIcon(entry.iconUrl, entry.label, entry.singleColorIcon)}${renderSdkRuleLabel(entry, t("unknown"))}</div>`,
-      `<span class="sdk-count">${escapeHtml(String(entry.count || 0))}</span>`,
+      `<div class="sdk-title app-data-text">${renderSdkIcon(entry.iconUrl, entry.label, entry.singleColorIcon)}${renderSdkRuleLabel(entry, t("unknown"))}</div>`,
+      `<span class="sdk-count app-data-text">${escapeHtml(String(entry.count || 0))}</span>`,
       `</div>`,
       `<div class="bar-track"><div class="bar" style="width: ${width}%"></div></div>`,
-      detail ? `<div class="sdk-meta">${escapeHtml(detail)}</div>` : "",
-      preview ? `<div class="sdk-preview">${preview}</div>` : "",
+      detail ? `<div class="sdk-meta app-data-text">${escapeHtml(detail)}</div>` : "",
+      preview ? `<div class="sdk-preview app-data-text">${preview}</div>` : "",
       `</article>`,
     ].join("");
   }).join("");
@@ -773,7 +773,7 @@ function renderFeaturePills(buildFeatures = {}) {
     return "";
   }
 
-  return `<div class="feature-grid">${features.map((item) => `<span class="feature-pill">${escapeHtml(item)}</span>`).join("")}</div>`;
+  return `<div class="feature-grid">${features.map((item) => `<span class="feature-pill app-data-text">${escapeHtml(item)}</span>`).join("")}</div>`;
 }
 
 function renderSdkChip(sdk) {
@@ -808,7 +808,7 @@ function renderKeyValueTable(rows) {
     rows.map(([label, value]) => [
       `<div class="kv-row">`,
       `<div class="kv-label">${escapeHtml(label)}</div>`,
-      `<div class="kv-value">${escapeHtml(value || t("unknown"))}</div>`,
+      `<div class="kv-value app-data-text">${escapeHtml(value || t("unknown"))}</div>`,
       `</div>`,
     ].join("")).join(""),
     `</div>`,
@@ -822,7 +822,7 @@ function renderHtmlKeyValueTable(rows, className = "") {
     rows.map(([label, value]) => [
       `<div class="kv-row">`,
       `<div class="kv-label">${escapeHtml(label)}</div>`,
-      `<div class="kv-value">${value || escapeHtml(t("unknown"))}</div>`,
+      `<div class="kv-value app-data-text">${value || escapeHtml(t("unknown"))}</div>`,
       `</div>`,
     ].join("")).join(""),
     `</div>`,
@@ -833,7 +833,7 @@ function metric(label, value) {
   return [
     `<article class="metric-card">`,
     `<div class="metric-label">${escapeHtml(label)}</div>`,
-    `<div class="metric-value">${escapeHtml(String(value))}</div>`,
+    `<div class="metric-value app-data-text">${escapeHtml(String(value))}</div>`,
     `</article>`,
   ].join("");
 }
@@ -846,16 +846,17 @@ function sectionStack(items) {
   return `<div class="section-stack">${items.join("")}</div>`;
 }
 
-function chip(value) {
-  return `<span class="chip">${escapeHtml(value || t("unknown"))}</span>`;
+function chip(value, { appData = true } = {}) {
+  const className = appData ? "chip app-data-text" : "chip";
+  return `<span class="${className}">${escapeHtml(value || t("unknown"))}</span>`;
 }
 
 function codeChip(value) {
-  return `<span class="code-chip">${escapeHtml(value || t("unknown"))}</span>`;
+  return `<span class="code-chip app-data-text">${escapeHtml(value || t("unknown"))}</span>`;
 }
 
 function inlineCodeValue(value) {
-  return `<code class="inline-code-value">${escapeHtml(value || t("unknown"))}</code>`;
+  return `<code class="inline-code-value app-data-text">${escapeHtml(value || t("unknown"))}</code>`;
 }
 
 function buildFeatureLabel(name, version) {

packages/bot-worker/src/report-viewer.js

@@ -77,6 +77,26 @@ function renderReportPage(page, locale) {
           radial-gradient(circle at top left, rgba(236, 72, 153, 0.08), transparent 24rem),
           var(--bg);
         color: var(--text);
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        user-select: none;
+      }
+
+      .report-hero h1,
+      .report-hero .meta,
+      pre,
+      code,
+      .kv-value,
+      .feature-pill,
+      .item-line,
+      .chip-cloud,
+      .sdk-chart-label,
+      .sdk-chart-count,
+      .sdk-chart-meta,
+      .sdk-chart-preview {
+        -webkit-touch-callout: default;
+        -webkit-user-select: text;
+        user-select: text;
       }
 
       .page {

packages/bot-worker/src/upload-view.js

@@ -67,6 +67,20 @@ export function renderUploadPage({
           var(--bg);
         color: var(--text);
         font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        user-select: none;
+      }
+
+      input {
+        -webkit-touch-callout: default;
+        -webkit-user-select: text;
+        user-select: text;
+      }
+
+      select {
+        -webkit-user-select: auto;
+        user-select: auto;
       }
 
       main {