mirror of
https://github.com/actions/runner.git
synced 2026-01-23 04:51:23 +08:00
extension ui improvements
This commit is contained in:
Francesco Renzi
@@ -1,25 +1,142 @@
|
||||
/**
|
||||
* Content Script Styles
|
||||
*
|
||||
*
|
||||
* Matches GitHub's Primer design system for seamless integration.
|
||||
* Uses CSS custom properties for light/dark mode support.
|
||||
*
|
||||
* Supports two layout modes:
|
||||
* - Bottom panel: Fixed at bottom of viewport (like browser DevTools)
|
||||
* - Sidebar: Fixed on right side of viewport
|
||||
*/
|
||||
|
||||
/* Debugger Pane Container */
|
||||
/* ==========================================================================
|
||||
Base Debugger Pane Styles
|
||||
========================================================================== */
|
||||
|
||||
.dap-debugger-pane {
|
||||
background-color: var(--bgColor-default, #0d1117);
|
||||
border-color: var(--borderColor-default, #30363d) !important;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
z-index: 999;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.dap-header {
|
||||
/* ==========================================================================
|
||||
Bottom Panel Layout
|
||||
========================================================================== */
|
||||
|
||||
/* Add padding to body when bottom panel is open so all content is accessible */
|
||||
body.dap-bottom-panel-active {
|
||||
padding-bottom: 360px !important; /* Slightly more than panel height for breathing room */
|
||||
}
|
||||
|
||||
.dap-debugger-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 350px;
|
||||
border-top: 1px solid var(--borderColor-default, #30363d);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dap-debugger-bottom .dap-header {
|
||||
background-color: var(--bgColor-muted, #161b22);
|
||||
flex-shrink: 0;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.dap-header .octicon {
|
||||
color: var(--fgColor-muted, #8b949e);
|
||||
.dap-debugger-bottom .dap-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dap-debugger-bottom .dap-scopes {
|
||||
width: 33%;
|
||||
min-width: 200px;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--borderColor-default, #30363d);
|
||||
}
|
||||
|
||||
.dap-debugger-bottom .dap-repl {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dap-debugger-bottom .dap-controls {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Sidebar Layout
|
||||
========================================================================== */
|
||||
|
||||
.dap-debugger-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 350px;
|
||||
border-left: 1px solid var(--borderColor-default, #30363d);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dap-debugger-sidebar .dap-header {
|
||||
background-color: var(--bgColor-muted, #161b22);
|
||||
flex-shrink: 0;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.dap-debugger-sidebar .dap-scopes {
|
||||
flex: 0 0 auto;
|
||||
max-height: 40%;
|
||||
min-height: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 1px solid var(--borderColor-default, #30363d);
|
||||
}
|
||||
|
||||
.dap-debugger-sidebar .dap-repl {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dap-debugger-sidebar .dap-controls {
|
||||
background-color: var(--bgColor-muted, #161b22);
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Header Styles
|
||||
========================================================================== */
|
||||
|
||||
.dap-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--borderColor-default, #30363d);
|
||||
}
|
||||
|
||||
.dap-header .text-bold {
|
||||
font-weight: 600;
|
||||
color: var(--fgColor-default, #e6edf3);
|
||||
}
|
||||
|
||||
.dap-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dap-step-info {
|
||||
@@ -27,57 +144,135 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--fgColor-muted, #8b949e);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Status Labels */
|
||||
.dap-status-label {
|
||||
flex-shrink: 0;
|
||||
/* ==========================================================================
|
||||
Layout Toggle Buttons
|
||||
========================================================================== */
|
||||
|
||||
.dap-layout-toggles {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
background-color: var(--bgColor-inset, #010409);
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.Label--attention {
|
||||
background-color: #9e6a03 !important;
|
||||
color: #ffffff !important;
|
||||
.dap-layout-btn {
|
||||
padding: 4px 6px !important;
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
color: var(--fgColor-muted, #8b949e) !important;
|
||||
border-radius: 4px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.Label--success {
|
||||
background-color: #238636 !important;
|
||||
color: #ffffff !important;
|
||||
.dap-layout-btn:hover {
|
||||
background-color: var(--bgColor-neutral-muted, #6e768166) !important;
|
||||
color: var(--fgColor-default, #e6edf3) !important;
|
||||
}
|
||||
|
||||
.dap-layout-btn.active {
|
||||
background-color: var(--bgColor-accent-muted, #388bfd26) !important;
|
||||
color: var(--fgColor-accent, #58a6ff) !important;
|
||||
}
|
||||
|
||||
.dap-layout-btn svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Close Button
|
||||
========================================================================== */
|
||||
|
||||
.dap-close-btn {
|
||||
padding: 4px 6px !important;
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
color: var(--fgColor-muted, #8b949e) !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.Label--danger {
|
||||
background-color: #da3633 !important;
|
||||
color: #ffffff !important;
|
||||
border: none !important;
|
||||
.dap-close-btn:hover {
|
||||
background-color: var(--bgColor-danger-muted, #da363326) !important;
|
||||
color: var(--fgColor-danger, #f85149) !important;
|
||||
}
|
||||
|
||||
.Label--secondary {
|
||||
background-color: #30363d !important;
|
||||
color: #8b949e !important;
|
||||
border: none !important;
|
||||
.dap-close-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.dap-content {
|
||||
min-height: 200px;
|
||||
max-height: 400px;
|
||||
/* ==========================================================================
|
||||
Control Buttons
|
||||
========================================================================== */
|
||||
|
||||
.dap-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* Scopes Panel */
|
||||
.dap-control-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 !important;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.dap-control-btn:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.dap-control-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.dap-control-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.dap-control-btn:not(:disabled):hover {
|
||||
background-color: var(--bgColor-accent-muted, #388bfd26);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Scopes Panel
|
||||
========================================================================== */
|
||||
|
||||
.dap-scopes {
|
||||
border-color: var(--borderColor-default, #30363d) !important;
|
||||
min-width: 150px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dap-scope-header {
|
||||
background-color: var(--bgColor-muted, #161b22);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--borderColor-default, #30363d);
|
||||
}
|
||||
|
||||
.dap-scope-tree {
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Tree Nodes */
|
||||
@@ -123,16 +318,23 @@
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* REPL Console */
|
||||
/* ==========================================================================
|
||||
REPL Console
|
||||
========================================================================== */
|
||||
|
||||
.dap-repl {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dap-repl-header {
|
||||
background-color: var(--bgColor-muted, #161b22);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--borderColor-default, #30363d);
|
||||
}
|
||||
|
||||
.dap-repl-output {
|
||||
@@ -143,7 +345,7 @@
|
||||
padding: 8px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 100px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.dap-output-input {
|
||||
@@ -165,6 +367,8 @@
|
||||
/* REPL Input */
|
||||
.dap-repl-input {
|
||||
flex-shrink: 0;
|
||||
padding: 8px;
|
||||
border-top: 1px solid var(--borderColor-default, #30363d);
|
||||
}
|
||||
|
||||
.dap-repl-input input {
|
||||
@@ -174,6 +378,9 @@
|
||||
border-color: var(--borderColor-default, #30363d) !important;
|
||||
color: var(--fgColor-default, #e6edf3) !important;
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--borderColor-default, #30363d);
|
||||
}
|
||||
|
||||
.dap-repl-input input:focus {
|
||||
@@ -191,51 +398,112 @@
|
||||
color: var(--fgColor-muted, #8b949e);
|
||||
}
|
||||
|
||||
/* Control Buttons */
|
||||
.dap-controls {
|
||||
background-color: var(--bgColor-muted, #161b22);
|
||||
/* ==========================================================================
|
||||
Breakpoint Indicator
|
||||
========================================================================== */
|
||||
|
||||
/* Current step indicator - shown on the step where debugger is paused
|
||||
Breakpoints are BEFORE steps, so we indicate the boundary above the step */
|
||||
check-step.dap-current-step {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dap-controls button {
|
||||
min-width: 32px;
|
||||
height: 28px;
|
||||
/* Highlight the step row with a subtle background and red accent line at TOP */
|
||||
check-step.dap-current-step > details,
|
||||
check-step.dap-current-step > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
check-step.dap-current-step > details > summary,
|
||||
check-step.dap-current-step > div:first-child {
|
||||
background: linear-gradient(90deg, rgba(248, 81, 73, 0.08) 0%, rgba(248, 81, 73, 0.02) 100%) !important;
|
||||
border-top: 2px solid #f85149 !important;
|
||||
}
|
||||
|
||||
/* Red accent bar at top of step - horizontal line showing "breakpoint here" */
|
||||
check-step.dap-current-step::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #f85149 0%, #da3633 100%);
|
||||
}
|
||||
|
||||
/* Triangle pointer at top of step - points to the boundary between steps */
|
||||
check-step.dap-current-step::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-left: 10px solid #f85149;
|
||||
z-index: 100;
|
||||
filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Debug Button in Header
|
||||
========================================================================== */
|
||||
|
||||
.dap-debug-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.dap-debug-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
gap: 4px;
|
||||
font-weight: 500;
|
||||
padding: 5px 12px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.dap-controls button svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
.dap-debug-btn-text {
|
||||
font-size: var(--text-body-size-medium, .875rem);
|
||||
}
|
||||
|
||||
.dap-controls button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
.dap-debug-btn .octicon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dap-controls button:not(:disabled):hover {
|
||||
.dap-debug-btn.selected {
|
||||
background-color: var(--bgColor-accent-muted, #388bfd26);
|
||||
border-color: var(--borderColor-accent-emphasis, #388bfd);
|
||||
color: var(--fgColor-accent, #58a6ff);
|
||||
}
|
||||
|
||||
.dap-step-counter {
|
||||
flex-shrink: 0;
|
||||
.dap-debug-btn:hover:not(:disabled) {
|
||||
background-color: var(--bgColor-neutral-muted, #6e768166);
|
||||
}
|
||||
|
||||
/* Utility Classes (in case GitHub's aren't loaded) */
|
||||
/* ==========================================================================
|
||||
Utility Classes
|
||||
========================================================================== */
|
||||
|
||||
.d-flex { display: flex; }
|
||||
.flex-column { flex-direction: column; }
|
||||
.flex-items-center { align-items: center; }
|
||||
.flex-auto { flex: 1 1 auto; }
|
||||
.justify-content-center { justify-content: center; }
|
||||
|
||||
.p-2 { padding: 8px; }
|
||||
.px-2 { padding-left: 8px; padding-right: 8px; }
|
||||
.mx-2 { margin-left: 8px; margin-right: 8px; }
|
||||
.mb-2 { margin-bottom: 8px; }
|
||||
.ml-1 { margin-left: 4px; }
|
||||
.ml-2 { margin-left: 8px; }
|
||||
.ml-3 { margin-left: 16px; }
|
||||
.mr-2 { margin-right: 8px; }
|
||||
.mr-3 { margin-right: 16px; }
|
||||
.ml-auto { margin-left: auto; }
|
||||
|
||||
.border { border: 1px solid var(--borderColor-default, #30363d); }
|
||||
@@ -253,11 +521,19 @@
|
||||
.color-fg-danger { color: var(--fgColor-danger, #f85149); }
|
||||
.color-fg-default { color: var(--fgColor-default, #e6edf3); }
|
||||
|
||||
/* Light mode overrides */
|
||||
/* ==========================================================================
|
||||
Light Mode Overrides
|
||||
========================================================================== */
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.dap-debugger-pane {
|
||||
background-color: var(--bgColor-default, #ffffff);
|
||||
border-color: var(--borderColor-default, #d0d7de) !important;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dap-debugger-sidebar {
|
||||
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dap-header,
|
||||
@@ -279,6 +555,12 @@
|
||||
.color-fg-muted {
|
||||
color: var(--fgColor-muted, #656d76);
|
||||
}
|
||||
|
||||
check-step.dap-current-step > details > summary,
|
||||
check-step.dap-current-step > div:first-child {
|
||||
background: linear-gradient(90deg, rgba(248, 81, 73, 0.1) 0%, rgba(248, 81, 73, 0.02) 100%) !important;
|
||||
border-top: 2px solid #f85149 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Respect GitHub's color mode data attribute */
|
||||
@@ -286,6 +568,12 @@
|
||||
html[data-color-mode="light"] .dap-debugger-pane {
|
||||
background-color: #ffffff;
|
||||
border-color: #d0d7de !important;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
[data-color-mode="light"] .dap-debugger-sidebar,
|
||||
html[data-color-mode="light"] .dap-debugger-sidebar {
|
||||
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
[data-color-mode="light"] .dap-header,
|
||||
@@ -306,27 +594,17 @@ html[data-color-mode="light"] .dap-repl-input input {
|
||||
background-color: #f6f8fa !important;
|
||||
}
|
||||
|
||||
/* Debug Button in Header */
|
||||
.dap-debug-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
[data-color-mode="light"] .dap-layout-toggles,
|
||||
html[data-color-mode="light"] .dap-layout-toggles {
|
||||
background-color: #eaeef2;
|
||||
}
|
||||
|
||||
.dap-debug-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dap-debug-btn.selected {
|
||||
background-color: var(--bgColor-accent-muted, #388bfd26);
|
||||
border-color: var(--borderColor-accent-emphasis, #388bfd);
|
||||
}
|
||||
|
||||
.dap-debug-btn:hover:not(:disabled) {
|
||||
background-color: var(--bgColor-neutral-muted, #6e768166);
|
||||
[data-color-mode="light"] check-step.dap-current-step > details > summary,
|
||||
[data-color-mode="light"] check-step.dap-current-step > div:first-child,
|
||||
html[data-color-mode="light"] check-step.dap-current-step > details > summary,
|
||||
html[data-color-mode="light"] check-step.dap-current-step > div:first-child {
|
||||
background: linear-gradient(90deg, rgba(248, 81, 73, 0.1) 0%, rgba(248, 81, 73, 0.02) 100%) !important;
|
||||
border-top: 2px solid #f85149 !important;
|
||||
}
|
||||
|
||||
/* Light mode for debug button */
|
||||
|
||||
Reference in New Issue
Block a user