feat: add option to collapse/expand transcript panel by Yash-Raj-5424 · Pull Request #3801 · code-charity/youtube

Yash-Raj-5424 · 2026-04-21T19:44:03Z

Add collapse/expand button to transcript panel

Description

This PR adds an optional collapse/expand button to the YouTube transcript panel, allowing users to save screen space while watching videos.

Changes

Added collapse/expand toggle button (−/+) to transcript panel header
New transcript_collapse setting in Appearance → Sidebar menu
When collapsed, transcript panel shrinks to 60px width with vertical title text
Added localization string for the feature

Files Modified

_locales/en/messages.json - Added localization string
js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css - Styling for collapsed state
js&css/web-accessible/core.js - Initialize collapse button when transcript opens
js&css/web-accessible/www.youtube.com/appearance.js - Button creation and toggle logic
menu/skeleton-parts/appearance.js - Settings menu entry

Testing

Verify button appears when transcript feature is enabled
Test collapse/expand toggle functionality
Confirm styling works across different video pages
Validate transcript content is accessible when expanded

Copilot

Pull request overview

Adds an optional collapse/expand control for the YouTube transcript sidebar panel, controlled via a new Appearance → Sidebar setting, to reduce on-screen space usage when the transcript is open.

Changes:

Adds new transcript_collapse appearance setting and English locale string.
Injects a collapse/expand button into the transcript panel and toggles a document attribute to drive collapsed styling.
Adds CSS rules to render the transcript panel in a narrow “collapsed” mode with vertical title text.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
`menu/skeleton-parts/appearance.js`	Adds `transcript_collapse` switch to the Appearance → Sidebar settings UI.
`js&css/web-accessible/www.youtube.com/appearance.js`	Implements `transcriptCollapseButton()` and hooks it into transcript opening.
`js&css/web-accessible/core.js`	Attempts to initialize the collapse button when transcript setting is enabled via storage changes.
`js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css`	Adds collapsed-state layout rules (60px width + vertical title + hide content).
`_locales/en/messages.json`	Adds the English label for the new setting.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-21T19:49:06Z

+ImprovedTube.transcriptCollapseButton = function (el) {
+    if (ImprovedTube.storage.transcript_collapse !== true) return;
+
+    const transcriptPanel = el?.querySelector('[target-id*=transcript]');
+    if (!transcriptPanel) return;
+
+    // Check if button already exists
+    if (transcriptPanel.querySelector('#it-transcript-collapse-btn')) return;


transcriptCollapseButton returns early when storage.transcript_collapse is false, but there’s no corresponding cleanup when the setting is toggled off after the button/it-transcript-collapsed attribute have already been applied. This can leave the panel collapsed (and/or the button still present and functional) even though the setting is disabled. Consider adding a storage-change handler to remove the button and clear it-transcript-collapsed when transcript_collapse becomes false.

Thanks for the feedback! I've added a cleanup handler to resolve this.

Fix:

Added ImprovedTube.cleanupTranscriptCollapse() to remove the button and clear the collapsed state

Added storage event listener to automatically clean up when transcript_collapse is toggled off

Now disabling the setting will properly remove the button and return the panel to normal state.

Copilot · 2026-04-21T19:49:07Z

+    // Create collapse/expand button
+    const button = document.createElement('button');
+    button.id = 'it-transcript-collapse-btn';
+    button.style.cssText = `
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 999;
+        padding: 4px 8px;
+        background: var(--yt-spec-button-chip-background);
+        border: 1px solid var(--yt-spec-10-percent-layer);
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 12px;
+        color: var(--yt-spec-text-primary);
+    `;
+
+    let isCollapsed = false;
+    button.textContent = '−'; // collapse symbol
+


The collapse/expand button is created without any accessible name (no aria-label, title, or tooltip dataset), and its visible text is just “−/+”. Add an accessible label (and ideally a localized tooltip) so screen readers and keyboard users can understand the control.

Added accessibility improvements:

Changes:

Added aria-label attribute for screen reader support

Added title attribute for tooltip on hover

Labels dynamically update based on button state (Collapse/Expand)

Now the button is accessible to both screen readers and keyboard users.

Copilot · 2026-04-21T19:49:07Z

+    button.style.cssText = `
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 999;
+        padding: 4px 8px;
+        background: var(--yt-spec-button-chip-background);
+        border: 1px solid var(--yt-spec-10-percent-layer);
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 12px;
+        color: var(--yt-spec-text-primary);
+    `;


This new UI control is styled via a large button.style.cssText block. In this file, other custom buttons generally use a class name (e.g., improvedtube-player-button) and rely on CSS, which is easier to maintain and theme consistently. Consider moving these styles into the existing YouTube appearance CSS and just toggling a class/id from JS.

I've refactored the button styling:

Changes:

Moved all inline cssText styles from JavaScript to sidebar.css

Used ID selector #it-transcript-collapse-btn for cleaner styling

JavaScript now only handles HTML structure and event logic

Copilot · 2026-04-21T19:49:07Z

+ImprovedTube.transcriptCollapseButton = function (el) {
+    if (ImprovedTube.storage.transcript_collapse !== true) return;
+
+    const transcriptPanel = el?.querySelector('[target-id*=transcript]');
+    if (!transcriptPanel) return;
+
+    // Check if button already exists
+    if (transcriptPanel.querySelector('#it-transcript-collapse-btn')) return;
+
+    // Create collapse/expand button
+    const button = document.createElement('button');
+    button.id = 'it-transcript-collapse-btn';
+    button.style.cssText = `
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 999;
+        padding: 4px 8px;
+        background: var(--yt-spec-button-chip-background);
+        border: 1px solid var(--yt-spec-10-percent-layer);
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 12px;
+        color: var(--yt-spec-text-primary);
+    `;
+
+    let isCollapsed = false;
+    button.textContent = '−'; // collapse symbol
+
+    button.onclick = function(e) {
+        e.stopPropagation();
+        isCollapsed = !isCollapsed;
+
+        if (isCollapsed) {
+            document.documentElement.setAttribute('it-transcript-collapsed', 'true');
+            button.textContent = '+'; // expand symbol
+        } else {
+            document.documentElement.removeAttribute('it-transcript-collapsed');
+            button.textContent = '−'; // collapse symbol
+        }
+    };


New transcript collapse behavior is introduced here, but there’s no corresponding unit test coverage. The repo already has unit tests that assert specific behaviors in appearance.js (e.g., tests/unit/remaining-duration.test.js), so adding a small test to verify the collapse button logic (attribute toggling + initial state label) would help prevent regressions.

I've added comprehensive unit test coverage.

Changes:

Created tests/unit/transcript-collapse.test.js with 14 test cases

Tests verify:

Button creation with correct ID and accessibility attributes

Collapsed state toggling via attribute manipulation

Aria-label updates based on state

Storage event listener functionality

Cleanup function behavior

CSS styling in sidebar.css

Settings configuration in menu

Message translation definitions

Tests follow the existing patterns in the repo (like in remaining-duration.test.js) and ensure the feature won't regress.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…led off

…//github.com/Yash-Raj-5424/youtube into feat/add-option-to-collapse-transcript-panel

…ollapse button

…nability

rajanarahul93 · 2026-04-26T04:55:05Z

@Yash-Raj-5424 Thank you for your contribution. Can you attach any screenshots or a screen recording?

Yash-Raj-5424 · 2026-04-26T04:59:32Z

hi @rajanarahul93
Actually There seems to be an issue the button isn't visible.
I'll try to fix it shortly.
Thanks

feat: add option to collapse/expand transcript panel

e2fdbf0

Copilot AI review requested due to automatic review settings April 21, 2026 19:44

Copilot started reviewing on behalf of Yash-Raj-5424 April 21, 2026 19:44 View session

Copilot AI reviewed Apr 21, 2026

View reviewed changes

Yash-Raj-5424 and others added 8 commits April 22, 2026 01:22

Update js&css/web-accessible/core.js

c8eab4a

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update js&css/web-accessible/www.youtube.com/appearance.js

0a34a99

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update js&css/web-accessible/www.youtube.com/appearance.js

48727ff

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

fix: add cleanup handler for transcript collapse when setting is togg…

3eafd64

…led off

Merge branch 'feat/add-option-to-collapse-transcript-panel' of https:…

3b841da

…//github.com/Yash-Raj-5424/youtube into feat/add-option-to-collapse-transcript-panel

fix: add accessibility attributes (aria-label, title) to transcript c…

21e9d2e

…ollapse button

refactor: move button styles from inline JS to CSS for better maintai…

172db58

…nability

test: add unit tests for transcript collapse button functionality

3cc4c03

rajanarahul93 added the generated? label Apr 24, 2026

Uh oh!

Conversation

Yash-Raj-5424 commented Apr 21, 2026

Add collapse/expand button to transcript panel

Description

Changes

Files Modified

Testing

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Yash-Raj-5424 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Yash-Raj-5424 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Yash-Raj-5424 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Yash-Raj-5424 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

rajanarahul93 commented Apr 26, 2026

Uh oh!

Yash-Raj-5424 commented Apr 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants