.
- * @param {string|null} key Dict key, array index, or null for root.
- * @param {*} value
- * @param {PDFDocumentProxy} doc
- */
-function renderNode(key, value, doc) {
+/** Create a bare div.node treeitem with an optional "key: " prefix. */
+function makeNodeEl(key) {
const node = document.createElement("div");
node.className = "node";
node.setAttribute("role", "treeitem");
node.tabIndex = -1;
-
if (key !== null) {
- const keyEl = document.createElement("span");
- keyEl.className = "key";
- keyEl.textContent = key;
- node.append(keyEl);
- const sep = document.createElement("span");
- sep.className = "separator";
- sep.textContent = ": ";
- node.append(sep);
+ node.append(makeSpan("key", key), makeSpan("separator", ": "));
}
+ return node;
+}
+/**
+ * Render one key/value pair as a
.
+ * @param {string|null} key Dict key, array index, or null for root.
+ * @param {*} value
+ * @param {PDFDocumentProxy} doc
+ */
+function renderNode(key, value, doc) {
+ const node = makeNodeEl(key);
node.append(renderValue(value, doc));
return node;
}
@@ -325,50 +2178,20 @@ function buildChildren(value, doc, container) {
if (isImageStream(value)) {
container.append(renderImageData(value.imageData));
} else if (isFormXObjectStream(value)) {
- const contentNode = document.createElement("div");
- contentNode.className = "node";
- contentNode.setAttribute("role", "treeitem");
- contentNode.tabIndex = -1;
- contentNode.append(makeSpan("key", "content"));
- contentNode.append(makeSpan("separator", ": "));
-
- const parsedEl = document.createElement("span");
- parsedEl.className = "content-stream-parsed";
- parsedEl.append(
- renderExpandable(
- `[Content Stream, ${value.instructions.length} instructions]`,
- "stream-label",
- c => buildInstructionLines(value, c)
+ const contentNode = makeNodeEl("content");
+ const csLabel = `[Content Stream, ${value.instructions.length} instructions]`;
+ const csLabelEl = makeSpan("stream-label", csLabel);
+ contentNode.append(
+ makeExpandable(csLabelEl, csLabel, c =>
+ buildContentStreamPanel(value, c, csLabelEl)
)
);
-
- const rawEl = document.createElement("span");
- rawEl.className = "content-stream-raw";
- const byteLabel = makeSpan(
- "stream-label",
- `<${value.bytes.length} raw bytes>`
- );
- rawEl.append(byteLabel);
- const bytesContentEl = document.createElement("div");
- bytesContentEl.className = "bytes-content";
- bytesContentEl.append(formatBytes(value.bytes));
- rawEl.append(bytesContentEl);
-
- contentNode.append(parsedEl, rawEl);
container.append(contentNode);
} else {
- const byteNode = document.createElement("div");
- byteNode.className = "node";
- const keyEl = document.createElement("span");
- keyEl.className = "key";
- keyEl.textContent = "bytes";
- const sep = document.createElement("span");
- sep.className = "separator";
- sep.textContent = ": ";
- const valEl = document.createElement("span");
- valEl.className = "stream-label";
- valEl.textContent = `<${value.bytes.length} raw bytes>`;
- byteNode.append(keyEl, sep, valEl);
+ const byteNode = makeNodeEl("bytes");
+ byteNode.append(
+ makeSpan("stream-label", `<${value.bytes.length} raw bytes>`)
+ );
container.append(byteNode);
const bytesContentEl = document.createElement("div");
@@ -441,69 +2264,591 @@ function renderToken(token) {
}
/**
- * Populate container with one .cs-instruction div per instruction.
+ * Return the plain-text representation of a token (mirrors renderToken).
+ * Used to build searchable strings for every instruction.
+ */
+function tokenToText(token) {
+ if (!token) {
+ return "null";
+ }
+ switch (token.type) {
+ case "cmd":
+ return token.value;
+ case "name":
+ return "/" + token.value;
+ case "ref":
+ return `${token.num} ${token.gen} R`;
+ case "number":
+ return String(token.value);
+ case "string":
+ return JSON.stringify(token.value);
+ case "boolean":
+ return String(token.value);
+ case "null":
+ return "null";
+ case "array":
+ return `[ ${token.value.map(tokenToText).join(" ")} ]`;
+ case "dict": {
+ const inner = Object.entries(token.value)
+ .map(([k, v]) => `/${k} ${tokenToText(v)}`)
+ .join(" ");
+ return `<< ${inner} >>`;
+ }
+ default:
+ return String(token.value ?? token.type);
+ }
+}
+
+/**
+ * Populate container with one .content-stm-instruction div per instruction.
* Shared by Page content streams and Form XObject streams.
*/
-function buildInstructionLines(val, container) {
- const pre = document.createElement("div");
- pre.className = "content-stream";
- let depth = 0;
- for (const instr of val.instructions) {
- if (instr.cmd === "ET" || instr.cmd === "Q" || instr.cmd === "EMC") {
- depth = Math.max(0, depth - 1);
+const INSTRUCTION_BATCH_SIZE = 500;
+// Maximum instructions kept in the DOM at once (two batches).
+const MAX_RENDERED_INSTRUCTIONS = INSTRUCTION_BATCH_SIZE * 2;
+
+/**
+ * Build and return a sticky search/goto toolbar div.
+ *
+ * @param {object} opts
+ * @param {number} opts.total Total number of items.
+ * @param {function} opts.getText getText(i) → plain-text string for item i.
+ * @param {function} opts.jumpToItem jumpToItem(i) highlights item i and scrolls
+ * to it; jumpToItem(-1) clears the highlight.
+ * @returns {HTMLElement} The toolbar element (class "cs-goto-bar").
+ */
+let _searchToolbarCounter = 0;
+
+function makeSearchToolbar({ total, getText, jumpToItem, actions = null }) {
+ const toolbarId = ++_searchToolbarCounter;
+ const gotoBar = document.createElement("div");
+ gotoBar.className = "cs-goto-bar";
+
+ // Search group (left side)
+ const searchGroup = document.createElement("div");
+ searchGroup.className = "cs-search-group";
+
+ const searchErrorId = `search-error-${toolbarId}`;
+
+ const searchInput = document.createElement("input");
+ searchInput.type = "search";
+ searchInput.className = "cs-search-input";
+ searchInput.placeholder = "Search for\u2026";
+ searchInput.setAttribute("aria-label", "Search instructions");
+ searchInput.setAttribute("aria-describedby", searchErrorId);
+
+ const searchError = document.createElement("span");
+ searchError.id = searchErrorId;
+ searchError.className = "sr-only";
+ searchError.setAttribute("role", "alert");
+
+ const prevBtn = document.createElement("button");
+ prevBtn.className = "cs-nav-btn";
+ prevBtn.textContent = "↑";
+ prevBtn.setAttribute("aria-label", "Previous match");
+ prevBtn.disabled = true;
+
+ const nextBtn = document.createElement("button");
+ nextBtn.className = "cs-nav-btn";
+ nextBtn.textContent = "↓";
+ nextBtn.setAttribute("aria-label", "Next match");
+ nextBtn.disabled = true;
+
+ const matchInfo = document.createElement("span");
+ matchInfo.className = "cs-match-info";
+
+ function makeCheckboxLabel(text) {
+ const label = document.createElement("label");
+ label.className = "cs-check-label";
+ const cb = document.createElement("input");
+ cb.type = "checkbox";
+ label.append(cb, ` ${text}`);
+ return { label, cb };
+ }
+
+ const { label: ignoreCaseLabel, cb: ignoreCaseCb } =
+ makeCheckboxLabel("Ignore case");
+ const { label: regexLabel, cb: regexCb } = makeCheckboxLabel("Regex");
+
+ searchGroup.append(
+ searchInput,
+ searchError,
+ prevBtn,
+ nextBtn,
+ matchInfo,
+ ignoreCaseLabel,
+ regexLabel
+ );
+
+ // Go-to-line input (right side)
+ const gotoInput = document.createElement("input");
+ gotoInput.type = "text";
+ gotoInput.className = "cs-goto";
+ gotoInput.placeholder = "Go to line\u2026";
+ gotoInput.setAttribute("aria-label", "Go to line");
+
+ if (actions) {
+ gotoBar.append(actions);
+ }
+ gotoBar.append(searchGroup, gotoInput);
+
+ let searchMatches = [];
+ let currentMatchIdx = -1;
+
+ function updateMatchInfo() {
+ if (!searchInput.value) {
+ matchInfo.textContent = "";
+ prevBtn.disabled = true;
+ nextBtn.disabled = true;
+ } else if (searchMatches.length === 0) {
+ matchInfo.textContent = "No results";
+ prevBtn.disabled = true;
+ nextBtn.disabled = true;
+ } else {
+ matchInfo.textContent = `${currentMatchIdx + 1} / ${searchMatches.length}`;
+ prevBtn.disabled = false;
+ nextBtn.disabled = false;
}
- const line = document.createElement("div");
- line.className = "cs-instruction";
- if (depth > 0) {
- line.style.paddingInlineStart = `${depth * 1.5}em`;
+ }
+
+ function computeMatches() {
+ jumpToItem(-1);
+ searchMatches = [];
+ currentMatchIdx = -1;
+
+ const query = searchInput.value;
+ if (!query) {
+ updateMatchInfo();
+ return false;
}
- for (const arg of instr.args) {
- line.append(renderToken(arg));
- line.append(document.createTextNode(" "));
+
+ let test;
+ if (regexCb.checked) {
+ try {
+ const re = new RegExp(query, ignoreCaseCb.checked ? "i" : "");
+ test = str => re.test(str);
+ searchInput.removeAttribute("aria-invalid");
+ searchError.textContent = "";
+ } catch {
+ searchInput.setAttribute("aria-invalid", "true");
+ searchError.textContent = "Invalid regular expression";
+ updateMatchInfo();
+ return false;
+ }
+ } else {
+ const needle = ignoreCaseCb.checked ? query.toLowerCase() : query;
+ test = str =>
+ (ignoreCaseCb.checked ? str.toLowerCase() : str).includes(needle);
}
- if (instr.cmd !== null) {
- const cmdEl = makeSpan("token-cmd", instr.cmd);
- const opsName = val.cmdNames[instr.cmd];
- if (opsName) {
- cmdEl.title = opsName;
+ searchInput.removeAttribute("aria-invalid");
+ searchError.textContent = "";
+
+ for (let i = 0; i < total; i++) {
+ if (test(getText(i))) {
+ searchMatches.push(i);
}
- line.append(cmdEl);
}
- pre.append(line);
- if (instr.cmd === "BT" || instr.cmd === "q" || instr.cmd === "BDC") {
- depth++;
+ return searchMatches.length > 0;
+ }
+
+ function navigateMatch(delta) {
+ if (!searchMatches.length) {
+ return;
+ }
+ currentMatchIdx =
+ (currentMatchIdx + delta + searchMatches.length) % searchMatches.length;
+ jumpToItem(searchMatches[currentMatchIdx]);
+ updateMatchInfo();
+ }
+
+ function runSearch() {
+ if (computeMatches() && searchMatches.length) {
+ currentMatchIdx = 0;
+ jumpToItem(searchMatches[0]);
}
+ updateMatchInfo();
}
- container.append(pre);
+
+ searchInput.addEventListener("input", runSearch);
+ searchInput.addEventListener("keydown", e => {
+ if (e.key === "Enter") {
+ navigateMatch(e.shiftKey ? -1 : 1);
+ }
+ });
+ prevBtn.addEventListener("click", () => navigateMatch(-1));
+ nextBtn.addEventListener("click", () => navigateMatch(1));
+ ignoreCaseCb.addEventListener("change", runSearch);
+ regexCb.addEventListener("change", runSearch);
+
+ gotoInput.addEventListener("keydown", e => {
+ if (e.key !== "Enter") {
+ return;
+ }
+ const n = parseInt(gotoInput.value, 10);
+ if (Number.isNaN(n) || n < 1 || n > total) {
+ gotoInput.setAttribute("aria-invalid", "true");
+ return;
+ }
+ gotoInput.removeAttribute("aria-invalid");
+ jumpToItem(n - 1);
+ });
+
+ return gotoBar;
}
/**
- * Render Page content stream as two pre-built views toggled by CSS:
- * - .content-stream-parsed: expandable colorized instruction widget
- * - .content-stream-raw: ref widget(s) mirroring the unparsed display
- * The active view is controlled by the "parse-cs-active" class on #tree.
+ * Build a scrollable panel with a frozen line-number column and a
+ * search/goto toolbar, backed by an IntersectionObserver virtual scroll
+ * that keeps at most MAX_RENDERED_INSTRUCTIONS rows in the DOM at once.
+ *
+ * @param {object} opts
+ * @param {number} opts.total Total number of rows.
+ * @param {string} opts.preClass className(s) for the content
.
+ * @param {Function} opts.getText (i) => plain-text string for search.
+ * @param {Function} opts.makeItemEl (i, isHighlighted) => HTMLElement.
+ * @param {HTMLElement} opts.container Target element; panel is appended here.
*/
-function renderContentStream(val, doc) {
- const frag = document.createDocumentFragment();
+function buildVirtualScrollPanel({
+ total,
+ preClass,
+ getText,
+ makeItemEl,
+ container,
+ actions = null,
+}) {
+ if (total === 0) {
+ return;
+ }
- const parsedEl = document.createElement("span");
- parsedEl.className = "content-stream-parsed";
- parsedEl.append(
- renderExpandable(
- `[Content Stream, ${val.instructions.length} instructions]`,
- "stream-label",
- container => buildInstructionLines(val, container)
- )
+ const scrollEl = document.createElement("div");
+ scrollEl.className = "content-stm-scroll";
+
+ // Left panel: line-number column. Lives outside the scroll container so it
+ // is unaffected by horizontal scroll. Its scrollTop is synced via JS.
+ const numCol = document.createElement("div");
+ numCol.className = "cs-line-nums-col";
+ numCol.style.setProperty("--line-num-width", `${String(total).length}ch`);
+
+ // Right panel: the actual scroll container.
+ const innerEl = document.createElement("div");
+ innerEl.className = "content-stm-inner";
+ innerEl.addEventListener("scroll", () => {
+ numCol.scrollTop = innerEl.scrollTop;
+ });
+
+ // Right panel content: item rows.
+ const pre = document.createElement("div");
+ pre.className = preClass;
+ innerEl.append(pre);
+
+ // Body row: frozen num column + scrollable content side by side.
+ const body = document.createElement("div");
+ body.className = "content-stm-body";
+ body.append(numCol, innerEl);
+
+ // Sentinels bracket the rendered window inside pre:
+ // topSentinel [startIndex .. endIndex) bottomSentinel
+ const topSentinel = document.createElement("div");
+ topSentinel.className = "content-stm-load-sentinel";
+ const bottomSentinel = document.createElement("div");
+ bottomSentinel.className = "content-stm-load-sentinel";
+
+ let startIndex = 0;
+ let endIndex = Math.min(INSTRUCTION_BATCH_SIZE, total);
+ let highlightedIndex = -1;
+
+ function makeNumEl(i) {
+ const item = document.createElement("div");
+ item.className = "cs-num-item";
+ if (i === highlightedIndex) {
+ item.classList.add("cs-match");
+ }
+ item.append(makeSpan("cs-line-num", String(i + 1)));
+ return item;
+ }
+
+ function renderRange(from, to) {
+ const frag = document.createDocumentFragment();
+ for (let i = from; i < to; i++) {
+ frag.append(makeItemEl(i, i === highlightedIndex));
+ }
+ return frag;
+ }
+
+ function renderNumRange(from, to) {
+ const frag = document.createDocumentFragment();
+ for (let i = from; i < to; i++) {
+ frag.append(makeNumEl(i));
+ }
+ return frag;
+ }
+
+ pre.append(topSentinel, renderRange(0, endIndex), bottomSentinel);
+ numCol.append(renderNumRange(0, endIndex));
+
+ function jumpToTarget(targetIndex) {
+ // Clear both the content window and the number column.
+ let el = topSentinel.nextElementSibling;
+ while (el && el !== bottomSentinel) {
+ const next = el.nextElementSibling;
+ el.remove();
+ el = next;
+ }
+ numCol.replaceChildren();
+
+ // Re-render a window centred around the target.
+ const half = Math.floor(MAX_RENDERED_INSTRUCTIONS / 2);
+ startIndex = Math.max(0, targetIndex - half);
+ endIndex = Math.min(total, startIndex + MAX_RENDERED_INSTRUCTIONS);
+ startIndex = Math.max(0, endIndex - MAX_RENDERED_INSTRUCTIONS);
+ topSentinel.after(renderRange(startIndex, endIndex));
+ numCol.append(renderNumRange(startIndex, endIndex));
+
+ // Scroll to centre the target in innerEl.
+ // pre.children: [0]=topSentinel, [1..n]=rows, [n+1]=bottomSentinel
+ const targetEl = pre.children[targetIndex - startIndex + 1];
+ if (targetEl) {
+ const targetRect = targetEl.getBoundingClientRect();
+ const innerRect = innerEl.getBoundingClientRect();
+ const available = innerEl.clientHeight;
+ innerEl.scrollTop +=
+ targetRect.top -
+ innerRect.top -
+ available / 2 +
+ targetEl.clientHeight / 2;
+ }
+ }
+
+ function jumpToItem(i) {
+ pre.querySelector(".cs-match")?.classList.remove("cs-match");
+ numCol.querySelector(".cs-match")?.classList.remove("cs-match");
+ if (i < 0) {
+ highlightedIndex = -1;
+ return;
+ }
+ highlightedIndex = i;
+ jumpToTarget(i);
+ pre.children[i - startIndex + 1]?.classList.add("cs-match");
+ numCol.children[i - startIndex]?.classList.add("cs-match");
+ }
+
+ scrollEl.append(
+ makeSearchToolbar({ total, getText, jumpToItem, actions }),
+ body
+ );
+
+ if (total <= INSTRUCTION_BATCH_SIZE) {
+ container.append(scrollEl);
+ return;
+ }
+
+ const observer = new IntersectionObserver(
+ entries => {
+ for (const entry of entries) {
+ if (!entry.isIntersecting) {
+ continue;
+ }
+
+ if (entry.target === bottomSentinel) {
+ // Append next batch at bottom.
+ const newEnd = Math.min(endIndex + INSTRUCTION_BATCH_SIZE, total);
+ if (newEnd === endIndex) {
+ continue;
+ }
+ bottomSentinel.before(renderRange(endIndex, newEnd));
+ numCol.append(renderNumRange(endIndex, newEnd));
+ endIndex = newEnd;
+
+ // Trim oldest rows from top if window exceeds the max.
+ if (endIndex - startIndex > MAX_RENDERED_INSTRUCTIONS) {
+ const removeCount =
+ endIndex - startIndex - MAX_RENDERED_INSTRUCTIONS;
+ const heightBefore = pre.scrollHeight;
+ for (let i = 0; i < removeCount; i++) {
+ topSentinel.nextElementSibling?.remove();
+ numCol.firstElementChild?.remove();
+ }
+ startIndex += removeCount;
+ // Compensate so the visible content doesn't jump upward.
+ innerEl.scrollTop -= heightBefore - pre.scrollHeight;
+ }
+ } else {
+ // Prepend next batch at top.
+ if (startIndex === 0) {
+ continue;
+ }
+ const newStart = Math.max(0, startIndex - INSTRUCTION_BATCH_SIZE);
+ const scrollBefore = innerEl.scrollTop;
+ const heightBefore = pre.scrollHeight;
+ topSentinel.after(renderRange(newStart, startIndex));
+ numCol.prepend(renderNumRange(newStart, startIndex));
+ // Compensate so the visible content doesn't jump downward.
+ innerEl.scrollTop = scrollBefore + (pre.scrollHeight - heightBefore);
+ startIndex = newStart;
+
+ // Trim oldest rows from bottom if window exceeds the max.
+ if (endIndex - startIndex > MAX_RENDERED_INSTRUCTIONS) {
+ const removeCount =
+ endIndex - startIndex - MAX_RENDERED_INSTRUCTIONS;
+ for (let i = 0; i < removeCount; i++) {
+ bottomSentinel.previousElementSibling?.remove();
+ numCol.lastElementChild?.remove();
+ }
+ endIndex -= removeCount;
+ }
+ }
+ }
+ },
+ { root: innerEl, rootMargin: "200px" }
);
- const rawEl = document.createElement("span");
- rawEl.className = "content-stream-raw";
- const rawVal =
- val.rawContents.length === 1 ? val.rawContents[0] : val.rawContents;
- rawEl.append(renderValue(rawVal, doc));
+ observer.observe(topSentinel);
+ observer.observe(bottomSentinel);
- frag.append(parsedEl, rawEl);
- return frag;
+ container.append(scrollEl);
+}
+
+function makeInstrItemEl(isHighlighted) {
+ const el = document.createElement("div");
+ el.className = "content-stm-instruction";
+ if (isHighlighted) {
+ el.classList.add("cs-match");
+ }
+ return el;
+}
+
+function buildInstructionLines(val, container, actions = null) {
+ const { instructions, cmdNames } = val;
+ const total = instructions.length;
+
+ // Pre-compute indentation depth for every instruction so that any
+ // slice [from, to) can be rendered without replaying from the start.
+ const depths = new Int32Array(total);
+ let d = 0;
+ for (let i = 0; i < total; i++) {
+ const cmd = instructions[i].cmd;
+ if (cmd === "ET" || cmd === "Q" || cmd === "EMC") {
+ d = Math.max(0, d - 1);
+ }
+ depths[i] = d;
+ if (cmd === "BT" || cmd === "q" || cmd === "BDC") {
+ d++;
+ }
+ }
+
+ // Pre-compute a plain-text string per instruction for searching.
+ const instrTexts = instructions.map(instr => {
+ const parts = instr.args.map(tokenToText);
+ if (instr.cmd !== null) {
+ parts.push(instr.cmd);
+ }
+ return parts.join(" ");
+ });
+
+ buildVirtualScrollPanel({
+ total,
+ preClass: "content-stream",
+ getText: i => instrTexts[i],
+ actions,
+ makeItemEl(i, isHighlighted) {
+ const instr = instructions[i];
+ const line = makeInstrItemEl(isHighlighted);
+ // Wrap the instruction content so that indentation shifts the tokens.
+ const content = document.createElement("span");
+ if (depths[i] > 0) {
+ content.style.paddingInlineStart = `${depths[i] * 1.5}em`;
+ }
+ for (const arg of instr.args) {
+ content.append(renderToken(arg));
+ content.append(document.createTextNode(" "));
+ }
+ if (instr.cmd !== null) {
+ const cmdEl = makeSpan("token-cmd", instr.cmd);
+ const opsName = cmdNames[instr.cmd];
+ if (opsName) {
+ cmdEl.title = opsName;
+ }
+ content.append(cmdEl);
+ }
+ line.append(content);
+ return line;
+ },
+ container,
+ });
+}
+
+// Fills container with a raw-bytes virtual-scroll panel.
+function buildRawBytesPanel(rawBytes, container, actions = null) {
+ const lines = rawBytes.split(/\r?\n|\r/);
+ if (lines.at(-1) === "") {
+ lines.pop();
+ }
+ buildVirtualScrollPanel({
+ total: lines.length,
+ preClass: "content-stream raw-bytes-stream",
+ getText: i => lines[i],
+ makeItemEl(i, isHighlighted) {
+ const el = makeInstrItemEl(isHighlighted);
+ el.append(formatBytes(lines[i]));
+ return el;
+ },
+ container,
+ actions,
+ });
+}
+
+// Creates a "Parsed" toggle button. aria-pressed=true means the parsed view
+// is currently active; clicking switches to the other view.
+function makeParseToggleBtn(isParsed, onToggle) {
+ const btn = document.createElement("button");
+ btn.className = "cs-nav-btn";
+ btn.textContent = "Parsed";
+ btn.setAttribute("aria-pressed", String(isParsed));
+ btn.title = isParsed ? "Show raw bytes" : "Show parsed instructions";
+ btn.addEventListener("click", onToggle);
+ return btn;
+}
+
+// Fills container with the content stream panel (parsed or raw), with a
+// toggle button in the toolbar that swaps the view in-place.
+function buildContentStreamPanel(val, container, labelEl = null) {
+ let isParsed = true;
+ const rawBytes = val.rawBytes ?? val.bytes;
+ const rawLines = rawBytes ? rawBytes.split(/\r?\n|\r/) : [];
+ if (rawLines.at(-1) === "") {
+ rawLines.pop();
+ }
+ const parsedLabel = `[Content Stream, ${val.instructions.length} instructions]`;
+ const rawLabel = `[Content Stream, ${rawLines.length} lines]`;
+
+ function rebuild() {
+ container.replaceChildren();
+ if (labelEl) {
+ labelEl.textContent = isParsed ? parsedLabel : rawLabel;
+ }
+ const btn = makeParseToggleBtn(isParsed, () => {
+ isParsed = !isParsed;
+ rebuild();
+ });
+ if (isParsed) {
+ buildInstructionLines(val, container, btn);
+ } else {
+ buildRawBytesPanel(rawBytes, container, btn);
+ }
+ }
+
+ rebuild();
+}
+
+/**
+ * Render Page content stream as an expandable panel with a Parsed/Raw toggle.
+ */
+function renderContentStream(val) {
+ const label = `[Content Stream, ${val.instructions.length} instructions]`;
+ const labelEl = makeSpan("stream-label", label);
+ return makeExpandable(labelEl, label, container =>
+ buildContentStreamPanel(val, container, labelEl)
+ );
}
/**
@@ -526,7 +2871,7 @@ function renderValue(value, doc) {
return makeSpan("name-value", "/" + value.name);
}
- // Content stream (Page Contents) → two pre-built views toggled by CSS
+ // Content stream (Page Contents) → expandable with Parsed/Raw toggle
if (isContentStream(value)) {
return renderContentStream(value, doc);
}
@@ -588,135 +2933,86 @@ function renderRef(ref, doc) {
cacheKey = `${ref.num}:${ref.gen}`;
label = refLabel(ref);
}
-
- const frag = document.createDocumentFragment();
-
- const toggleEl = document.createElement("span");
- toggleEl.textContent = ARROW_COLLAPSED;
- toggleEl.setAttribute("role", "button");
- toggleEl.setAttribute("tabindex", "0");
- toggleEl.setAttribute("aria-expanded", "false");
- toggleEl.setAttribute("aria-label", `Expand reference ${label}`);
-
- const refEl = document.createElement("span");
- refEl.className = "ref";
- refEl.textContent = label;
- refEl.setAttribute("aria-hidden", "true");
-
- const childrenEl = document.createElement("div");
- childrenEl.className = "hidden";
- childrenEl.setAttribute("role", "group");
- childrenEl.setAttribute("aria-label", `Contents of reference ${label}`);
-
- let open = false;
- let loaded = false;
-
- const onToggle = async () => {
- open = !open;
- toggleEl.textContent = open ? ARROW_EXPANDED : ARROW_COLLAPSED;
- toggleEl.setAttribute("aria-expanded", String(open));
- childrenEl.classList.toggle("hidden", !open);
-
- if (open && !loaded) {
- loaded = true;
+ return makeExpandable(
+ makeSpan("ref", label),
+ `reference ${label}`,
+ childrenEl => {
const spinner = document.createElement("div");
spinner.setAttribute("role", "status");
spinner.textContent = "Loading…";
childrenEl.append(spinner);
-
- try {
- if (!refCache.has(cacheKey)) {
- refCache.set(cacheKey, doc.getRawData({ ref }));
- }
- const result = await refCache.get(cacheKey);
- childrenEl.replaceChildren();
- buildChildren(result, doc, childrenEl);
- } catch (err) {
- const errEl = document.createElement("div");
- errEl.setAttribute("role", "alert");
- errEl.textContent = "Error: " + err.message;
- childrenEl.replaceChildren(errEl);
+ markLoading(1);
+ if (!refCache.has(cacheKey)) {
+ refCache.set(cacheKey, doc.getRawData({ ref }));
}
+ refCache
+ .get(cacheKey)
+ .then(result => {
+ childrenEl.replaceChildren();
+ buildChildren(result, doc, childrenEl);
+ })
+ .catch(err => childrenEl.replaceChildren(makeErrorEl(err.message)))
+ .finally(() => markLoading(-1));
}
- };
-
- toggleEl.addEventListener("click", onToggle);
- toggleEl.addEventListener("keydown", e => {
- if (e.key === "Enter" || e.key === " ") {
- e.preventDefault();
- onToggle();
- }
- });
- refEl.addEventListener("click", onToggle);
-
- frag.append(toggleEl);
- frag.append(refEl);
- frag.append(childrenEl);
- return frag;
+ );
}
/**
- * Build a synchronous expand/collapse widget.
- * @param {string} label Text shown on the collapsed line.
- * @param {string} labelClass CSS class for the label.
- * @param {function} buildFn Called with (containerEl) on first open.
+ * Build a shared expand/collapse widget.
+ * labelEl is the element shown between the toggle arrow and the children.
+ * ariaLabel is used for the toggle and group aria-labels.
+ * onFirstOpen(childrenEl) is called once when first expanded (may be async).
*/
-function renderExpandable(label, labelClass, buildFn) {
- const frag = document.createDocumentFragment();
-
+function makeExpandable(labelEl, ariaLabel, onFirstOpen) {
const toggleEl = document.createElement("span");
toggleEl.textContent = ARROW_COLLAPSED;
toggleEl.setAttribute("role", "button");
toggleEl.setAttribute("tabindex", "0");
toggleEl.setAttribute("aria-expanded", "false");
- toggleEl.setAttribute("aria-label", `Expand ${label}`);
-
- const labelEl = document.createElement("span");
- labelEl.className = labelClass;
- labelEl.textContent = label;
+ toggleEl.setAttribute("aria-label", `Expand ${ariaLabel}`);
labelEl.setAttribute("aria-hidden", "true");
const childrenEl = document.createElement("div");
childrenEl.className = "hidden";
childrenEl.setAttribute("role", "group");
- childrenEl.setAttribute("aria-label", `Contents of ${label}`);
-
- let open = false;
- let built = false;
+ childrenEl.setAttribute("aria-label", `Contents of ${ariaLabel}`);
- const onToggle = () => {
+ let open = false,
+ done = false;
+ const toggle = () => {
open = !open;
toggleEl.textContent = open ? ARROW_EXPANDED : ARROW_COLLAPSED;
toggleEl.setAttribute("aria-expanded", String(open));
childrenEl.classList.toggle("hidden", !open);
- if (open && !built) {
- built = true;
- buildFn(childrenEl);
+ if (open && !done) {
+ done = true;
+ onFirstOpen(childrenEl);
}
};
-
- toggleEl.addEventListener("click", onToggle);
+ toggleEl.addEventListener("click", toggle);
toggleEl.addEventListener("keydown", e => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
- onToggle();
+ toggle();
}
});
- labelEl.addEventListener("click", onToggle);
+ labelEl.addEventListener("click", toggle);
- frag.append(toggleEl);
- frag.append(labelEl);
- frag.append(childrenEl);
+ const frag = document.createDocumentFragment();
+ frag.append(toggleEl, labelEl, childrenEl);
return frag;
}
/**
- * Build a DocumentFragment for the byte string.
- * Printable ASCII (0x20–0x7e) runs become plain text nodes.
- * Consecutive non-printable bytes are grouped into a single
- * with each byte as uppercase XX separated by
- * a narrow space.
+ * Build a synchronous expand/collapse widget.
+ * @param {string} label Text shown on the collapsed line.
+ * @param {string} labelClass CSS class for the label.
+ * @param {Function} buildFn Called with (containerEl) on first open.
*/
+function renderExpandable(label, labelClass, buildFn) {
+ return makeExpandable(makeSpan(labelClass, label), label, c => buildFn(c));
+}
+
/**
* Render image data (RGBA Uint8ClampedArray) into a