feat: ability to view previous logs for Actions runs that have been retried (#9017)

Adds a new dropdown to the job logs, visible only when a job has been retried at least once:
![action-with-dropdown](/attachments/9669b47e-2239-4f07-b823-2759dd99a4fb)

When an older run attempt from the dropdown is selected, displays the older run's logs:
![historical-action-logs](/attachments/8b737386-63fb-4f3f-b5b5-ac38c62ed648)

Context on implementation & design decisions:
- It is important that when a URL from an Action's log is shared, the person on the other side sees the exact same logs that were being viewed.  For this reason, all log views are automatically redirected to a fully-qualified URL (including the *run*, *job*, and *attempt*), so that when they are shared there is a guarantee of stability in the viewed logs.
- Individual jobs can be rerun any number of times independent of other jobs in the same workflow.  This means there isn't a "set" of related jobs that were executed at the same time, and this led me to remove the display of current status of jobs on the left-hand side of the view.  There isn't a logical set of job statuses to display here.

Fixes #1043.  Based upon @gmem's original work in #1416.

## Checklist

The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org).

### Tests

- I added test coverage for Go changes...
  - [x] in their respective `*_test.go` for unit tests.
  - [ ] in the `tests/integration` directory if it involves interactions with a live Forgejo server.
- I added test coverage for JavaScript changes...
  - [x] in `web_src/js/*.test.js` if it can be unit tested.
  - [ ] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)).

### Documentation

- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [x] I did not document these changes and I do not expect someone else to do it.

### Release notes

- [ ] I do not want this change to show in the release notes.
- [x] I want the title to show in the release notes with a link to this pull request.
- [ ] I want the content of the `release-notes/<pull request number>.md` to be be used for the release notes instead of the title.

<!--start release-notes-assistant-->

## Release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- User Interface features
  - [PR](https://codeberg.org/forgejo/forgejo/pulls/9017): <!--number 9017 --><!--line 0 --><!--description YWJpbGl0eSB0byB2aWV3IHByZXZpb3VzIGxvZ3MgZm9yIEFjdGlvbnMgcnVucyB0aGF0IGhhdmUgYmVlbiByZXRyaWVk-->ability to view previous logs for Actions runs that have been retried<!--description-->
<!--end release-notes-assistant-->

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9017
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Co-authored-by: Mathieu Fenniak <mathieu@fenniak.net>
Co-committed-by: Mathieu Fenniak <mathieu@fenniak.net>
This commit is contained in:
Mathieu Fenniak 2025-09-04 22:46:22 +02:00 committed by Earl Warren
commit 8e813902c5
18 changed files with 765 additions and 38 deletions

View file

@ -24,11 +24,20 @@ export default {
type: String,
default: '',
},
inline: {
type: Boolean,
default: false,
},
},
computed: {
containerClasses() {
return this.inline ? 'tw-inline' : 'tw-flex tw-items-center';
},
},
};
</script>
<template>
<span class="tw-flex tw-items-center" :data-tooltip-content="localeStatus ?? status" v-if="status">
<span :class="containerClasses" :data-tooltip-content="localeStatus ?? status" v-if="status">
<SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class="className" v-if="status === 'success'"/>
<SvgIcon name="octicon-skip" class="text grey" :size="size" :class="className" v-else-if="status === 'skipped'"/>
<SvgIcon name="octicon-stop" class="text yellow" :size="size" :class="className" v-else-if="status === 'cancelled'"/>

View file

@ -1,4 +1,5 @@
import {mount, flushPromises} from '@vue/test-utils';
import {toAbsoluteUrl} from '../utils.js';
import RepoActionView from './RepoActionView.vue';
test('processes ##[group] and ##[endgroup]', async () => {
@ -35,6 +36,7 @@ test('processes ##[group] and ##[endgroup]', async () => {
status: 'success',
},
],
allAttempts: [{number: 1, time_since_started_html: '', status: 'success'}],
},
},
logs: {
@ -53,6 +55,7 @@ test('processes ##[group] and ##[endgroup]', async () => {
const wrapper = mount(RepoActionView, {
props: {
jobIndex: '1',
attemptNumber: '1',
locale: {
approve: '',
cancel: '',
@ -65,6 +68,9 @@ test('processes ##[group] and ##[endgroup]', async () => {
showLogSeconds: '',
showFullScreen: '',
downloadLogs: '',
runAttemptLabel: '',
viewingOutOfDateRun: '',
viewMostRecentRun: '',
status: {
unknown: '',
waiting: '',
@ -156,6 +162,7 @@ test('load multiple steps on a finished action', async () => {
status: 'success',
},
],
allAttempts: [{number: 1, time_since_started_html: '', status: 'success'}],
},
},
logs: {
@ -176,6 +183,7 @@ test('load multiple steps on a finished action', async () => {
actionsURL: 'https://example.com/example-org/example-repo/actions',
runIndex: '1',
jobIndex: '2',
attemptNumber: '1',
locale: {
approve: '',
cancel: '',
@ -188,6 +196,9 @@ test('load multiple steps on a finished action', async () => {
showLogSeconds: '',
showFullScreen: '',
downloadLogs: '',
runAttemptLabel: '',
viewingOutOfDateRun: '',
viewMostRecentRun: '',
status: {
unknown: '',
waiting: '',
@ -216,6 +227,194 @@ test('load multiple steps on a finished action', async () => {
expect(wrapper.get('.job-step-section:nth-of-type(2) .job-log-line:nth-of-type(3) .log-msg').text()).toEqual('Step #2 Log #3');
});
function configureForMultipleAttemptTests({viewHistorical}) {
Object.defineProperty(document.documentElement, 'lang', {value: 'en'});
vi.spyOn(global, 'fetch').mockImplementation((url, opts) => {
const artifacts_value = {
artifacts: [],
};
const stepsLog_value = [
{
step: 0,
cursor: 0,
lines: [],
},
];
const jobs_value = {
state: {
run: {
canApprove: true,
canCancel: true,
canRerun: true,
status: 'success',
commit: {
pusher: {},
},
},
currentJob: {
steps: [
{
summary: 'Test Job',
duration: '1s',
status: 'success',
},
],
allAttempts: [
{number: 2, time_since_started_html: 'yesterday', status: 'success'},
{number: 1, time_since_started_html: 'two days ago', status: 'failure'},
],
},
},
logs: {
stepsLog: opts.body?.includes('"cursor":null') ? stepsLog_value : [],
},
};
return Promise.resolve({
ok: true,
json: vi.fn().mockResolvedValue(
url.endsWith('/artifacts') ? artifacts_value : jobs_value,
),
});
});
const wrapper = mount(RepoActionView, {
props: {
runIndex: '123',
jobIndex: '1',
attemptNumber: viewHistorical ? '1' : '2',
actionsURL: toAbsoluteUrl('/user1/repo2/actions'),
locale: {
approve: 'Locale Approve',
cancel: 'Locale Cancel',
rerun: 'Locale Re-run',
artifactsTitle: '',
areYouSure: '',
confirmDeleteArtifact: '',
rerun_all: '',
showTimeStamps: '',
showLogSeconds: '',
showFullScreen: '',
downloadLogs: '',
runAttemptLabel: 'Run attempt %[1]s %[2]s',
viewingOutOfDateRun: 'oh no, out of date since %[1]s give or take or so',
viewMostRecentRun: '',
status: {
unknown: '',
waiting: '',
running: '',
success: '',
failure: '',
cancelled: '',
skipped: '',
blocked: '',
},
},
},
});
return wrapper;
}
test('display baseline with most-recent attempt', async () => {
const wrapper = configureForMultipleAttemptTests({viewHistorical: false});
await flushPromises();
// Warning dialog for viewing an out-of-date attempt...
expect(wrapper.findAll('.job-out-of-date-warning').length).toEqual(0);
// Approve button should be visible; can't have all three at once but at least this verifies the inverse of the
// historical attempt test below.
expect(wrapper.findAll('button').filter((button) => button.text() === 'Locale Approve').length).toEqual(1);
// Job list will be visible...
expect(wrapper.findAll('.job-group-section').length).toEqual(1);
// Attempt selector dropdown...
expect(wrapper.findAll('.job-attempt-dropdown').length).toEqual(1);
expect(wrapper.findAll('.job-attempt-dropdown .svg.octicon-check-circle-fill.text.green').length).toEqual(1);
expect(wrapper.get('.job-attempt-dropdown .ui.dropdown').text()).toEqual('Run attempt 2 yesterday');
});
test('display reconfigured for historical attempt', async () => {
const wrapper = configureForMultipleAttemptTests({viewHistorical: true});
await flushPromises();
// Warning dialog for viewing an out-of-date attempt...
expect(wrapper.findAll('.job-out-of-date-warning').length).toEqual(1);
expect(wrapper.get('.job-out-of-date-warning').text()).toEqual('oh no, out of date since two days ago give or take or so');
await wrapper.get('.job-out-of-date-warning button').trigger('click');
expect(window.location.href).toEqual(toAbsoluteUrl('/user1/repo2/actions/runs/123/jobs/1'));
// eslint-disable-next-line no-restricted-globals
history.back();
await flushPromises();
// Approve, Cancel, Re-run all buttons should all be suppressed...
expect(wrapper.findAll('button').filter((button) => button.text() === 'Locale Approve').length).toEqual(0);
expect(wrapper.findAll('button').filter((button) => button.text() === 'Locale Cancel').length).toEqual(0);
expect(wrapper.findAll('button').filter((button) => button.text() === 'Locale Re-run').length).toEqual(0);
// Job list will be suppressed...
expect(wrapper.findAll('.job-group-section').length).toEqual(0);
// Attempt selector dropdown...
expect(wrapper.findAll('.job-attempt-dropdown').length).toEqual(1);
expect(wrapper.findAll('.job-attempt-dropdown .svg.octicon-x-circle-fill.text.red').length).toEqual(1);
expect(wrapper.get('.job-attempt-dropdown .ui.dropdown').text()).toEqual('Run attempt 1 two days ago');
});
test('historical attempt dropdown interactions', async () => {
const wrapper = configureForMultipleAttemptTests({viewHistorical: true});
await flushPromises();
// Check dropdown exists, but isn't expanded.
const attemptsNotExpanded = () => {
expect(wrapper.findAll('.job-attempt-dropdown').length).toEqual(1);
expect(wrapper.findAll('.job-attempt-dropdown .action-job-menu').length).toEqual(0, 'dropdown content not yet visible');
};
attemptsNotExpanded();
// Click on attempt dropdown
wrapper.get('.job-attempt-dropdown .ui.dropdown').trigger('click');
await flushPromises();
// Check dropdown is expanded and both options are displayed
const attemptsExpanded = () => {
expect(wrapper.findAll('.job-attempt-dropdown .action-job-menu').length).toEqual(1);
expect(wrapper.get('.job-attempt-dropdown .action-job-menu').isVisible()).toBe(true);
expect(wrapper.findAll('.job-attempt-dropdown .action-job-menu a').filter((a) => a.text() === 'Run attempt 2 yesterday').length).toEqual(1);
expect(wrapper.findAll('.job-attempt-dropdown .action-job-menu a').filter((a) => a.text() === 'Run attempt 1 two days ago').length).toEqual(1);
};
attemptsExpanded();
// Normally dismiss occurs on a body click event; simulate that by calling `closeDropdown()`
wrapper.vm.closeDropdown();
await flushPromises();
// Should return to not expanded.
attemptsNotExpanded();
// Click on the gear dropdown
wrapper.get('.job-gear-dropdown').trigger('click');
await flushPromises();
// Check that gear's menu is expanded, and attempt dropdown isn't.
expect(wrapper.findAll('.job-gear-dropdown .action-job-menu').length).toEqual(1);
expect(wrapper.get('.job-gear-dropdown .action-job-menu').isVisible()).toBe(true);
attemptsNotExpanded();
// Click on attempt dropdown
wrapper.get('.job-attempt-dropdown .ui.dropdown').trigger('click');
await flushPromises();
// Check that attempt dropdown expanded again, gear dropdown disappeared (mutually exclusive)
expect(wrapper.findAll('.job-gear-dropdown .action-job-menu').length).toEqual(0);
attemptsExpanded();
// Click on the other option in the dropdown to verify it navigates to the target attempt
wrapper.findAll('.job-attempt-dropdown .action-job-menu a').find((a) => a.text() === 'Run attempt 2 yesterday').trigger('click');
expect(window.location.href).toEqual(toAbsoluteUrl('/user1/repo2/actions/runs/123/jobs/1/attempt/2'));
});
test('artifacts download links', async () => {
Object.defineProperty(document.documentElement, 'lang', {value: 'en'});
vi.spyOn(global, 'fetch').mockImplementation((url, opts) => {
@ -264,6 +463,7 @@ test('artifacts download links', async () => {
status: 'success',
},
],
allAttempts: [{number: 1, time_since_started_html: '', status: 'success'}],
},
},
logs: {
@ -285,6 +485,7 @@ test('artifacts download links', async () => {
runIndex: '10',
runID: '1001',
jobIndex: '2',
attemptNumber: '1',
locale: {
approve: '',
cancel: '',

View file

@ -17,6 +17,7 @@ const sfc = {
runIndex: String,
runID: String,
jobIndex: String,
attemptNumber: String,
actionsURL: String,
workflowName: String,
workflowURL: String,
@ -27,11 +28,12 @@ const sfc = {
return {
// internal state
loading: false,
initialLoadComplete: false,
needLoadingWithLogCursors: null,
intervalID: null,
currentJobStepsStates: [],
artifacts: [],
menuVisible: false,
menuVisible: undefined,
isFullScreen: false,
timeVisible: {
'log-time-stamp': false,
@ -83,6 +85,12 @@ const sfc = {
// status: '',
// }
],
// All available attempts for the job we're currently viewing.
//
// initial value here is configured so that currentingViewingMostRecentAttempt() -> true on the default `data()`, so that the
// initial render (before `loadJob`'s first execution is complete) doesn't display "You are viewing an
// out-of-date run..."
allAttempts: new Array(parseInt(this.attemptNumber)).fill({index: 0, time_since_started_html: '', status: 'success'}),
},
};
},
@ -111,6 +119,61 @@ const sfc = {
}
},
computed: {
shouldShowAttemptDropdown() {
return this.initialLoadComplete && this.currentJob.allAttempts && this.currentJob.allAttempts.length > 1;
},
displayOtherJobs() {
return this.currentingViewingMostRecentAttempt;
},
canApprove() {
return this.currentingViewingMostRecentAttempt && this.run.canApprove;
},
canCancel() {
return this.currentingViewingMostRecentAttempt && this.run.canCancel;
},
canRerun() {
return this.currentingViewingMostRecentAttempt && this.run.canRerun;
},
viewingAttemptNumber() {
return parseInt(this.attemptNumber);
},
viewingAttempt() {
const fallback = {index: 0, time_since_started_html: '', status: 'success'};
if (!this.currentJob.allAttempts) {
return fallback;
}
const attempt = this.currentJob.allAttempts.find((attempt) => attempt.number === this.viewingAttemptNumber);
return attempt || fallback;
},
currentingViewingMostRecentAttempt() {
if (!this.currentJob.allAttempts) {
return true;
}
return this.viewingAttemptNumber === this.currentJob.allAttempts.length;
},
displayGearDropdown() {
return this.menuVisible === 'gear';
},
displayAttemptDropdown() {
return this.menuVisible === 'attempt';
},
viewingOutOfDateRunLabel() {
return this.locale.viewingOutOfDateRun
.replace('%[1]s', this.viewingAttempt.time_since_started_html);
},
},
methods: {
// show/hide the step logs for a step
toggleStepLogs(idx) {
@ -242,9 +305,10 @@ const sfc = {
},
async fetchJob(logCursors) {
const resp = await POST(`${this.actionsURL}/runs/${this.runIndex}/jobs/${this.jobIndex}`, {
data: {logCursors},
});
const resp = await POST(
`${this.actionsURL}/runs/${this.runIndex}/jobs/${this.jobIndex}/attempt/${this.attemptNumber}`,
{data: {logCursors}},
);
return await resp.json();
},
@ -316,9 +380,20 @@ const sfc = {
}
} finally {
this.loading = false;
this.initialLoadComplete = true;
}
},
navigateToAttempt(attempt) {
const url = `${this.actionsURL}/runs/${this.runIndex}/jobs/${this.jobIndex}/attempt/${attempt.number}`;
window.location.href = url;
},
navigateToMostRecentAttempt() {
const url = `${this.actionsURL}/runs/${this.runIndex}/jobs/${this.jobIndex}`;
window.location.href = url;
},
isDone(status) {
return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
},
@ -327,8 +402,24 @@ const sfc = {
return ['success', 'running', 'failure', 'cancelled'].includes(status);
},
toggleAttemptDropdown() {
if (this.menuVisible === 'attempt') {
this.menuVisible = undefined;
} else {
this.menuVisible = 'attempt';
}
},
toggleGearDropdown() {
if (this.menuVisible === 'gear') {
this.menuVisible = undefined;
} else {
this.menuVisible = 'gear';
}
},
closeDropdown() {
if (this.menuVisible) this.menuVisible = false;
this.menuVisible = undefined;
},
toggleTimeDisplay(type) {
@ -371,6 +462,15 @@ const sfc = {
if (!logLine) return;
logLine.querySelector('.line-num').click();
},
runAttemptLabel(attempt) {
if (!attempt) {
return '';
}
return this.locale.runAttemptLabel
.replace('%[1]s', attempt.number)
.replace('%[2]s', attempt.time_since_started_html);
},
},
};
@ -389,6 +489,7 @@ export function initRepositoryActionView() {
runIndex: el.getAttribute('data-run-index'),
runID: el.getAttribute('data-run-id'),
jobIndex: el.getAttribute('data-job-index'),
attemptNumber: el.getAttribute('data-attempt-number'),
actionsURL: el.getAttribute('data-actions-url'),
workflowName: el.getAttribute('data-workflow-name'),
workflowURL: el.getAttribute('data-workflow-url'),
@ -404,6 +505,9 @@ export function initRepositoryActionView() {
showLogSeconds: el.getAttribute('data-locale-show-log-seconds'),
showFullScreen: el.getAttribute('data-locale-show-full-screen'),
downloadLogs: el.getAttribute('data-locale-download-logs'),
runAttemptLabel: el.getAttribute('data-locale-run-attempt-label'),
viewingOutOfDateRun: el.getAttribute('data-locale-viewing-out-of-date-run'),
viewMostRecentRun: el.getAttribute('data-locale-view-most-recent-run'),
status: {
unknown: el.getAttribute('data-locale-status-unknown'),
waiting: el.getAttribute('data-locale-status-waiting'),
@ -421,6 +525,15 @@ export function initRepositoryActionView() {
</script>
<template>
<div class="ui container fluid padded action-view-container">
<div class="action-view-header job-out-of-date-warning" v-if="!currentingViewingMostRecentAttempt">
<div class="ui warning message">
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-html="viewingOutOfDateRunLabel"/>
<button class="tw-ml-8 ui basic small compact button" @click="navigateToMostRecentAttempt()">
{{ locale.viewMostRecentRun }}
</button>
</div>
</div>
<div class="action-view-header">
<div class="action-info-summary">
<div class="action-info-summary-title">
@ -428,13 +541,13 @@ export function initRepositoryActionView() {
<!-- eslint-disable-next-line vue/no-v-html -->
<h2 class="action-info-summary-title-text" v-html="run.titleHTML"/>
</div>
<button class="ui basic small compact button primary" @click="approveRun()" v-if="run.canApprove">
<button class="ui basic small compact button primary" @click="approveRun()" v-if="canApprove">
{{ locale.approve }}
</button>
<button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
<button class="ui basic small compact button red" @click="cancelRun()" v-else-if="canCancel">
{{ locale.cancel }}
</button>
<button class="ui basic small compact button tw-mr-0 tw-whitespace-nowrap link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
<button class="ui basic small compact button tw-mr-0 tw-whitespace-nowrap link-action" :data-url="`${run.link}/rerun`" v-else-if="canRerun">
{{ locale.rerun_all }}
</button>
</div>
@ -454,7 +567,7 @@ export function initRepositoryActionView() {
</div>
</div>
<div class="action-view-body">
<div class="action-view-left">
<div class="action-view-left" v-if="displayOtherJobs">
<div class="job-group-section">
<div class="job-brief-list">
<a class="job-brief-item" :href="run.link+'/jobs/'+index" :class="parseInt(jobIndex) === index ? 'selected' : ''" v-for="(job, index) in run.jobs" :key="job.id">
@ -496,12 +609,29 @@ export function initRepositoryActionView() {
{{ currentJob.detail }}
</p>
</div>
<div class="job-info-header-right job-attempt-dropdown tw-mr-8" v-if="shouldShowAttemptDropdown" v-cloak>
<div class="ui dropdown selection" @click.stop="toggleAttemptDropdown()">
<SvgIcon name="octicon-triangle-down" class="dropdown icon"/>
<div class="default text">
<ActionRunStatus :locale-status="locale.status[viewingAttempt.status]" :status="viewingAttempt.status" :inline="true"/>
<!-- eslint-disable-next-line vue/no-v-html -->
<span class="tw-ml-2" v-html="runAttemptLabel(viewingAttempt)"/>
</div>
<div class="menu transition action-job-menu" :class="{visible: displayAttemptDropdown}" v-if="displayAttemptDropdown" v-cloak>
<a tabindex="0" :class="{ item: true, selected: attempt.number === viewingAttemptNumber }" v-for="attempt in currentJob.allAttempts" :key="attempt.number" @click="navigateToAttempt(attempt)">
<ActionRunStatus :locale-status="locale.status[attempt.status]" :status="attempt.status" :inline="true"/>
<!-- eslint-disable-next-line vue/no-v-html -->
<span class="tw-ml-2" v-html="runAttemptLabel(attempt)"/>
</a>
</div>
</div>
</div>
<div class="job-info-header-right">
<div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible">
<div class="ui top right pointing dropdown dark-dropdown custom jump item job-gear-dropdown" @click.stop="toggleGearDropdown()">
<button class="btn gt-interact-bg tw-p-2">
<SvgIcon name="octicon-gear" :size="18"/>
</button>
<div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
<div class="menu transition action-job-menu" :class="{visible: displayGearDropdown}" v-if="displayGearDropdown" v-cloak>
<a class="item" tabindex="0" @click="toggleTimeDisplay('seconds')" @keyup.space="toggleTimeDisplay('seconds')" @keyup.enter="toggleTimeDisplay('seconds')">
<i class="icon"><SvgIcon :name="timeVisible['log-time-seconds'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
{{ locale.showLogSeconds }}
@ -736,30 +866,30 @@ export function initRepositoryActionView() {
/* begin fomantic dropdown menu overrides */
.action-view-right .ui.dropdown .menu {
.action-view-right .ui.dropdown.dark-dropdown .menu {
background: var(--color-console-menu-bg);
border-color: var(--color-console-menu-border);
}
.action-view-right .ui.dropdown .menu > .item {
.action-view-right .ui.dropdown.dark-dropdown .menu > .item {
color: var(--color-console-fg);
}
.action-view-right .ui.dropdown .menu > .item:hover {
.action-view-right .ui.dropdown.dark-dropdown .menu > .item:hover {
color: var(--color-console-fg);
background: var(--color-console-hover-bg);
}
.action-view-right .ui.dropdown .menu > .item:active {
.action-view-right .ui.dropdown.dark-dropdown .menu > .item:active {
color: var(--color-console-fg);
background: var(--color-console-active-bg);
}
.action-view-right .ui.dropdown .menu > .divider {
.action-view-right .ui.dropdown.dark-dropdown .menu > .divider {
border-top-color: var(--color-console-menu-border);
}
.action-view-right .ui.pointing.dropdown > .menu:not(.hidden)::after {
.action-view-right .ui.pointing.dropdown.dark-dropdown > .menu:not(.hidden)::after {
background: var(--color-console-menu-bg);
box-shadow: -1px -1px 0 0 var(--color-console-menu-border);
}