diff --git a/apps/yaak-proxy/components/FlowList.tsx b/apps/yaak-proxy/components/FlowList.tsx index 4f81483a8..abcd7e952 100644 --- a/apps/yaak-proxy/components/FlowList.tsx +++ b/apps/yaak-proxy/components/FlowList.tsx @@ -877,8 +877,8 @@ const FlowRow = memo(function FlowRow({ : {}), }} className={classNames( - "group/row absolute top-0 left-1.5 right-1.5 grid items-center px-1.5 rounded-md", - "whitespace-nowrap tabular-nums", + "absolute top-0 left-1.5 right-1.5 grid items-center px-1.5 rounded-md whitespace-nowrap", + "tabular-nums", flow.cancelled && "text-text-subtlest", selected ? "text-text bg-surface-highlight group-focus-within/flows:bg-surface-active" @@ -945,7 +945,7 @@ function FlowMark({ flow }: { flow: Flow }) { ) : flow.cancelled ? ( ) : flow.tunnelled ? ( - + ) : open ? ( ) : flow.responseTruncated ? ( @@ -995,51 +995,42 @@ interface CellProps { selected: boolean; } +/** + * The text of an encrypted or refused row: told apart by colour alone, the faintest that stays + * readable on the row (subtle, 4.5:1 on the surface in both default themes), and the full text + * colour while selected, as subtle falls under that on the dark theme's selection. No opacity, + * so the app icon and the mark show as on any row. + */ +function quietText(selected: boolean): string { + return selected ? "text-text" : "text-text-subtle"; +} + +/** A row's number, in the quiet colour */ +function quietNumber(flow: Flow, selected: boolean): ReactElement { + return {flow.number || ""}; +} + /** * An encrypted connection's cell: quiet, and only what is known, so its host, how much it * carried and for how long; nothing read from inside it, so no method, path, status, type, - * query or field. Null for the cells that show as on any row. + * query or field. Null for the cells that show as on any row, the app icon among them. */ function encryptedCell({ column, flow, span, selected }: CellProps): ReactElement | null { - const quiet = classNames(cell, mono, "text-text-subtlest"); + const quiet = classNames(cell, mono, quietText(selected)); switch (column) { - case "number": + case "app": case "started": return null; - case "app": - if (flow.clientPath == null) return ; - return ( - - - - - - ); + case "number": + return quietNumber(flow, selected); case "host": { const { label } = connectionOf(flow); - const colon = label.lastIndexOf(":"); - const port = colon === -1 || label.endsWith("]") ? null : label.slice(colon); - const host = port == null ? label : label.slice(0, colon); return ( - - {host} - {port != null && {port}} - + {label} ); @@ -1082,11 +1073,11 @@ function encryptedCell({ column, flow, span, selected }: CellProps): ReactElemen } /** - * A refused handshake's cell: its host as any row's, the refusal across Type and Size in - * warning, and nothing for the request it never made. Null for the cells that show as on any - * row. + * A refused handshake's cell: its host, number and time in the quiet colour, the refusal across + * Type and Size in warning, and nothing for the request it never made. Null for the cells that + * show as on any row, the app icon among them. */ -function rejectedCell({ column, span }: CellProps): ReactElement | null { +function rejectedCell({ column, flow, span, selected }: CellProps): ReactElement | null { switch (column) { case "method": case "path": @@ -1094,6 +1085,24 @@ function rejectedCell({ column, span }: CellProps): ReactElement | null { case "query": case "size": return ; + case "number": + return quietNumber(flow, selected); + case "host": { + const host = hostOf(flow.url); + return ( + + + {host} + + + ); + } + case "time": + return ( + + {flow.elapsedMs == null ? "" : formatMillis(flow.elapsedMs)} + + ); case "type": return (