` namespace boundary emitted by the two-tone label helper, never
- * mid-word inside a class or method name.
- */
- .yii-debug-grid td.yii-debug-cell-fqcn {
- overflow-wrap: normal;
- }
-
- /**
- * Shared collapsible section. The summary carries the heading and, on the
- * far side, the expand/collapse hint; both wordings ship in the markup and
- * only the one matching the `open` state is revealed, so the affordance
- * never invites a click it cannot honour.
- */
- .yii-debug-disclosure {
- overflow: hidden;
- margin-bottom: var(--yii-debug-space-5);
- border: var(--yii-debug-border);
- border-radius: var(--yii-debug-radius-lg);
- background: var(--yii-debug-panel-surface);
-
- &[open] > .yii-debug-disclosure-summary {
- border-bottom: var(--yii-debug-border);
- }
- }
-
- .yii-debug-disclosure-summary {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--yii-debug-space-3);
- padding: 10px var(--yii-debug-space-4);
- cursor: pointer;
- list-style: none;
- transition: background-color 120ms ease;
-
- &::-webkit-details-marker {
- display: none;
- }
-
- &:hover,
- &:focus-visible {
- background: var(--yii-debug-panel-surface-hover);
- }
- }
-
- /* Shared accent label for collapsed and populated Request sections. */
- .yii-debug-disclosure-title,
- .yii-debug-request-section-title,
- .yii-debug-diagnostic-heading-copy h2 {
- color: var(--yii-debug-panel-primary-strong);
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-xs);
- font-weight: 700;
- letter-spacing: 0.12em;
- text-transform: uppercase;
- }
-
- .yii-debug-disclosure-hint {
- color: var(--yii-debug-panel-muted);
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-xs);
- letter-spacing: 0.06em;
- text-transform: uppercase;
- transition: color 120ms ease;
-
- [data-yii-debug-hint="expanded"] {
- display: none;
- }
- }
-
- .yii-debug-disclosure-summary:hover .yii-debug-disclosure-hint,
- .yii-debug-disclosure-summary:focus-visible .yii-debug-disclosure-hint {
- color: var(--yii-debug-panel-link);
- }
-
- details[open] > summary .yii-debug-disclosure-hint {
- [data-yii-debug-hint="collapsed"] {
- display: none;
- }
-
- [data-yii-debug-hint="expanded"] {
- display: inline;
- }
- }
-
- .yii-debug-disclosure-body {
- padding: var(--yii-debug-space-4);
-
- > pre {
- margin: 0;
- overflow-wrap: anywhere;
- color: var(--yii-debug-panel-text);
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-xs);
- line-height: 1.6;
- white-space: pre-wrap;
- }
- }
-
- /**
- * Long-content clamp for grid cells: the body collapses to a few lines
- * behind a fade-out, and the pill toggle expands it in place (wired by
- * the `cell-more` delegation in debug.min.js).
- */
- .yii-debug-cell-more-body {
- position: relative;
- max-height: 156px;
- overflow: hidden;
- }
-
- /**
- * A clamped table folds taller than a clamped cell: 156px leaves barely
- * three rows, too few to judge whether the rest is worth expanding.
- */
- .yii-debug-cell-more-body:has(.yii-debug-table) {
- max-height: 420px;
- }
-
- .yii-debug-cell-more-body::after {
- content: "";
- position: absolute;
- inset: auto 0 0;
- height: 32px;
- background: linear-gradient(
- to bottom,
- transparent,
- var(--yii-debug-panel-surface)
- );
- pointer-events: none;
- }
-
- .yii-debug-cell-more.is-open .yii-debug-cell-more-body {
- max-height: none;
- }
-
- .yii-debug-cell-more.is-open .yii-debug-cell-more-body::after {
- content: none;
- }
-
- .yii-debug-cell-more-toggle {
- display: inline-flex;
- align-items: center;
- margin-top: 6px;
- padding: 2px 10px;
- border: var(--yii-debug-border);
- border-radius: var(--yii-debug-radius-pill);
-
- /* Native `button` element: reset the UA chrome the pill styling replaces. */
- background: transparent;
- color: var(--yii-debug-panel-link);
- font-family: inherit;
- font-size: var(--yii-debug-fs-xs);
- font-weight: 600;
- cursor: pointer;
-
- &::before {
- content: "";
- display: inline-block;
- width: 1.25em;
- height: 1.25em;
- margin-right: var(--yii-debug-space-1);
- border-radius: 50%;
- background:
- linear-gradient(currentcolor, currentcolor) center / 8px 2px no-repeat,
- linear-gradient(currentcolor, currentcolor) center / 2px 8px no-repeat,
- var(--yii-debug-panel-bg-accent);
- }
- }
-
- .yii-debug-cell-more.is-open .yii-debug-cell-more-toggle::before {
- background:
- linear-gradient(currentcolor, currentcolor) center / 8px 2px no-repeat,
- var(--yii-debug-panel-bg-accent);
- }
-
- .yii-debug-cell-more-toggle:hover,
- .yii-debug-cell-more-toggle:focus {
- background: var(--yii-debug-panel-bg-accent);
- border-color: var(--yii-debug-panel-primary);
- text-decoration: none;
- }
-
- .yii-debug-grid td.yii-debug-cell-mono {
- font-family: var(--yii-debug-font-mono);
- }
-
- /**
- * Payload cells (Inertia prop values) hold a JSON summary that has no spaces
- * to break on. `width: 100%` hands the column the slack the sized columns
- * leave, and `anywhere` lets the value wrap inside it rather than widening
- * the table past the panel.
- */
- td.yii-debug-cell-payload {
- width: 100%;
- overflow-wrap: anywhere;
- }
-
- .yii-debug-grid td.yii-debug-cell-numeric {
- font-variant-numeric: tabular-nums;
- text-align: right;
- }
-
- /* Sort-icons rendered by GridView sort links (`a.asc`/`a.desc` or appended marker-span dialect). */
- a.asc::after,
- a.desc::after,
- .yii-debug-sort-asc::after,
- .yii-debug-sort-desc::after {
- margin-left: 4px;
- content: "↑";
- font-size: 0.85em;
- opacity: 0.78;
- }
-
- a.desc::after,
- .yii-debug-sort-desc::after {
- content: "↓";
- }
-
- /**
- * -------------------------------------------------------------------
- * Pager.
- * -------------------------------------------------------------------
- */
-
- .yii-debug-pager {
- display: flex;
- flex-wrap: wrap;
- gap: var(--yii-debug-space-1);
- margin: var(--yii-debug-space-3) 0 0;
- padding: 0;
- list-style: none;
- }
-
- .yii-debug-pager-item {
- display: inline-flex;
+ .yii-debug-pager-item {
+ display: inline-flex;
}
.yii-debug-pager-link,
.yii-debug-pager > li > :is(a, span) {
display: inline-flex;
align-items: center;
- justify-content: center;
- min-width: 40px;
- min-height: 40px;
- padding: 0 10px;
- border: var(--yii-debug-border);
- border-radius: var(--yii-debug-radius-pill);
- background: var(--yii-debug-panel-surface);
- color: var(--yii-debug-panel-link);
- font-size: var(--yii-debug-fs-sm);
- font-weight: 600;
- text-decoration: none;
- transition:
- border-color 0.12s ease,
- background 0.12s ease,
- color 0.12s ease;
-
- &:hover,
- &:focus {
- border-color: color-mix(
- in srgb,
- var(--yii-debug-panel-primary),
- transparent 30%
- );
- background: var(--yii-debug-panel-surface-hover);
- color: var(--yii-debug-panel-link-hover);
- text-decoration: none;
- }
- }
-
- .yii-debug-pager-item.is-active .yii-debug-pager-link {
- border-color: transparent;
- background: var(--yii-debug-primary-bg);
- color: var(--yii-debug-on-primary);
- cursor: default;
- }
-
- .yii-debug-pager-item.is-disabled .yii-debug-pager-link {
- background: var(--yii-debug-panel-surface-muted);
- color: var(--yii-debug-panel-muted);
- cursor: not-allowed;
- pointer-events: none;
- }
-
- /**
- * -------------------------------------------------------------------
- * Forms.
- * -------------------------------------------------------------------
- */
-
- .yii-debug-field {
- display: flex;
- flex-direction: column;
- gap: 4px;
- margin-bottom: var(--yii-debug-space-3);
- }
-
- .yii-debug-field-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
- gap: var(--yii-debug-space-3) var(--yii-debug-space-4);
- margin-bottom: var(--yii-debug-space-3);
- }
-
- .yii-debug-label {
- color: var(--yii-debug-panel-text);
- font-size: var(--yii-debug-fs-sm);
- font-weight: 600;
- }
-
- .yii-debug-input,
- .yii-debug-select,
- .yii-debug-textarea {
- width: 100%;
- min-height: 32px;
- padding: 6px 10px;
- border: 1px solid var(--yii-debug-panel-border-strong);
- border-radius: var(--yii-debug-radius-md);
- background: var(--yii-debug-panel-surface);
- color: var(--yii-debug-panel-text);
- font-family: inherit;
- font-size: var(--yii-debug-fs-sm);
- transition:
- border-color 0.12s ease,
- box-shadow 0.12s ease;
-
- &:hover {
- border-color: color-mix(
- in srgb,
- var(--yii-debug-panel-primary),
- var(--yii-debug-panel-border-strong) 60%
- );
- }
-
- &:focus {
- border-color: var(--yii-debug-panel-primary);
- box-shadow: 0 0 0 3px
- color-mix(in srgb, var(--yii-debug-panel-primary), transparent 82%);
- }
-
- &::placeholder {
- color: var(--yii-debug-panel-muted);
- }
- }
-
- .yii-debug-textarea {
- min-height: 96px;
- line-height: 1.45;
- resize: vertical;
- }
-
- /* GridView filter-row inputs. */
- .yii-debug-grid .filters td {
- padding: 6px 12px;
- border-bottom: var(--yii-debug-border);
- background: color-mix(
- in srgb,
- var(--yii-debug-panel-surface-muted),
- transparent 30%
- );
- }
-
- .yii-debug-grid .filters input,
- .yii-debug-grid .filters select,
- .yii-debug-grid .filters textarea {
- width: 100%;
- min-width: 0;
- min-height: 28px;
- padding: 4px 8px;
- border: 1px solid var(--yii-debug-panel-border-strong);
- border-radius: var(--yii-debug-radius-sm);
- background: var(--yii-debug-panel-surface);
- color: var(--yii-debug-panel-text);
- font: inherit;
- font-size: var(--yii-debug-fs-xs);
-
- &:focus {
- border-color: var(--yii-debug-panel-primary);
- box-shadow: 0 0 0 2px
- color-mix(in srgb, var(--yii-debug-panel-primary), transparent 84%);
- }
- }
-
- /**
- * -------------------------------------------------------------------
- * Tabs.
- * -------------------------------------------------------------------
- */
-
- .yii-debug-tabs {
- display: flex;
- flex-wrap: wrap;
- gap: var(--yii-debug-space-1);
- margin: 0 0 var(--yii-debug-space-3);
- padding: 0;
- list-style: none;
- border-bottom: var(--yii-debug-border);
- }
-
- .yii-debug-tab {
- display: inline-flex;
- }
-
- .yii-debug-tab-link {
- display: inline-flex;
- align-items: center;
- padding: 8px 14px;
- border-bottom: 2px solid transparent;
- color: var(--yii-debug-panel-muted);
- font-size: var(--yii-debug-fs-sm);
- font-weight: 600;
- text-decoration: none;
- transition:
- color 0.12s ease,
- border-color 0.12s ease;
-
- &:hover,
- &:focus {
- color: var(--yii-debug-panel-text);
- text-decoration: none;
- }
- }
-
- .yii-debug-tab.is-active .yii-debug-tab-link,
- .yii-debug-tab-link.is-active {
- border-bottom-color: var(--yii-debug-panel-primary);
- color: var(--yii-debug-panel-text);
- }
-
- .yii-debug-tab-panel {
- display: none;
- padding: var(--yii-debug-space-3) 0 0;
- }
-
- .yii-debug-tab-panel.is-active {
- display: block;
- }
-
- /* Collapsible section (used by mail panel filter form). */
- .yii-debug-collapsible {
- display: none;
- margin-top: var(--yii-debug-space-3);
-
- &.is-open {
- display: block;
- }
- }
-
- /**
- * -------------------------------------------------------------------
- * Dropdown.
- * -------------------------------------------------------------------
- */
-
- .yii-debug-dropdown {
- position: relative;
- display: inline-block;
- }
-
- .yii-debug-dropdown-menu {
- display: none;
- position: absolute;
- top: calc(100% + 4px);
- left: 0;
- z-index: 100;
- min-width: 220px;
- margin: 0;
- padding: 4px;
- border: var(--yii-debug-border-strong);
- border-radius: var(--yii-debug-radius-md);
- background: var(--yii-debug-panel-surface);
- box-shadow: var(--yii-debug-shadow-md);
- list-style: none;
- }
-
- .yii-debug-dropdown.is-open .yii-debug-dropdown-menu {
- display: block;
- }
-
- .yii-debug-dropdown-item {
- display: block;
- padding: 6px 10px;
- border-radius: var(--yii-debug-radius-sm);
- color: var(--yii-debug-panel-text);
+ justify-content: center;
+ min-width: 40px;
+ min-height: 40px;
+ padding: 0 10px;
+ border: var(--yii-debug-border);
+ border-radius: var(--yii-debug-radius-pill);
+ background: var(--yii-debug-panel-surface);
+ color: var(--yii-debug-panel-link);
font-size: var(--yii-debug-fs-sm);
+ font-weight: 600;
text-decoration: none;
+ transition:
+ border-color 0.12s ease,
+ background 0.12s ease,
+ color 0.12s ease;
&:hover,
&:focus {
- background: var(--yii-debug-panel-surface-hover);
- color: var(--yii-debug-panel-link-hover);
- text-decoration: none;
- }
- }
-
- /**
- * -------------------------------------------------------------------
- * Panel-specific helpers.
- * -------------------------------------------------------------------
- * Inter-message delta navigation buttons in the Log panel.
- */
- .yii-debug-since-previous {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- white-space: nowrap;
-
- .yii-debug-since-previous-btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 24px;
- height: 24px;
- padding: 0 6px;
- border: var(--yii-debug-border);
- border-radius: var(--yii-debug-radius-sm);
- background: var(--yii-debug-panel-surface);
- color: var(--yii-debug-panel-link);
- font-size: var(--yii-debug-fs-xs);
- font-weight: 700;
- text-decoration: none;
- }
- }
-
- /**
- * ------------------------------------------------------------------
- * "Quiet Console" key/value table — used by Request, Session, $_SERVER
- * panels. Reads like a typeset man-page entry: muted-uppercase keys, full
- * monospace values, sticky header, hairline row separators, accent bar on
- * hover. No internal cell borders — the card carries the only outline.
- * ------------------------------------------------------------------
- */
- .yii-debug-table-mono {
- min-width: 0; /* override the GridView-friendly min-width: 640px */
-
- thead th {
- position: sticky;
- top: 0;
- z-index: 1;
- padding: 8px 16px;
- background: color-mix(
+ border-color: color-mix(
in srgb,
- var(--yii-debug-panel-surface-muted),
- transparent 10%
+ var(--yii-debug-panel-primary),
+ transparent 30%
);
- backdrop-filter: blur(6px);
- font-family: var(--yii-debug-font-sans);
- font-size: var(--yii-debug-fs-xs);
- letter-spacing: 0.12em;
- }
-
- tbody tr {
- transition: background-color 0.14s ease;
- }
-
- /**
- * Accent bar on hover — appears on the left edge of the row without
- * shifting layout. The 3-pixel inset shadow doubles as a focus indicator.
- */
- tbody tr:hover td,
- tbody tr:hover th {
background: var(--yii-debug-panel-surface-hover);
+ color: var(--yii-debug-panel-link-hover);
+ text-decoration: none;
}
-
- tbody tr:hover th {
- box-shadow: inset 3px 0 0 var(--yii-debug-panel-primary);
- color: var(--yii-debug-panel-text);
- }
-
- /**
- * Use the same monospace font + size on both columns so the row reads as a
- * single line of typeset code. Hierarchy comes from color/weight, not size.
- */
- tbody th,
- tbody td {
- padding: 12px 16px;
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-sm);
- line-height: 1.55;
- }
-
- tbody th {
- width: 1%; /* collapse to content; min-width below sets the floor. */
- min-width: 120px;
- max-width: 220px;
- color: var(--yii-debug-panel-muted);
- font-weight: 500;
- letter-spacing: 0.02em;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- transition:
- color 0.14s ease,
- box-shadow 0.14s ease;
- }
-
- tbody td {
- color: var(--yii-debug-panel-text);
- word-break: normal;
- overflow-wrap: anywhere;
- }
-
- /* Hairline row separators only — no borders around individual cells. */
- tbody tr + tr td,
- tbody tr + tr th {
- border-top: 1px solid
- color-mix(in srgb, var(--yii-debug-panel-border) 55%, transparent);
- }
-
- /* Soften the existing zebra so the hover lift reads more clearly. */
- tbody tr:nth-child(even) td,
- tbody tr:nth-child(even) th {
- background: color-mix(
- in srgb,
- var(--yii-debug-panel-surface-muted),
- transparent 70%
- );
- }
- }
-
- .yii-debug-table-overview tbody th {
- width: 200px;
- min-width: 160px;
- max-width: 200px;
- }
-
- .yii-debug-panel-group + .yii-debug-panel-group {
- margin-top: var(--yii-debug-space-6);
- }
-
- /**
- * Request key/value tables wrap safely at narrow widths. Keep scrolling on
- * the page instead of turning every Request section into a nested viewport.
- */
- .yii-debug-table-wrap:has(> .yii-debug-table-mono) {
- overflow: clip;
- border-radius: var(--yii-debug-radius-md);
- box-shadow:
- var(--yii-debug-shadow-sm),
- inset 0 0 0 1px
- color-mix(in srgb, var(--yii-debug-panel-border) 60%, transparent);
- }
-
- .yii-debug-table-mono {
- min-width: 0;
-
- tbody th {
- overflow-wrap: anywhere;
- white-space: normal;
- }
- }
-
- /**
- * User-switch grid — single-line cells with semantic per-column widths
- * and horizontal scroll on overflow.
- *
- * Column widths are driven by per-column classes (`.yii-debug-col-userswitch-*`)
- * applied via `UserPanel::$filterColumns` instead of fragile `nth-child`
- * selectors. `nowrap` keeps every row one row tall; if the sum of columns
- * exceeds the panel width the wrapping `.yii-debug-table-wrap` provides
- * `overflow-x: auto` so wider content stays reachable.
- */
- .yii-debug-table-userswitch {
- width: auto;
- min-width: 100%;
-
- thead th,
- tbody td,
- tbody th {
- overflow-wrap: normal;
- white-space: nowrap;
- }
-
- /* Filter inputs grow with their cell instead of clinging to a fixed width. */
- tbody tr.filters td input {
- width: 100%;
- min-width: 0;
- }
- }
-
- /* ID column — 10 digits + tabular numerals so IDs stay aligned. */
- .yii-debug-col-userswitch-id {
- min-width: 10ch;
- font-variant-numeric: tabular-nums;
- }
-
- /* Username — short identifier, room for typical handles. */
- .yii-debug-col-userswitch-username {
- min-width: 14ch;
- }
-
- /* Email — fits a full address without ellipsis. */
- .yii-debug-col-userswitch-email {
- min-width: 24ch;
- }
-
- /* Status flag — narrow numeric column, centered for scannability. */
- .yii-debug-col-userswitch-status {
- min-width: 8ch;
- text-align: center;
- }
-
- /* Timestamps formatted as `YYYY-MM-DD HH:MM`. */
- .yii-debug-col-userswitch-timestamp {
- min-width: 18ch;
- font-variant-numeric: tabular-nums;
- }
-
- /* Pointer affordance for click-to-switch rows in the user-switch grid. */
- .yii-debug-table-pointer tbody tr {
- cursor: pointer;
- transition: background-color 120ms ease;
}
- .yii-debug-table-pointer tbody tr:hover {
- background: color-mix(
- in srgb,
- var(--yii-debug-panel-primary),
- transparent 86%
- );
+ .yii-debug-pager-item.is-active .yii-debug-pager-link {
+ border-color: transparent;
+ background: var(--yii-debug-primary-bg);
+ color: var(--yii-debug-on-primary);
+ cursor: default;
}
- /* Small total-duration line shown at the top of the Timeline panel. */
- .yii-debug-timeline-duration {
- margin: 0 0 var(--yii-debug-space-3);
+ .yii-debug-pager-item.is-disabled .yii-debug-pager-link {
+ background: var(--yii-debug-panel-surface-muted);
color: var(--yii-debug-panel-muted);
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-sm);
- letter-spacing: 0.04em;
+ cursor: not-allowed;
+ pointer-events: none;
}
/**
- * ────────────────────────────────────────────────────────────────────
- * User panel — "Personnel Dossier"
- * Identity card with monogram avatar, status pill, and semantic sections.
- * Sensitive values masked behind a click-to-reveal pill.
- * ────────────────────────────────────────────────────────────────────
+ * -------------------------------------------------------------------
+ * Forms.
+ * -------------------------------------------------------------------
*/
- .yii-debug-user {
+
+ .yii-debug-field {
display: flex;
flex-direction: column;
- gap: var(--yii-debug-space-3);
+ gap: 4px;
+ margin-bottom: var(--yii-debug-space-3);
}
- .yii-debug-user-card {
- position: relative;
- display: grid;
- grid-template-columns: auto 1fr;
- gap: var(--yii-debug-space-4);
- align-items: center;
- padding: var(--yii-debug-space-4) var(--yii-debug-space-5);
- border: var(--yii-debug-border);
- border-radius: var(--yii-debug-radius-lg);
- background:
- radial-gradient(
- circle at top right,
- color-mix(in srgb, var(--yii-debug-panel-primary), transparent 80%),
- transparent 60%
- ),
- var(--yii-debug-panel-surface);
- box-shadow: var(--yii-debug-shadow-sm);
- overflow: hidden;
+ .yii-debug-label {
+ color: var(--yii-debug-panel-text);
+ font-size: var(--yii-debug-fs-sm);
+ font-weight: 600;
}
- .yii-debug-user-avatar {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 64px;
- height: 64px;
- flex: none;
- border-radius: 50%;
- background: linear-gradient(
- 135deg,
- var(--yii-debug-panel-primary),
- var(--yii-debug-info)
- );
- box-shadow:
- 0 4px 12px
- color-mix(in srgb, var(--yii-debug-panel-primary), transparent 50%),
- inset 0 1px 0 rgb(255 255 255 / 22%);
- color: #fff;
- font-family: var(--yii-debug-font-mono);
- font-size: 28px;
- font-weight: 700;
- letter-spacing: -0.02em;
+ .yii-debug-input,
+ .yii-debug-select {
+ width: 100%;
+ min-height: 32px;
+ padding: 6px 10px;
+ border: 1px solid var(--yii-debug-panel-border-strong);
+ border-radius: var(--yii-debug-radius-md);
+ background: var(--yii-debug-panel-surface);
+ color: var(--yii-debug-panel-text);
+ font-family: inherit;
+ font-size: var(--yii-debug-fs-sm);
+ transition:
+ border-color 0.12s ease,
+ box-shadow 0.12s ease;
+
+ &:hover {
+ border-color: color-mix(
+ in srgb,
+ var(--yii-debug-panel-primary),
+ var(--yii-debug-panel-border-strong) 60%
+ );
+ }
+
+ &:focus {
+ border-color: var(--yii-debug-panel-primary);
+ box-shadow: 0 0 0 3px
+ color-mix(in srgb, var(--yii-debug-panel-primary), transparent 82%);
+ }
+
+ &::placeholder {
+ color: var(--yii-debug-panel-muted);
+ }
}
- .yii-debug-user-meta {
- display: flex;
- flex-direction: column;
- gap: 4px;
- min-width: 0;
+ /* GridView filter-row inputs. */
+ .yii-debug-grid .filters td {
+ padding: 6px 12px;
+ border-bottom: var(--yii-debug-border);
+ background: color-mix(
+ in srgb,
+ var(--yii-debug-panel-surface-muted),
+ transparent 30%
+ );
}
- .yii-debug-user-name {
- margin: 0;
+ .yii-debug-grid .filters input,
+ .yii-debug-grid .filters select,
+ .yii-debug-grid .filters textarea {
+ width: 100%;
+ min-width: 0;
+ min-height: 28px;
+ padding: 4px 8px;
+ border: 1px solid var(--yii-debug-panel-border-strong);
+ border-radius: var(--yii-debug-radius-sm);
+ background: var(--yii-debug-panel-surface);
color: var(--yii-debug-panel-text);
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-xl);
- font-weight: 700;
- letter-spacing: -0.01em;
- line-height: 1.2;
- }
+ font: inherit;
+ font-size: var(--yii-debug-fs-xs);
- .yii-debug-user-handle {
- margin: 0;
- color: var(--yii-debug-panel-muted);
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-sm);
+ &:focus {
+ border-color: var(--yii-debug-panel-primary);
+ box-shadow: 0 0 0 2px
+ color-mix(in srgb, var(--yii-debug-panel-primary), transparent 84%);
+ }
}
- .yii-debug-user-tags {
+ /**
+ * -------------------------------------------------------------------
+ * Tabs.
+ * -------------------------------------------------------------------
+ */
+
+ .yii-debug-tabs {
display: flex;
flex-wrap: wrap;
- gap: 8px;
- margin-top: 6px;
+ gap: var(--yii-debug-space-1);
+ margin: 0 0 var(--yii-debug-space-3);
+ padding: 0;
+ list-style: none;
+ border-bottom: var(--yii-debug-border);
}
- .yii-debug-user-status {
+ .yii-debug-tab {
display: inline-flex;
- align-items: center;
- gap: 6px;
- padding: 4px 12px 4px 8px;
- border-radius: var(--yii-debug-radius-pill);
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-xs);
- font-weight: 700;
- letter-spacing: 0.06em;
- text-transform: uppercase;
-
- &::before {
- content: "";
- width: 7px;
- height: 7px;
- border-radius: 50%;
- background: currentcolor;
- }
}
- .yii-debug-user-status-success {
- background: color-mix(in srgb, var(--yii-debug-success), transparent 84%);
- color: var(--yii-debug-success);
+ .yii-debug-tab-link {
+ display: inline-flex;
+ align-items: center;
+ padding: 8px 14px;
+ border-bottom: 2px solid transparent;
+ color: var(--yii-debug-panel-muted);
+ font-size: var(--yii-debug-fs-sm);
+ font-weight: 600;
+ text-decoration: none;
+ transition:
+ color 0.12s ease,
+ border-color 0.12s ease;
- &::before {
- animation: yii-debug-user-pulse 2.4s ease-in-out infinite;
- box-shadow: 0 0 0 0
- color-mix(in srgb, var(--yii-debug-success), transparent 30%);
+ &:hover,
+ &:focus {
+ color: var(--yii-debug-panel-text);
+ text-decoration: none;
}
}
- .yii-debug-user-status-danger {
- background: color-mix(in srgb, var(--yii-debug-danger), transparent 84%);
- color: var(--yii-debug-danger);
+ .yii-debug-tab.is-active .yii-debug-tab-link,
+ .yii-debug-tab-link.is-active {
+ border-bottom-color: var(--yii-debug-panel-primary);
+ color: var(--yii-debug-panel-text);
}
- .yii-debug-user-status-warning {
- background: color-mix(in srgb, var(--yii-debug-warning), transparent 84%);
- color: var(--yii-debug-warning);
+ .yii-debug-tab-panel {
+ display: none;
+ padding: var(--yii-debug-space-3) 0 0;
}
- .yii-debug-user-status-muted {
- background: var(--yii-debug-panel-surface-muted);
- color: var(--yii-debug-panel-muted);
+ .yii-debug-tab-panel.is-active {
+ display: block;
}
- .yii-debug-user-pill {
+ /**
+ * -------------------------------------------------------------------
+ * Panel-specific helpers.
+ * -------------------------------------------------------------------
+ * Inter-message delta navigation buttons in the Log panel.
+ */
+ .yii-debug-since-previous {
display: inline-flex;
align-items: center;
- padding: 4px 10px;
- border: 1px solid var(--yii-debug-panel-border);
- border-radius: var(--yii-debug-radius-pill);
- color: var(--yii-debug-panel-muted);
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-xs);
- letter-spacing: 0.04em;
- }
-
- .yii-debug-user-section {
- border: var(--yii-debug-border);
- border-radius: var(--yii-debug-radius-md);
- background: var(--yii-debug-panel-surface);
- overflow: hidden;
+ gap: 4px;
+ white-space: nowrap;
- > header {
- display: flex;
+ .yii-debug-since-previous-btn {
+ display: inline-flex;
align-items: center;
- gap: 10px;
- padding: 10px var(--yii-debug-space-3);
- border-bottom: var(--yii-debug-border);
- background: var(--yii-debug-panel-surface-muted);
- color: var(--yii-debug-panel-muted);
- font-family: var(--yii-debug-font-sans);
+ justify-content: center;
+ min-width: 24px;
+ height: 24px;
+ padding: 0 6px;
+ border: var(--yii-debug-border);
+ border-radius: var(--yii-debug-radius-sm);
+ background: var(--yii-debug-panel-surface);
+ color: var(--yii-debug-panel-link);
font-size: var(--yii-debug-fs-xs);
font-weight: 700;
- letter-spacing: 0.06em;
- text-transform: uppercase;
+ text-decoration: none;
}
+ }
- dl {
- margin: 0;
- padding: 0;
+ /**
+ * ------------------------------------------------------------------
+ * "Quiet Console" key/value table — used by Request, Session, $_SERVER
+ * panels. Reads like a typeset man-page entry: muted-uppercase keys, full
+ * monospace values, sticky header, hairline row separators, accent bar on
+ * hover. No internal cell borders — the card carries the only outline.
+ * ------------------------------------------------------------------
+ */
+ .yii-debug-table-mono {
+ min-width: 0; /* override the GridView-friendly min-width: 640px */
+
+ thead th {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ padding: 8px 16px;
+ background: color-mix(
+ in srgb,
+ var(--yii-debug-panel-surface-muted),
+ transparent 10%
+ );
+ backdrop-filter: blur(6px);
+ font-family: var(--yii-debug-font-sans);
+ font-size: var(--yii-debug-fs-xs);
+ letter-spacing: 0.12em;
}
- }
- .yii-debug-user-section-icon {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 18px;
- height: 18px;
- color: var(--yii-debug-panel-primary);
+ tbody tr {
+ transition: background-color 0.14s ease;
+ }
- svg {
- width: 100%;
- height: 100%;
+ /**
+ * Accent bar on hover — appears on the left edge of the row without
+ * shifting layout. The 3-pixel inset shadow doubles as a focus indicator.
+ */
+ tbody tr:hover td,
+ tbody tr:hover th {
+ background: var(--yii-debug-panel-surface-hover);
}
- }
- .yii-debug-user-row {
- display: grid;
- grid-template-columns: minmax(140px, 22%) 1fr;
- gap: var(--yii-debug-space-3);
- padding: 12px var(--yii-debug-space-3);
- border-bottom: 1px solid
- color-mix(in srgb, var(--yii-debug-panel-border) 50%, transparent);
+ tbody tr:hover th {
+ box-shadow: inset 3px 0 0 var(--yii-debug-panel-primary);
+ color: var(--yii-debug-panel-text);
+ }
- &:last-child {
- border-bottom: 0;
+ /**
+ * Use the same monospace font + size on both columns so the row reads as a
+ * single line of typeset code. Hierarchy comes from color/weight, not size.
+ */
+ tbody th,
+ tbody td {
+ padding: 12px 16px;
+ font-family: var(--yii-debug-font-mono);
+ font-size: var(--yii-debug-fs-sm);
+ line-height: 1.55;
}
- dt {
- align-self: center;
+ tbody th {
+ width: 1%; /* collapse to content; min-width below sets the floor. */
+ min-width: 120px;
+ max-width: 220px;
color: var(--yii-debug-panel-muted);
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-xs);
+ font-weight: 500;
letter-spacing: 0.02em;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ transition:
+ color 0.14s ease,
+ box-shadow 0.14s ease;
}
- dd {
- margin: 0;
- min-width: 0;
+ tbody td {
+ color: var(--yii-debug-panel-text);
+ word-break: normal;
+ overflow-wrap: anywhere;
+ }
+
+ /* Hairline row separators only — no borders around individual cells. */
+ tbody tr + tr td,
+ tbody tr + tr th {
+ border-top: 1px solid
+ color-mix(in srgb, var(--yii-debug-panel-border) 55%, transparent);
+ }
+
+ /* Soften the existing zebra so the hover lift reads more clearly. */
+ tbody tr:nth-child(even) td,
+ tbody tr:nth-child(even) th {
+ background: color-mix(
+ in srgb,
+ var(--yii-debug-panel-surface-muted),
+ transparent 70%
+ );
}
}
- .yii-debug-user-value {
- color: var(--yii-debug-panel-text);
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-sm);
- word-break: break-all;
+ .yii-debug-table-overview tbody th {
+ width: 200px;
+ min-width: 160px;
+ max-width: 200px;
}
- .yii-debug-user-empty {
- color: color-mix(in srgb, var(--yii-debug-panel-muted), transparent 35%);
- font-family: var(--yii-debug-font-mono);
+ .yii-debug-panel-group + .yii-debug-panel-group {
+ margin-top: var(--yii-debug-space-6);
}
- .yii-debug-user-time {
- display: inline-flex;
- align-items: baseline;
- gap: 10px;
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-sm);
+ /**
+ * Request key/value tables wrap safely at narrow widths. Keep scrolling on
+ * the page instead of turning every Request section into a nested viewport.
+ */
+ .yii-debug-table-wrap:has(> .yii-debug-table-mono) {
+ overflow: clip;
+ border-radius: var(--yii-debug-radius-md);
+ box-shadow:
+ var(--yii-debug-shadow-sm),
+ inset 0 0 0 1px
+ color-mix(in srgb, var(--yii-debug-panel-border) 60%, transparent);
+ }
- .yii-debug-user-time-rel {
- color: var(--yii-debug-panel-text);
- font-weight: 600;
- }
+ .yii-debug-table-mono {
+ min-width: 0;
- .yii-debug-user-time-abs {
- color: var(--yii-debug-panel-muted);
- font-size: var(--yii-debug-fs-xs);
+ tbody th {
+ overflow-wrap: anywhere;
+ white-space: normal;
}
}
/**
- * Click-to-reveal pill for sensitive fields. Native button so the keyboard
- * toggles it for free; CSS swaps mask/value via `.is-revealed`.
+ * User-switch grid — single-line cells with semantic per-column widths
+ * and horizontal scroll on overflow.
+ *
+ * Column widths are driven by per-column classes (`.yii-debug-col-userswitch-*`)
+ * applied via `UserPanel::$filterColumns` instead of fragile `nth-child`
+ * selectors. `nowrap` keeps every row one row tall; if the sum of columns
+ * exceeds the panel width the wrapping `.yii-debug-table-wrap` provides
+ * `overflow-x: auto` so wider content stays reachable.
*/
- .yii-debug-user-reveal {
- display: inline-flex;
- align-items: center;
- gap: 12px;
- padding: 6px 6px 6px 14px;
- border: 1px solid
- color-mix(in srgb, var(--yii-debug-panel-border) 80%, transparent);
- border-radius: var(--yii-debug-radius-pill);
- background: var(--yii-debug-panel-surface-muted);
- color: var(--yii-debug-panel-text);
- font: inherit;
- cursor: pointer;
- text-align: left;
- transition:
- border-color 0.14s ease,
- background 0.14s ease;
-
- &:hover,
- &:focus {
- border-color: var(--yii-debug-panel-primary);
- }
+ .yii-debug-table-userswitch {
+ width: auto;
+ min-width: 100%;
- .yii-debug-user-mask,
- .yii-debug-user-real {
- font-family: var(--yii-debug-font-mono);
- font-size: var(--yii-debug-fs-sm);
+ thead th,
+ tbody td,
+ tbody th {
+ overflow-wrap: normal;
+ white-space: nowrap;
}
- .yii-debug-user-mask {
- letter-spacing: 0.1em;
- color: var(--yii-debug-panel-muted);
+ /* Filter inputs grow with their cell instead of clinging to a fixed width. */
+ tbody tr.filters td input {
+ width: 100%;
+ min-width: 0;
}
+ }
- .yii-debug-user-real {
- display: none;
- max-width: 60ch;
- overflow-wrap: anywhere;
- color: var(--yii-debug-panel-text);
- }
+ /* ID column — 10 digits + tabular numerals so IDs stay aligned. */
+ .yii-debug-col-userswitch-id {
+ min-width: 10ch;
+ font-variant-numeric: tabular-nums;
+ }
- .yii-debug-user-reveal-cta {
- flex: none;
- padding: 3px 10px;
- border-radius: var(--yii-debug-radius-pill);
- background: color-mix(
- in srgb,
- var(--yii-debug-panel-primary),
- transparent 80%
- );
- color: var(--yii-debug-panel-primary);
- font-size: var(--yii-debug-fs-xs);
- font-weight: 700;
- letter-spacing: 0.08em;
- text-transform: uppercase;
+ /* Username — short identifier, room for typical handles. */
+ .yii-debug-col-userswitch-username {
+ min-width: 14ch;
+ }
- &::before {
- content: "Reveal";
- }
- }
+ /* Email — fits a full address without ellipsis. */
+ .yii-debug-col-userswitch-email {
+ min-width: 24ch;
+ }
- &.is-revealed {
- .yii-debug-user-mask {
- display: none;
- }
+ /* Status flag — narrow numeric column, centered for scannability. */
+ .yii-debug-col-userswitch-status {
+ min-width: 8ch;
+ text-align: center;
+ }
- .yii-debug-user-real {
- display: inline;
- }
+ /* Timestamps formatted as `YYYY-MM-DD HH:MM`. */
+ .yii-debug-col-userswitch-timestamp {
+ min-width: 18ch;
+ font-variant-numeric: tabular-nums;
+ }
- .yii-debug-user-reveal-cta {
- background: color-mix(
- in srgb,
- var(--yii-debug-warning),
- transparent 84%
- );
- color: var(--yii-debug-warning);
+ /* Pointer affordance for click-to-switch rows in the user-switch grid. */
+ .yii-debug-table-pointer tbody tr {
+ cursor: pointer;
+ transition: background-color 120ms ease;
+ }
- &::before {
- content: "Hide";
- }
- }
- }
+ .yii-debug-table-pointer tbody tr:hover {
+ background: color-mix(
+ in srgb,
+ var(--yii-debug-panel-primary),
+ transparent 86%
+ );
}
/**
@@ -3132,25 +2075,6 @@
}
}
- /**
- * Trailing CTA inside the summary strip (e.g. "Latest →" on the index).
- * Sits to the right of the bucket pills; visually a small primary link.
- */
- .yii-debug-grid-summary-action {
- margin-left: auto;
- color: var(--yii-debug-panel-primary-strong);
- font-weight: 700;
- letter-spacing: 0;
- text-transform: none;
- text-decoration: none;
-
- &:hover,
- &:focus-visible {
- color: var(--yii-debug-panel-link-hover);
- text-decoration: underline;
- }
- }
-
/**
* Footer slot below the GridView table — `Showing N-M of T items.` summary
* pinned to the left, pager pinned to the right, both vertically centered on
@@ -3468,45 +2392,12 @@
/**
* -------------------------------------------------------------------
* Queue panel — request-scoped roster of `Yii::$app->queue->push()` /
- * exec / error events. The default view is a paginated GridView with
- * filter row (status, driver, component, job class, job id); each row
- * is a one-click jump to a dedicated detail page that renders the full
- * payload tree, error block, schedule chips, and a live lifecycle pill
- * (waiting / reserved / done) queried once against the originating
- * queue component. Card markup (`.yii-debug-queue-card*`) lives further
- * below and powers the detail page only.
+ * exec / error events, rendered as cards (`.yii-debug-queue-card*`,
+ * further below) and a dedicated job page with the full payload tree,
+ * error block, schedule chips, and a live lifecycle pill (waiting /
+ * reserved / done) queried once against the originating queue component.
* -------------------------------------------------------------------
*/
- .yii-debug-queue-grid-job {
- display: flex;
- flex-direction: column;
- gap: 2px;
- line-height: 1.2;
- }
-
- .yii-debug-queue-grid-job-link {
- color: var(--yii-debug-text-strong);
- font-weight: 600;
- text-decoration: none;
- white-space: nowrap;
- }
-
- .yii-debug-queue-grid-job-link:hover {
- text-decoration: underline;
- }
-
- .yii-debug-queue-grid-job-namespace {
- color: var(--yii-debug-text-muted);
- font-family: var(--yii-debug-font-mono);
- font-size: 0.78rem;
- white-space: nowrap;
- }
-
- .yii-debug-grid-queue .yii-debug-queue-status,
- .yii-debug-grid-queue .yii-debug-queue-driver {
- white-space: nowrap;
- }
-
.yii-debug-queue-job-page {
display: flex;
flex-direction: column;
@@ -4296,26 +3187,23 @@
}
/**
- * The ID column (History tag SHA and Queue job id) shares a single
- * baseline width so the filter input renders identically across panels
- * and the 13-character hex never wraps even when the filter is open.
- * Width is sized to fit the 13-character SHA + breathing room.
+ * The ID column (History tag SHA) keeps a baseline width so the
+ * 13-character hex never wraps even when the filter is open. Width is
+ * sized to fit the 13-character SHA + breathing room.
*/
- .yii-debug-col-id,
- .yii-debug-col-queue-id {
+ .yii-debug-col-id {
min-width: 120px;
white-space: nowrap;
}
/**
- * Pin the ID filter inputs to a fixed compact width across panels so
- * the search box never stretches with the column on wide viewports —
- * sized to fit the 13-character SHA without spilling into empty space.
- * Higher specificity than `.yii-debug-grid .filters input { width: 100% }`
- * so this wins regardless of source order.
+ * Pin the ID filter input to a fixed compact width so the search box
+ * never stretches with the column on wide viewports — sized to fit the
+ * 13-character SHA without spilling into empty space. Higher specificity
+ * than `.yii-debug-grid .filters input { width: 100% }` so this wins
+ * regardless of source order.
*/
- .yii-debug-grid .filters input.yii-debug-col-id-input,
- .yii-debug-grid .filters input.yii-debug-col-queue-id-input {
+ .yii-debug-grid .filters input.yii-debug-col-id-input {
box-sizing: border-box;
width: 104px;
}
@@ -4521,10 +3409,6 @@
white-space: nowrap;
}
- .yii-debug-break {
- word-break: break-all;
- }
-
/* "Not set" marker used in some views. */
.yii-debug-not-set {
color: var(--yii-debug-danger);
@@ -4546,6 +3430,14 @@
font-variant-numeric: tabular-nums;
}
+ /**
+ * The readout stretches to the rail width and inherits the tabular
+ * digits, so right-aligning it lines the units up down the column.
+ */
+ .yii-debug-gauge-value {
+ text-align: right;
+ }
+
.yii-debug-gauge-bar {
display: block;
height: 3px;
@@ -4563,6 +3455,12 @@
background: var(--yii-debug-gauge-fill);
}
+ /* Profiling Info nesting: one muted arrow per span level, set off from the label. */
+ .yii-debug-indent {
+ margin-inline-end: var(--yii-debug-space-1);
+ color: var(--yii-debug-panel-muted);
+ }
+
/**
* ===================================================================
* Configuration + PhpInfo panel — "terminal schematic" design system.
@@ -6513,19 +5411,6 @@
}
}
-@keyframes yii-debug-user-pulse {
- 0%,
- 100% {
- opacity: 1;
- transform: scale(1);
- }
-
- 50% {
- opacity: 0.55;
- transform: scale(0.85);
- }
-}
-
@keyframes yii-debug-readout-in {
from {
opacity: 0;
diff --git a/resources/src/styles/primitives.css b/resources/src/styles/primitives.css
index b51a40a..3e779aa 100644
--- a/resources/src/styles/primitives.css
+++ b/resources/src/styles/primitives.css
@@ -263,7 +263,6 @@
.yii-debug-btn,
.yii-debug-brand-chip,
.yii-debug-cell-more-toggle,
- .yii-debug-dropdown-item,
.yii-debug-filter-input,
.yii-debug-heading-permalink,
.yii-debug-server-group-summary,
diff --git a/resources/src/styles/request.css b/resources/src/styles/request.css
new file mode 100644
index 0000000..7763a77
--- /dev/null
+++ b/resources/src/styles/request.css
@@ -0,0 +1,614 @@
+/* Request panel: overview rail, header and server diagnostics, and the route resolution trace. */
+.yii-debug {
+ /**
+ * Request overview — a continuous telemetry rail for identity, response,
+ * runtime metrics, and capture metadata.
+ */
+ .yii-debug-request-hero {
+ margin-bottom: var(--yii-debug-space-4);
+ padding: var(--yii-debug-space-3) var(--yii-debug-space-4);
+ border: var(--yii-debug-border);
+ border-radius: var(--yii-debug-radius-md);
+ background: var(--yii-debug-panel-surface-muted);
+ box-shadow: var(--yii-debug-shadow-sm);
+ }
+
+ .yii-debug-request-overview {
+ overflow: hidden;
+ margin-bottom: var(--yii-debug-space-4);
+ border: var(--yii-debug-border);
+ border-inline-start: 4px solid
+ color-mix(
+ in srgb,
+ var(--yii-debug-hue, var(--yii-debug-panel-muted)) 76%,
+ var(--yii-debug-panel-text)
+ );
+ border-radius: var(--yii-debug-radius-lg);
+ background: var(--yii-debug-panel-surface);
+ box-shadow: var(--yii-debug-shadow-sm);
+ }
+
+ .yii-debug-request-overview-header {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: var(--yii-debug-space-4);
+ align-items: center;
+ padding: var(--yii-debug-space-4);
+ }
+
+ .yii-debug-request-overview-identity {
+ min-width: 0;
+ }
+
+ .yii-debug-request-hero-line {
+ display: flex;
+ align-items: center;
+ gap: var(--yii-debug-space-2);
+ min-width: 0;
+ font-family: var(--yii-debug-font-mono);
+ font-size: var(--yii-debug-fs-base);
+ }
+
+ /* Colors come from the shared vocabulary chip formula (see Semantic vocabulary). */
+ .yii-debug-request-hero-method {
+ flex: none;
+ padding: 2px 10px;
+ border-radius: var(--yii-debug-radius-pill);
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ }
+
+ .yii-debug-request-hero-url {
+ flex: 1 1 auto;
+ min-width: 0;
+ overflow: hidden;
+ color: var(--yii-debug-panel-text);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .yii-debug-request-hero-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 6px var(--yii-debug-space-3);
+ margin-top: 6px;
+ color: var(--yii-debug-panel-muted);
+ font-family: var(--yii-debug-font-mono);
+ font-size: var(--yii-debug-fs-xs);
+
+ &:empty {
+ display: none;
+ }
+ }
+
+ .yii-debug-request-hero-meta-item {
+ display: inline-flex;
+ align-items: baseline;
+ gap: var(--yii-debug-space-1);
+ }
+
+ .yii-debug-request-hero-meta-label {
+ font-family: var(--yii-debug-font-sans);
+ font-size: 0.625rem;
+ font-weight: 700;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+ }
+
+ .yii-debug-request-hero-meta-value {
+ color: var(--yii-debug-panel-text);
+ }
+
+ .yii-debug-request-overview-status {
+ min-width: 72px;
+ text-align: right;
+ }
+
+ .yii-debug-request-overview-metrics {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+ margin: 0;
+ border-block: var(--yii-debug-border);
+ background: var(--yii-debug-panel-surface-muted);
+ }
+
+ .yii-debug-request-overview-metric {
+ min-width: 0;
+ padding: var(--yii-debug-space-3) var(--yii-debug-space-4);
+
+ & + & {
+ border-inline-start: var(--yii-debug-border);
+ }
+
+ dt {
+ margin-bottom: 2px;
+ color: var(--yii-debug-panel-muted);
+ font-size: 0.6875rem;
+ font-weight: 700;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+ }
+
+ dd {
+ display: flex;
+ min-width: 0;
+ flex-wrap: wrap;
+ align-items: center;
+ margin: 0;
+ gap: var(--yii-debug-space-2);
+ color: var(--yii-debug-panel-text);
+ font-family: var(--yii-debug-font-mono);
+ font-size: var(--yii-debug-fs-sm);
+ font-weight: 600;
+ overflow-wrap: anywhere;
+ }
+ }
+
+ .yii-debug-request-overview-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--yii-debug-space-2) var(--yii-debug-space-5);
+ padding: var(--yii-debug-space-3) var(--yii-debug-space-4);
+ color: var(--yii-debug-panel-muted);
+ font-family: var(--yii-debug-font-mono);
+ font-size: var(--yii-debug-fs-xs);
+ }
+
+ .yii-debug-request-overview-config {
+ display: inline-flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--yii-debug-space-2);
+ margin-inline-start: auto;
+ }
+
+ .yii-debug-request-overview-meta-item {
+ display: inline-flex;
+ min-width: 0;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .yii-debug-request-overview-meta-label {
+ margin-bottom: 2px;
+ color: var(--yii-debug-panel-muted);
+ font-family: var(--yii-debug-font-sans);
+ font-size: 0.6875rem;
+ font-weight: 700;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+ }
+
+ .yii-debug-request-overview-tag {
+ overflow: hidden;
+ max-width: 34ch;
+ color: var(--yii-debug-panel-text);
+ font-family: var(--yii-debug-font-mono);
+ font-size: var(--yii-debug-fs-sm);
+ font-weight: 600;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ /**
+ * Composed Request + routing view. The request overview remains one
+ * continuous execution rail; routing metadata and failures extend that rail
+ * instead of introducing another stack of nested cards.
+ */
+ .yii-debug-request-routing-error {
+ margin: 0;
+ border-width: 1px 0 0 4px;
+ border-radius: 0;
+
+ p {
+ margin: 0;
+ }
+ }
+
+ .yii-debug-request-tabs {
+ min-width: 0;
+
+ > .yii-debug-tabs {
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ scrollbar-width: thin;
+ }
+
+ .yii-debug-tab {
+ flex: none;
+ }
+
+ .yii-debug-empty-state {
+ padding: var(--yii-debug-space-4);
+
+ h2 {
+ margin: 0;
+ font-size: var(--yii-debug-fs-base);
+ }
+ }
+ }
+
+ /**
+ * Request diagnostic ledgers. Headers read as an HTTP exchange rather than
+ * two unrelated tables; server variables read as one grouped execution
+ * record. Both keep the captured keys and values as the primary visual ink.
+ */
+ .yii-debug-diagnostic-shell {
+ overflow: hidden;
+ border: var(--yii-debug-border);
+ border-radius: var(--yii-debug-radius-lg);
+ background: var(--yii-debug-panel-surface);
+ box-shadow: var(--yii-debug-shadow-sm);
+ }
+
+ .yii-debug-diagnostic-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--yii-debug-space-4);
+ padding: var(--yii-debug-space-3) var(--yii-debug-space-4);
+ border-bottom: var(--yii-debug-border);
+ background: var(--yii-debug-panel-surface-muted);
+ }
+
+ .yii-debug-diagnostic-heading-copy {
+ display: flex;
+ min-width: 0;
+ flex-wrap: wrap;
+ align-items: baseline;
+ gap: var(--yii-debug-space-2) var(--yii-debug-space-3);
+
+ h2 {
+ margin: 0;
+ }
+ }
+
+ .yii-debug-diagnostic-counts {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--yii-debug-space-2);
+ }
+
+ .yii-debug-diagnostic-count,
+ .yii-debug-diagnostic-total,
+ .yii-debug-header-lane-count,
+ .yii-debug-server-group-count {
+ color: var(--yii-debug-panel-muted);
+ font-family: var(--yii-debug-font-mono);
+ font-size: var(--yii-debug-fs-xs);
+ font-variant-numeric: tabular-nums;
+ }
+
+ .yii-debug-diagnostic-count {
+ display: inline-flex;
+ align-items: baseline;
+ gap: var(--yii-debug-space-1);
+ }
+
+ .yii-debug-diagnostic-count + .yii-debug-diagnostic-count::before {
+ width: 1px;
+ height: 12px;
+ margin-inline-end: var(--yii-debug-space-1);
+ background: var(--yii-debug-panel-border-strong);
+ content: "";
+ }
+
+ .yii-debug-diagnostic-count-value {
+ color: var(--yii-debug-panel-text);
+ font-weight: 700;
+ }
+
+ .yii-debug-diagnostic-filter {
+ width: min(280px, 42%);
+ max-width: none;
+ background: var(--yii-debug-panel-surface);
+ }
+
+ .yii-debug-header-lanes {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .yii-debug-header-lane {
+ position: relative;
+ min-width: 0;
+ }
+
+ .yii-debug-header-lane + .yii-debug-header-lane {
+ border-inline-start: 2px solid
+ color-mix(
+ in srgb,
+ var(--yii-debug-panel-primary) 36%,
+ var(--yii-debug-panel-border)
+ );
+
+ &::before {
+ position: absolute;
+ z-index: 1;
+ top: 25px;
+ inset-inline-start: -5px;
+ width: 8px;
+ height: 8px;
+ border: 2px solid var(--yii-debug-panel-surface);
+ border-radius: var(--yii-debug-radius-pill);
+ background: var(--yii-debug-panel-primary);
+ content: "";
+ }
+ }
+
+ .yii-debug-header-lane-header {
+ display: flex;
+ min-height: 58px;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--yii-debug-space-3);
+ padding: 10px var(--yii-debug-space-4);
+ border-bottom: var(--yii-debug-border);
+
+ h3 {
+ margin: 1px 0 0;
+ font-size: var(--yii-debug-fs-base);
+ }
+ }
+
+ .yii-debug-header-direction {
+ display: block;
+ color: var(--yii-debug-panel-primary-strong);
+ font-family: var(--yii-debug-font-mono);
+ font-size: 0.6875rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ }
+
+ .yii-debug-diagnostic-ledger {
+ margin: 0;
+ }
+
+ .yii-debug-diagnostic-row {
+ display: grid;
+ grid-template-columns: minmax(132px, 0.72fr) minmax(0, 1.28fr);
+ align-items: start;
+ border-top: 1px solid
+ color-mix(in srgb, var(--yii-debug-panel-border) 58%, transparent);
+
+ &:first-child {
+ border-top: 0;
+ }
+
+ &:hover {
+ background: var(--yii-debug-panel-surface-hover);
+ }
+
+ dt,
+ dd {
+ min-width: 0;
+ padding: 10px var(--yii-debug-space-4);
+ font-family: var(--yii-debug-font-mono);
+ font-size: var(--yii-debug-fs-sm);
+ line-height: 1.5;
+ }
+
+ dt {
+ overflow: hidden;
+ color: var(--yii-debug-panel-muted);
+ font-weight: 600;
+ overflow-wrap: anywhere;
+ }
+
+ dd {
+ margin: 0;
+ border-inline-start: 1px solid
+ color-mix(in srgb, var(--yii-debug-panel-border) 45%, transparent);
+ color: var(--yii-debug-panel-text);
+ overflow-wrap: anywhere;
+ white-space: pre-wrap;
+ }
+ }
+
+ .yii-debug-header-ledger .yii-debug-diagnostic-row:nth-child(even),
+ .yii-debug-server-ledger .yii-debug-diagnostic-row:nth-child(even) {
+ background: color-mix(
+ in srgb,
+ var(--yii-debug-panel-surface-muted),
+ transparent 72%
+ );
+
+ &:hover {
+ background: var(--yii-debug-panel-surface-hover);
+ }
+ }
+
+ .yii-debug-diagnostic-values {
+ display: grid;
+ gap: 6px;
+ }
+
+ .yii-debug-diagnostic-value-count {
+ color: var(--yii-debug-panel-muted);
+ font-family: var(--yii-debug-font-sans);
+ font-size: 0.6875rem;
+ }
+
+ .yii-debug-diagnostic-value-list {
+ display: grid;
+ gap: var(--yii-debug-space-1);
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ li + li {
+ padding-top: var(--yii-debug-space-1);
+ border-top: 1px dashed var(--yii-debug-panel-border);
+ }
+ }
+
+ .yii-debug-diagnostic-empty-value,
+ .yii-debug-diagnostic-lane-empty,
+ .yii-debug-diagnostic-empty-state,
+ .yii-debug-diagnostic-filter-empty {
+ color: var(--yii-debug-panel-muted);
+ font-style: italic;
+ }
+
+ .yii-debug-diagnostic-lane-empty,
+ .yii-debug-diagnostic-empty-state,
+ .yii-debug-diagnostic-filter-empty {
+ margin: 0;
+ padding: var(--yii-debug-space-4);
+ }
+
+ .yii-debug-diagnostic-filter-empty {
+ border-top: var(--yii-debug-border);
+ text-align: center;
+ }
+
+ .yii-debug-server-group-body > .yii-debug-mini-toolbar {
+ margin: 0;
+ padding: var(--yii-debug-space-2) var(--yii-debug-space-4);
+ border-bottom: var(--yii-debug-border);
+
+ .yii-debug-filter-input {
+ max-width: 100%;
+ }
+ }
+
+ .yii-debug-server-additional + .yii-debug-server-group,
+ .yii-debug-server-group + .yii-debug-server-group {
+ border-top: var(--yii-debug-border);
+ }
+
+ .yii-debug-server-group-summary {
+ display: flex;
+ min-height: 44px;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--yii-debug-space-3);
+ padding: 9px var(--yii-debug-space-4);
+ border-bottom: var(--yii-debug-border);
+ background: var(--yii-debug-panel-surface-muted);
+
+ .yii-debug-server-group-title {
+ margin: 0;
+ font-size: var(--yii-debug-fs-sm);
+ font-weight: 700;
+ }
+ }
+
+ .yii-debug-server-group-summary {
+ cursor: pointer;
+ list-style: none;
+
+ &::-webkit-details-marker {
+ display: none;
+ }
+
+ &:hover,
+ &:focus-visible {
+ background: var(--yii-debug-panel-surface-hover);
+ }
+ }
+
+ .yii-debug-server-group-identity {
+ display: inline-flex;
+ align-items: baseline;
+ gap: var(--yii-debug-space-2);
+ }
+
+ .yii-debug-server-group:not([open]) > .yii-debug-server-group-summary {
+ border-bottom: 0;
+ }
+
+ .yii-debug-server-group-summary .yii-debug-disclosure-hint {
+ margin-inline-start: auto;
+ }
+
+ .yii-debug-diagnostic-row[hidden],
+ .yii-debug-header-lane[hidden],
+ .yii-debug-server-group[hidden],
+ .yii-debug-diagnostic-filter-empty[hidden] {
+ display: none;
+ }
+
+ @container yii-debug-main (width <= 900px) {
+ .yii-debug-header-lanes {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
+ .yii-debug-header-lane + .yii-debug-header-lane {
+ border-top: 2px solid
+ color-mix(
+ in srgb,
+ var(--yii-debug-panel-primary) 36%,
+ var(--yii-debug-panel-border)
+ );
+ border-inline-start: 0;
+
+ &::before {
+ top: -5px;
+ inset-inline-start: var(--yii-debug-space-4);
+ }
+ }
+ }
+
+ @container yii-debug-main (width <= 560px) {
+ .yii-debug-diagnostic-header {
+ align-items: stretch;
+ flex-direction: column;
+ }
+
+ .yii-debug-diagnostic-filter {
+ width: 100%;
+ }
+
+ .yii-debug-diagnostic-row {
+ grid-template-columns: minmax(0, 1fr);
+
+ dt {
+ padding-bottom: var(--yii-debug-space-1);
+ }
+
+ dd {
+ padding-top: 0;
+ border-inline-start: 0;
+ }
+ }
+ }
+
+ .yii-debug-route-resolution {
+ margin: var(--yii-debug-space-3) var(--yii-debug-space-4) var(--yii-debug-space-4);
+ }
+
+ .yii-debug-route-resolution-message {
+ margin: 0 0 var(--yii-debug-space-3);
+ color: var(--yii-debug-panel-muted);
+ font-size: var(--yii-debug-fs-sm);
+ }
+
+ .yii-debug-route-trace {
+ min-width: 560px;
+ }
+
+ .yii-debug-table.yii-debug-route-trace {
+ thead th,
+ tbody td {
+ text-align: center;
+ }
+
+ thead th:nth-child(2),
+ tbody td:nth-child(2) {
+ text-align: start;
+ }
+
+ thead th:first-child,
+ tbody td:first-child {
+ width: 56px;
+ }
+
+ thead th:last-child,
+ tbody td:last-child {
+ width: 160px;
+ }
+ }
+}
diff --git a/resources/src/toolbar/focus.js b/resources/src/toolbar/focus.js
index 81f1476..b002ea0 100644
--- a/resources/src/toolbar/focus.js
+++ b/resources/src/toolbar/focus.js
@@ -69,16 +69,11 @@ function toolbarDrawerMessageData(event, origin, frameWindow) {
return event.data;
}
-export function requestParentToolbarDrawerClose(
- event,
- browserWindow,
- dropdownWasOpen,
-) {
+export function requestParentToolbarDrawerClose(event, browserWindow) {
if (
!event ||
event.key !== "Escape" ||
event.defaultPrevented ||
- dropdownWasOpen ||
!browserWindow.parent ||
browserWindow.parent === browserWindow
) {
diff --git a/resources/tests/debug-bootstrap.test.js b/resources/tests/debug-bootstrap.test.js
index dd27170..9cfa271 100644
--- a/resources/tests/debug-bootstrap.test.js
+++ b/resources/tests/debug-bootstrap.test.js
@@ -2,7 +2,7 @@
import assert from "node:assert/strict";
import { test, vi } from "vitest";
-import { bootDebugPage, fire, settle } from "./debug-page-harness.js";
+import { bootDebugPage, fire, press, settle } from "./debug-page-harness.js";
/**
* The Database panel feature is the failure fixture: it is the only module the
@@ -231,3 +231,48 @@ test("a panel feature failure without a main region only flags the page", async
"No region means no callout.",
);
});
+
+test("Escape asks the parent toolbar to close the drawer", async () => {
+ const page = await bootDebugPage({
+ body: "Panel
",
+ parent: "frame",
+ });
+
+ press(page.document.querySelector("p"), "Escape");
+
+ await settle(page.window);
+
+ assert.deepEqual(
+ page.posts,
+ [
+ {
+ data: { source: "yii-debug-toolbar", type: "close-drawer" },
+ origin: "https://debug.test",
+ },
+ ],
+ "Host toolbar must be asked to close.",
+ );
+});
+
+test("Escape on a standalone page posts nothing", async () => {
+ const page = await bootDebugPage({ body: "Panel
" });
+
+ press(page.document.querySelector("p"), "Escape");
+
+ await settle(page.window);
+
+ assert.equal(page.posts.length, 0, "There is no drawer to close.");
+});
+
+test("a keydown on the document itself is ignored", async () => {
+ const page = await bootDebugPage({ body: "Panel
", parent: "frame" });
+ const event = fire(page.document, "keydown", {
+ cancelable: true,
+ key: "ArrowDown",
+ });
+
+ await settle(page.window);
+
+ assert.equal(event.defaultPrevented, false, "A targetless key stays live.");
+ assert.equal(page.posts.length, 0, "Only Escape may close the drawer.");
+});
diff --git a/resources/tests/debug-disclosure.test.js b/resources/tests/debug-disclosure.test.js
index 3879f2e..0063ded 100644
--- a/resources/tests/debug-disclosure.test.js
+++ b/resources/tests/debug-disclosure.test.js
@@ -40,81 +40,6 @@ test("a cell-more control outside a box is inert", async () => {
assert.equal(control.textContent, "More", "Orphan control must not change.");
});
-test("a collapse control toggles the region named by data-target", async () => {
- const page = await bootDebugPage({
- body:
- '' +
- 'frames
',
- });
- const control = page.document.querySelector(
- '[data-yii-debug-toggle="collapse"]',
- );
- const target = page.document.getElementById("trace");
-
- fire(control.querySelector("span"), "click");
-
- assert.equal(target.classList.contains("is-open"), false, "Must collapse.");
- assert.equal(control.getAttribute("aria-expanded"), "false", "State down.");
-
- fire(control, "click");
-
- assert.equal(target.classList.contains("is-open"), true, "Must expand.");
- assert.equal(control.getAttribute("aria-expanded"), "true", "State is up.");
-});
-
-test("a collapse control falls back to its href", async () => {
- const page = await bootDebugPage({
- body:
- 'Trace' +
- 'frames
',
- });
-
- fire(page.document.querySelector("a"), "click");
-
- assert.equal(
- page.document.getElementById("trace").classList.contains("is-open"),
- true,
- "Fragment href must name the region.",
- );
-});
-
-test("a collapse control without a target is inert", async () => {
- const page = await bootDebugPage({
- body: '',
- });
- const control = page.document.querySelector(
- '[data-yii-debug-toggle="collapse"]',
- );
- const event = fire(control, "click");
-
- assert.equal(event.defaultPrevented, true, "Navigation must be suppressed.");
- assert.equal(
- control.getAttribute("aria-expanded"),
- null,
- "Nothing to expand means no state.",
- );
-});
-
-test("a collapse control pointing at a missing region is inert", async () => {
- const page = await bootDebugPage({
- body:
- '',
- });
- const control = page.document.querySelector(
- '[data-yii-debug-toggle="collapse"]',
- );
-
- fire(control, "click");
-
- assert.equal(
- control.getAttribute("aria-expanded"),
- null,
- "A dangling target must leave the control alone.",
- );
-});
-
test("a reveal control flips its pressed state and its label", async () => {
const page = await bootDebugPage({
body:
diff --git a/resources/tests/debug-dropdown.test.js b/resources/tests/debug-dropdown.test.js
deleted file mode 100644
index 4fe3a2b..0000000
--- a/resources/tests/debug-dropdown.test.js
+++ /dev/null
@@ -1,295 +0,0 @@
-// @vitest-environment jsdom
-import assert from "node:assert/strict";
-import { test } from "vitest";
-
-import { bootDebugPage, fire, press, settle } from "./debug-page-harness.js";
-
-const DEFAULT_ITEMS =
- 'Database';
-
-/** Renders one server-side dropdown, optionally degraded or already open. */
-function dropdown(options) {
- const settings = options || {};
- const expanded = settings.open === true ? "true" : "false";
- const items = settings.items === undefined ? DEFAULT_ITEMS : settings.items;
-
- return (
- '' +
- (settings.trigger === false
- ? ""
- : '') +
- (settings.menu === false
- ? ""
- : '") +
- "
"
- );
-}
-
-function trigger(page, id) {
- return page.document
- .getElementById(id || "filters")
- .querySelector('[data-yii-debug-toggle="dropdown"]');
-}
-
-function isOpen(page, id) {
- return page.document.getElementById(id).classList.contains("is-open");
-}
-
-test("opening a dropdown closes the one already open", async () => {
- const page = await bootDebugPage({
- body: dropdown({ id: "sort", open: true }) + dropdown({ id: "filters" }),
- });
-
- fire(trigger(page, "filters"), "click");
-
- assert.equal(isOpen(page, "filters"), true, "Clicked menu must open.");
- assert.equal(isOpen(page, "sort"), false, "Only one menu may stay open.");
- assert.equal(
- trigger(page, "sort").getAttribute("aria-expanded"),
- "false",
- "Closed trigger must report its state.",
- );
- assert.equal(
- trigger(page, "filters").getAttribute("aria-expanded"),
- "true",
- "Open trigger must report its state.",
- );
-});
-
-test("clicking an open trigger closes its own menu", async () => {
- const page = await bootDebugPage({ body: dropdown({ open: true }) });
-
- fire(trigger(page), "click");
-
- assert.equal(isOpen(page, "filters"), false, "Second click must close.");
- assert.equal(
- trigger(page).getAttribute("aria-expanded"),
- "false",
- "Trigger must report the collapsed state.",
- );
-});
-
-test("a dropdown trigger outside a wrapper is inert", async () => {
- const page = await bootDebugPage({
- body: '',
- });
- const control = page.document.querySelector(
- '[data-yii-debug-toggle="dropdown"]',
- );
- const event = fire(control, "click");
-
- assert.equal(event.defaultPrevented, true, "Navigation must be suppressed.");
- assert.equal(
- control.getAttribute("aria-expanded"),
- null,
- "An orphan trigger controls nothing.",
- );
-});
-
-test("a dropdown without a menu is inert", async () => {
- const page = await bootDebugPage({ body: dropdown({ menu: false }) });
-
- fire(trigger(page), "click");
-
- assert.equal(isOpen(page, "filters"), false, "Nothing to reveal.");
- assert.equal(
- trigger(page).getAttribute("aria-expanded"),
- "false",
- "Trigger state must not change.",
- );
-});
-
-test("a click elsewhere closes a dropdown left open without a trigger", async () => {
- const page = await bootDebugPage({
- body: dropdown({ open: true, trigger: false }) + "Elsewhere
",
- });
-
- fire(page.document.querySelector("p"), "click");
-
- assert.equal(isOpen(page, "filters"), false, "Outside click must close.");
-});
-
-test("ArrowDown from the trigger opens the menu on its first item", async () => {
- const page = await bootDebugPage({ body: dropdown() });
- const event = press(trigger(page), "ArrowDown");
-
- assert.equal(event.defaultPrevented, true, "Scrolling must be suppressed.");
- assert.equal(isOpen(page, "filters"), true, "Navigation must open the menu.");
- assert.equal(
- page.document.activeElement.textContent,
- "Database",
- "Focus must land on the first item.",
- );
-});
-
-test("ArrowUp from the trigger opens the menu on its last item", async () => {
- const page = await bootDebugPage({ body: dropdown() });
-
- press(trigger(page), "ArrowUp");
-
- assert.equal(
- page.document.activeElement.textContent,
- "Clear",
- "Focus must land on the last item.",
- );
-});
-
-test("Home and End jump to the ends of the menu", async () => {
- const page = await bootDebugPage({ body: dropdown({ open: true }) });
- const items = page.document.querySelectorAll(".yii-debug-dropdown-menu > *");
-
- press(items[0], "End");
-
- assert.equal(page.document.activeElement, items[1], "End must go last.");
-
- press(items[1], "Home");
-
- assert.equal(page.document.activeElement, items[0], "Home must go first.");
-});
-
-test("ArrowDown from an item moves to the next item", async () => {
- const page = await bootDebugPage({ body: dropdown({ open: true }) });
- const items = page.document.querySelectorAll(".yii-debug-dropdown-menu > *");
-
- press(items[0], "ArrowDown");
-
- assert.equal(page.document.activeElement, items[1], "Focus must advance.");
-});
-
-test("hidden menu items are skipped by keyboard navigation", async () => {
- const page = await bootDebugPage({
- body: dropdown({
- items:
- 'Database' +
- 'Log' +
- 'Mail' +
- '' +
- '',
- }),
- });
-
- press(trigger(page), "End");
-
- assert.equal(
- page.document.activeElement.textContent,
- "Reset",
- "Only perceivable, enabled items may take focus.",
- );
-});
-
-test("an empty menu stays closed under keyboard navigation", async () => {
- const page = await bootDebugPage({ body: dropdown({ items: "" }) });
- const event = press(trigger(page), "ArrowDown");
-
- assert.equal(isOpen(page, "filters"), false, "Nothing to navigate.");
- assert.equal(event.defaultPrevented, false, "The key must stay available.");
-});
-
-test("a dropdown without a trigger ignores arrow keys", async () => {
- const page = await bootDebugPage({ body: dropdown({ trigger: false }) });
- const item = page.document.querySelector(".yii-debug-dropdown-menu > *");
-
- press(item, "ArrowDown");
-
- assert.equal(isOpen(page, "filters"), false, "No trigger, no navigation.");
-});
-
-test("a dropdown without a menu ignores arrow keys", async () => {
- const page = await bootDebugPage({ body: dropdown({ menu: false }) });
-
- press(trigger(page), "ArrowDown");
-
- assert.equal(isOpen(page, "filters"), false, "No menu, no navigation.");
-});
-
-test("Escape closes the dropdown and returns focus to its trigger", async () => {
- const page = await bootDebugPage({
- body: dropdown({ open: true }),
- parent: "frame",
- });
-
- press(page.document.querySelector(".yii-debug-dropdown-menu > *"), "Escape");
-
- await settle(page.window);
-
- assert.equal(isOpen(page, "filters"), false, "Escape must close the menu.");
- assert.equal(
- page.document.activeElement,
- trigger(page),
- "Focus must return to the trigger.",
- );
- assert.equal(
- page.posts.length,
- 0,
- "Closing a menu must not also close the drawer.",
- );
-});
-
-test("Escape closes a triggerless dropdown without moving focus", async () => {
- const page = await bootDebugPage({
- body: dropdown({ open: true, trigger: false }),
- });
- const item = page.document.querySelector(".yii-debug-dropdown-menu > *");
-
- press(item, "Escape");
-
- await settle(page.window);
-
- assert.equal(isOpen(page, "filters"), false, "Escape must close the menu.");
- assert.equal(
- page.document.activeElement,
- page.document.body,
- "There is nothing to focus.",
- );
-});
-
-test("Escape with no menu open asks the parent toolbar to close the drawer", async () => {
- const page = await bootDebugPage({
- body: "Panel
",
- parent: "frame",
- });
-
- press(page.document.querySelector("p"), "Escape");
-
- await settle(page.window);
-
- assert.deepEqual(
- page.posts,
- [
- {
- data: { source: "yii-debug-toolbar", type: "close-drawer" },
- origin: "https://debug.test",
- },
- ],
- "Host toolbar must be asked to close.",
- );
-});
-
-test("Escape on a standalone page posts nothing", async () => {
- const page = await bootDebugPage({ body: "Panel
" });
-
- press(page.document.querySelector("p"), "Escape");
-
- await settle(page.window);
-
- assert.equal(page.posts.length, 0, "There is no drawer to close.");
-});
-
-test("a keydown on the document itself is ignored", async () => {
- const page = await bootDebugPage({ body: dropdown() });
-
- fire(page.document, "keydown", { key: "ArrowDown" });
-
- assert.equal(
- isOpen(page, "filters"),
- false,
- "A targetless key does nothing.",
- );
-});
diff --git a/resources/tests/toolbar-runtime.test.js b/resources/tests/toolbar-runtime.test.js
index fd51eab..4505123 100644
--- a/resources/tests/toolbar-runtime.test.js
+++ b/resources/tests/toolbar-runtime.test.js
@@ -491,10 +491,7 @@ test("embedded debug pages request drawer closure after an unhandled Escape", ()
};
var escape = { key: "Escape", defaultPrevented: false };
- assert.equal(
- requestParentToolbarDrawerClose(escape, browserWindow, false),
- true,
- );
+ assert.equal(requestParentToolbarDrawerClose(escape, browserWindow), true);
assert.deepEqual(messages, [
{
message: { source: "yii-debug-toolbar", type: "close-drawer" },
@@ -505,26 +502,17 @@ test("embedded debug pages request drawer closure after an unhandled Escape", ()
requestParentToolbarDrawerClose(
{ ...escape, defaultPrevented: true },
browserWindow,
- false,
),
false,
);
- assert.equal(
- requestParentToolbarDrawerClose(escape, browserWindow, true),
- false,
- );
var topWindow = { location: browserWindow.location };
topWindow.parent = topWindow;
- assert.equal(
- requestParentToolbarDrawerClose(escape, topWindow, false),
- false,
- );
+ assert.equal(requestParentToolbarDrawerClose(escape, topWindow), false);
assert.equal(
requestParentToolbarDrawerClose(
{ key: "Enter", defaultPrevented: false },
browserWindow,
- false,
),
false,
);
diff --git a/tools/quality/asset-size-budget.json b/tools/quality/asset-size-budget.json
index 2be8718..a18100a 100644
--- a/tools/quality/asset-size-budget.json
+++ b/tools/quality/asset-size-budget.json
@@ -5,8 +5,8 @@
},
"files": {
"css/debug.min.css": {
- "maxBytes": 175000,
- "maxGzipBytes": 21200
+ "maxBytes": 150350,
+ "maxGzipBytes": 18550
},
"fonts/ibm-plex-sans-latin-400-normal.woff2": {
"maxBytes": 23800,
@@ -41,8 +41,8 @@
"maxGzipBytes": 2430
},
"js/debug.min.js": {
- "maxBytes": 24050,
- "maxGzipBytes": 7560
+ "maxBytes": 22950,
+ "maxGzipBytes": 7500
},
"js/dom.min.js": {
"maxBytes": 965,
diff --git a/tools/quality/css-vocabulary-allowlist.json b/tools/quality/css-vocabulary-allowlist.json
index b5cd5ee..d1da19f 100644
--- a/tools/quality/css-vocabulary-allowlist.json
+++ b/tools/quality/css-vocabulary-allowlist.json
@@ -2,7 +2,6 @@
"$comment": "Names the PHP renderers emit without a matching frontend rule. `deliberate` entries are settled decisions and stay silent. `pendingReview` entries are reported on every run until someone either styles the name or moves it to `deliberate` with a reason. Remove an entry as soon as the frontend defines the name; the check fails on a stale entry so the list cannot rot.",
"deliberate": {
"yii-debug-callout-muted": "Muted is the neutral base: the four toned variants only override `border-left-color`, so muted needs no rule.",
- "yii-debug-gauge-value": "Structural label for the readout inside a micro-gauge; the rail and the bar carry the styling.",
"yii-debug-tab-content": "Structural label for the container holding the tab panels; each panel carries the styling."
},
"pendingReview": {
@@ -14,7 +13,6 @@
"yii-debug-header-exchange-body": "Body of the header exchange shell.",
"yii-debug-header-exchange-title": "Title of the header exchange shell.",
"yii-debug-header-raw-row": "Raw header row.",
- "yii-debug-indent": "Depth indent of a profiling row.",
"yii-debug-main-bare": "Shell variant rendering the page without the sidebar.",
"yii-debug-panel-title": "Panel heading of the standalone snapshot view.",
"yii-debug-phpinfo-filter": "Filter control of the PHP Info page.",