Skip to content

collapse/extend results page tables #1346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tilen323 wants to merge 2 commits into
base: trunk
Choose a base branch
from
Open

collapse/extend results page tables #1346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ef82bc
collapse/extend results page tables
tilen323 Jun 4, 2026
04a31e0
don't remove border on collapse
tilen323 Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 115 additions & 4 deletions assets/css/plugin-check-admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,14 +130,125 @@
padding: 0 14px 14px;
}

#plugin-check__results .plugin-check__false-positive-results h4:first-child {
margin-top: 12px;
}

.plugin-check__false-positive-results table.plugin-check__results-table {
margin-bottom: 1em;
}

/* Expand/collapse: animation + layout */
#plugin-check__results,
.plugin-check__false-positive-results {
interpolate-size: allow-keywords;
}

.plugin-check__results-toolbar {
margin-top: 8px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.plugin-check__results-toolbar.is-hidden {
display: none;
}

.plugin-check__toolbar-button {
display: inline-flex;
align-items: center;
gap: 6px;
border-color: #2271b1;
color: #2271b1;
background: #fff;
}

.wp-core-ui .button.plugin-check__toolbar-button .dashicons {
width: 18px;
height: 18px;
font-size: 18px;
line-height: 0.9;
vertical-align: middle;
}

.plugin-check__file-results {
margin-bottom: 12px;
background: #fff;
border: 1px solid #c3c4c7;
}

.plugin-check__file-results-header {
border-left: 4px solid #2271b1;
border-bottom: 1px solid #c3c4c7;
}

.plugin-check__file-results-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
margin: 0;
padding: 12px 14px;
border: 0;
background: transparent;
color: #1d2327;
font-size: 14px;
font-weight: 600;
text-align: left;
cursor: pointer;
}

.plugin-check__file-results-leading {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}

.plugin-check__file-results-toggle .dashicons {
flex-shrink: 0;
width: 20px;
height: 20px;
font-size: 20px;
}

.plugin-check__file-results-file-icon,
.plugin-check__file-results-toggle-icon {
color: #2271b1;
}

.plugin-check__file-results-toggle-icon {
transition: transform 300ms ease;
}

.plugin-check__file-results:not(:has(.plugin-check__file-results-panel.open))
.plugin-check__file-results-toggle-icon {
transform: rotate(-90deg);
}

.plugin-check__file-results-label {
overflow-wrap: anywhere;
}

.plugin-check__file-results-panel {
height: 0;
overflow: hidden;
transition: height 300ms ease;
}

.plugin-check__file-results-panel.open {
height: auto;
}

.plugin-check__file-results-panel .plugin-check__results-table {
margin: 0;
border: 0;
}

@supports not (interpolate-size: allow-keywords) {
.plugin-check__file-results-panel {
transition: none;
}
}

.plugin-check__options {
display: flex;
}
Expand Down
95 changes: 95 additions & 0 deletions assets/js/plugin-check-admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@
const exportContainer = document.getElementById(
'plugin-check__export-controls'
);
const resultsToolbar = document.getElementById(

Check failure on line 7 in assets/js/plugin-check-admin.js

View workflow job for this annotation

GitHub Actions / Lint 

Variables should not be assigned until just prior its first reference. An early return statement may leave this variable unused
'plugin-check__results-toolbar'
);
const expandAllButton = document.getElementById(

Check failure on line 10 in assets/js/plugin-check-admin.js

View workflow job for this annotation

GitHub Actions / Lint 

Variables should not be assigned until just prior its first reference. An early return statement may leave this variable unused
'plugin-check__expand-all'
);
const collapseAllButton = document.getElementById(

Check failure on line 13 in assets/js/plugin-check-admin.js

View workflow job for this annotation

GitHub Actions / Lint 

Variables should not be assigned until just prior its first reference. An early return statement may leave this variable unused
'plugin-check__collapse-all'
);
const spinner = document.getElementById( 'plugin-check__spinner' );
const pluginsList = document.getElementById(
'plugin-check__plugins-dropdown'
Expand Down Expand Up @@ -32,8 +41,76 @@
let falsePositiveResults = createEmptyAggregatedResults();
let checksCompleted = false;
exportContainer.classList.add( 'is-hidden' );
if ( resultsToolbar ) {
resultsToolbar.classList.add( 'is-hidden' );
}
exportContainer.addEventListener( 'click', onExportContainerClick );

if ( expandAllButton && collapseAllButton ) {
expandAllButton.addEventListener( 'click', () => {
setAllFileResultsExpanded( true );
} );
collapseAllButton.addEventListener( 'click', () => {
setAllFileResultsExpanded( false );
} );
resultsContainer.addEventListener( 'click', onFileResultsToggleClick );
}

/**

Check failure on line 59 in assets/js/plugin-check-admin.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected JSDoc block lines to be aligned
* Sets expanded/collapsed state for one file results section.
*
* @param {HTMLElement} section File results wrapper.
* @param {boolean} expanded Whether the section is expanded.
*/
function setFileResultsExpanded( section, expanded ) {
const toggle = section.querySelector(
'.plugin-check__file-results-toggle'
);
const panel = section.querySelector( '.plugin-check__file-results-panel' );

Check failure on line 69 in assets/js/plugin-check-admin.js

View workflow job for this annotation

GitHub Actions / Lint 

Replace `·'.plugin-check__file-results-panel'·` with `⏎↹↹↹'.plugin-check__file-results-panel'⏎↹↹`

if ( toggle ) {
toggle.setAttribute( 'aria-expanded', expanded ? 'true' : 'false' );
}
if ( panel ) {
panel.classList.toggle( 'open', expanded );
}
}

/**
* Expands or collapses every file results section.
*
* @param {boolean} expanded Whether sections should be expanded.
*/
function setAllFileResultsExpanded( expanded ) {
resultsContainer
.querySelectorAll( '.plugin-check__file-results' )
.forEach( ( section ) => {
setFileResultsExpanded( section, expanded );
} );
}

/**
* Toggles one file results section.
*
* @param {Event} event Click event.
*/
function onFileResultsToggleClick( event ) {
const toggle = event.target.closest(
'.plugin-check__file-results-toggle'
);
if ( ! toggle ) {
return;
}

const section = toggle.closest( '.plugin-check__file-results' );
if ( ! section ) {
return;
}

const isExpanded = toggle.getAttribute( 'aria-expanded' ) === 'true';
setFileResultsExpanded( section, ! isExpanded );
}

const includeExperimental = document.getElementById(
'plugin-check__include-experimental'
);
Expand Down Expand Up @@ -122,6 +199,9 @@
resultsContainer.innerText = '';
exportContainer.innerHTML = '';
exportContainer.classList.add( 'is-hidden' );
if ( resultsToolbar ) {
resultsToolbar.classList.add( 'is-hidden' );
}
resetAggregatedResults();
checksCompleted = false;
}
Expand Down Expand Up @@ -420,14 +500,29 @@
return '';
}

function updateResultsToolbarVisibility() {
if ( ! resultsToolbar ) {
return;
}

const hasFileResults = resultsContainer.querySelector(
'.plugin-check__file-results'
);
resultsToolbar.classList.toggle( 'is-hidden', ! hasFileResults );
}

function renderExportButtons() {
exportContainer.innerHTML = '';
if ( ! checksCompleted ) {
exportContainer.classList.add( 'is-hidden' );
if ( resultsToolbar ) {
resultsToolbar.classList.add( 'is-hidden' );
}
return;
}

exportContainer.classList.remove( 'is-hidden' );
updateResultsToolbarVisibility();

const exportButtonConfigs = [
{
Expand Down
12 changes: 3 additions & 9 deletions includes/Admin/Admin_Page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,17 +413,11 @@ public function admin_footer() {
);
?>
<style>
#plugin-check__results .notice,
#plugin-check__results .notice + h4 {
#plugin-check__results .notice {
margin-top: 20px;
}
#plugin-check__results h4:first-child {
margin-top: 80.5px;
}
@media ( max-width: 782px ) {
#plugin-check__results h4:first-child {
margin-top: 88.5px;
}
#plugin-check__results .notice + .plugin-check__file-results {
margin-top: 12px;
}
.plugin-check__export-controls {
margin-top: 24px;
Expand Down
10 changes: 10 additions & 0 deletions templates/admin-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,16 @@
</div>

<div id="plugin-check__export-controls" class="plugin-check__export-controls"></div>
<div id="plugin-check__results-toolbar" class="plugin-check__results-toolbar is-hidden" aria-label="<?php esc_attr_e( 'Results table controls', 'plugin-check' ); ?>">
<button type="button" id="plugin-check__collapse-all" class="button plugin-check__toolbar-button">
<span class="dashicons dashicons-arrow-up-alt2" aria-hidden="true"></span>
<?php esc_html_e( 'Collapse All', 'plugin-check' ); ?>
</button>
<button type="button" id="plugin-check__expand-all" class="button plugin-check__toolbar-button">
<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
<?php esc_html_e( 'Expand All', 'plugin-check' ); ?>
</button>
</div>
<div id="plugin-check__results"></div>

</div>
76 changes: 47 additions & 29 deletions templates/results-table.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,47 @@
<h4><?php esc_html_e( 'FILE:', 'plugin-check' ); ?> {{ data.file }}</h4>
<table id="plugin-check__results-table-{{data.index}}" class="widefat striped plugin-check__results-table">
<thead>
<tr>
<td>
<?php esc_html_e( 'Line', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Column', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Type', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Code', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Message', 'plugin-check' ); ?>
</td>
<# if ( data.hasLinks ) { #>
<td>
<?php esc_html_e( 'Edit Link', 'plugin-check' ); ?>
</td>
<# } #>
</tr>
</thead>
<tbody id="plugin-check__results-body-{{data.index}}"></tbody>
</table>
<br>
<div class="plugin-check__file-results">
<div class="plugin-check__file-results-header">
<button
type="button"
class="plugin-check__file-results-toggle"
aria-expanded="true"
aria-controls="plugin-check__results-panel-{{data.index}}"
>
<span class="plugin-check__file-results-leading">
<span class="plugin-check__file-results-file-icon dashicons dashicons-media-default" aria-hidden="true"></span>
<span class="plugin-check__file-results-label">
<?php esc_html_e( 'FILE:', 'plugin-check' ); ?> {{ data.file }}
</span>
</span>
<span class="plugin-check__file-results-toggle-icon dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
</button>
</div>
<div id="plugin-check__results-panel-{{data.index}}" class="plugin-check__file-results-panel open">
<table id="plugin-check__results-table-{{data.index}}" class="widefat striped plugin-check__results-table">
<thead>
<tr>
<td>
<?php esc_html_e( 'Line', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Column', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Type', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Code', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Message', 'plugin-check' ); ?>
</td>
<# if ( data.hasLinks ) { #>
<td>
<?php esc_html_e( 'Edit Link', 'plugin-check' ); ?>
</td>
<# } #>
</tr>
</thead>
<tbody id="plugin-check__results-body-{{data.index}}"></tbody>
</table>
</div>
</div>
Loading