Skip to content

Commit 21896af

Browse files
quic-boyucquic-boyuc
committed
Improve compare info table readability
1 parent 9aec846 commit 21896af

2 files changed

Lines changed: 60 additions & 23 deletions

File tree

‎devtools/fx_viewer/templates/compare.js‎

Lines changed: 58 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -904,39 +904,75 @@ class FXGraphCompare {
904904
return el;
905905
};
906906

907-
const allProps = [];
907+
const visViewerPairs = this.viewers
908+
.map((v, i) => ({ v, name: this._viewerNames[i] }))
909+
.filter(({ name }) => this._visibleViewers.has(name));
910+
const sections = [{ key: 'base', title: null, props: [] }];
911+
const sectionByKey = new Map([['base', sections[0]]]);
908912
const rowData = new Map();
913+
const addProp = (section, prop) => {
914+
if (!section.props.includes(prop)) section.props.push(prop);
915+
};
916+
const addSection = (key, title) => {
917+
if (!sectionByKey.has(key)) {
918+
const section = { key, title, props: [] };
919+
sectionByKey.set(key, section);
920+
sections.push(section);
921+
}
922+
return sectionByKey.get(key);
923+
};
924+
909925
nodeIdMap.forEach((nid, v) => {
910926
const node = v.store.activeNodeMap.get(nid);
911927
if (!node) return;
912-
const props = { id: nid, op: node.op || '', ...(node.info || {}) };
913-
Object.keys(props).forEach((k) => { if (!allProps.includes(k)) allProps.push(k); });
914-
rowData.set(v, props);
928+
const baseNode = (v.store.baseData.nodes || []).find((n) => n.id === nid) || node;
929+
const bySection = new Map();
930+
const baseProps = { id: nid, op: baseNode.op || node.op || '', ...(baseNode.info || {}) };
931+
Object.keys(baseProps).forEach((prop) => addProp(sections[0], prop));
932+
bySection.set('base', baseProps);
933+
934+
const activeExtensions = Array.from(v.controller?.state?.activeExtensions || []);
935+
activeExtensions.forEach((extId) => {
936+
const ext = v.store.extensions && v.store.extensions[extId];
937+
const extNode = ext && ext.nodes && ext.nodes[nid];
938+
if (!extNode || !extNode.info) return;
939+
const title = ext.name || extId;
940+
const section = addSection(`ext:${extId}`, title);
941+
const props = { ...extNode.info };
942+
Object.keys(props).forEach((prop) => addProp(section, prop));
943+
bySection.set(section.key, props);
944+
});
945+
946+
rowData.set(v, bySection);
915947
});
916948

917949
// Header row
918950
this._infoRow.appendChild(makeCell('fx-compare-info-hdr fx-compare-info-prop', 'Property'));
919-
this._viewerNames.forEach((name) => {
920-
if (!this._visibleViewers.has(name)) return;
951+
visViewerPairs.forEach(({ name }) => {
921952
this._infoRow.appendChild(makeCell('fx-compare-info-hdr', name));
922953
});
923954

924-
// Data rows
925-
allProps.forEach((prop, idx) => {
926-
const rowCls = idx % 2 === 1 ? ' fx-compare-info-row-alt' : '';
927-
const visViewerPairs = this.viewers
928-
.map((v, i) => ({ v, name: this._viewerNames[i] }))
929-
.filter(({ name }) => this._visibleViewers.has(name));
930-
const vals = visViewerPairs.map(({ v }) => {
931-
const d = rowData.get(v);
932-
if (!d || d[prop] === undefined) return ' -- ';
933-
const raw = d[prop];
934-
return (raw !== null && typeof raw === 'object') ? JSON.stringify(raw, null, 2) : String(raw);
935-
});
936-
const allSame = vals.every((v) => v === vals[0]);
937-
this._infoRow.appendChild(makeCell('fx-compare-info-prop' + rowCls, prop));
938-
vals.forEach((val) => {
939-
this._infoRow.appendChild(makeCell('fx-compare-info-val' + rowCls + (allSame ? '' : ' fx-compare-info-diff'), val));
955+
let rowIdx = 0;
956+
sections.forEach((section) => {
957+
if (section.props.length === 0) return;
958+
if (section.title) {
959+
this._infoRow.appendChild(makeCell('fx-compare-info-section', section.title));
960+
}
961+
section.props.forEach((prop) => {
962+
const rowCls = rowIdx % 2 === 1 ? ' fx-compare-info-row-alt' : '';
963+
rowIdx++;
964+
const vals = visViewerPairs.map(({ v }) => {
965+
const bySection = rowData.get(v);
966+
const d = bySection && bySection.get(section.key);
967+
if (!d || d[prop] === undefined) return ' -- ';
968+
const raw = d[prop];
969+
return (raw !== null && typeof raw === 'object') ? JSON.stringify(raw, null, 2) : String(raw);
970+
});
971+
const allSame = vals.every((v) => v === vals[0]);
972+
this._infoRow.appendChild(makeCell('fx-compare-info-prop' + rowCls, prop));
973+
vals.forEach((val) => {
974+
this._infoRow.appendChild(makeCell('fx-compare-info-val' + rowCls + (allSame ? '' : ' fx-compare-info-diff'), val));
975+
});
940976
});
941977
});
942978
}

‎devtools/fx_viewer/templates/fx_graph_viewer.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -300,9 +300,10 @@ class FXGraphViewer {
300300
.fx-compare-canvas-cell { overflow: hidden; border-left: 6px solid var(--cmp-border-strong); position: relative; }
301301
.fx-compare-canvas-cell .fx-main-area { min-width: 0; width: 100%; height: 100%; }
302302
.fx-compare-info-row { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: subgrid; align-content: start; border-top: 3px solid var(--cmp-border-strong); overflow: visible; font-size: 13px; background: var(--cmp-info-bg); }
303-
.fx-compare-info-prop { font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--cmp-border); background: var(--cmp-prop-bg); border-right: 2px solid var(--cmp-border-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: sticky; left: 0; z-index: 2; letter-spacing: 0.2px; }
303+
.fx-compare-info-prop { font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--cmp-border); background: var(--cmp-prop-bg); border-right: 2px solid var(--cmp-border-strong); min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; position: sticky; left: 0; z-index: 2; letter-spacing: 0.2px; }
304304
.fx-compare-info-val { font-family: monospace; padding: 6px 12px; border-bottom: 1px solid var(--cmp-border); border-left: 2px solid var(--cmp-border-strong); min-width: 0; overflow: hidden; white-space: normal; word-break: break-word; }
305305
.fx-compare-info-hdr { font-weight: 700; padding: 7px 10px; border-bottom: 3px solid var(--cmp-border-strong); border-left: 6px solid var(--cmp-border-strong); background: var(--cmp-hdr-bg); position: sticky; top: 0; min-width: 0; overflow: hidden; white-space: normal; word-break: break-word; z-index: 1; letter-spacing: 0.4px; font-size: 12px; text-transform: uppercase; }
306+
.fx-compare-info-section { grid-column: 1 / -1; padding: 7px 10px; font-weight: 700; font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; border-top: 2px solid var(--cmp-border-strong); border-bottom: 1px solid var(--cmp-border); background: var(--cmp-hdr-bg); position: sticky; left: 0; z-index: 2; }
306307
.fx-compare-info-diff { background: var(--cmp-diff-bg); border-left: 3px solid var(--cmp-diff-accent); }
307308
.fx-compare-info-row-alt { background: rgba(0,0,0,0.018); }
308309
.fx-compare-root:fullscreen, .fx-compare-root:-webkit-full-screen, .fx-compare-root:-moz-full-screen, .fx-compare-root:-ms-fullscreen { background: var(--cmp-bg); color: var(--cmp-text); width: 100vw; height: 100vh; overflow-y: auto; overflow-x: hidden; }

0 commit comments

Comments
 (0)