Skip to content

Fix: Update experiment flags for "Undo the new sidebar" #3963

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
conor27nash wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix: Update experiment flags for "Undo the new sidebar" #3963

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
bc282de
Fix: undo new sidebar stopped working
Jun 12, 2026
8266bd6
Add back legacy flags
Jun 16, 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
61 changes: 45 additions & 16 deletions js&css/web-accessible/www.youtube.com/appearance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,59 @@
APPEARANCE
------------------------------------------------------------------------------*/
ImprovedTube.YouTubeExperiments = function () {
if ((this.storage.undo_the_new_sidebar === "true" || this.storage.description === "sidebar")
if ((this.storage.undo_the_new_sidebar === true || this.storage.undo_the_new_sidebar === "true"
|| this.storage.description === "sidebar")
&& document.documentElement.dataset.pageType === 'video') {
if (window.yt?.config_?.EXPERIMENT_FLAGS) {
const newSidebarFlags = [
'kevlar_watch_grid',
'small_avatars_for_comments',
'small_avatars_for_comments_ep',
'web_watch_rounded_player_large'
];
if (this.storage.undo_the_new_sidebar === "true") {
if (window.yt.config_.EXPERIMENT_FLAGS.kevlar_watch_grid !== false) {
if (window.yt?.config_?.EXPERIMENT_FLAGS) {
const newSidebarFlags = {
enable_lockup_redesign: true,
enable_profile_cards_on_comments: true,
kevlar_player_unified_player_loading: true,
kevlar_unified_player: true,
web_watch_move_lockup_overflow_menu: true,
web_watch_use_secondary_max_width_percent: true,
web_watch_use_sidebar_width_percentage: true,
kevlar_watch_secondary_max_width: 700,
kevlar_watch_sidebar_min_width: 200,
kevlar_watch_sidebar_width_percentage: 0.275,
web_watch_compact_thumbnail_width_string: '62.5%',
kevlar_watch_grid: true, // legacy
small_avatars_for_comments: true, // legacy
small_avatars_for_comments_ep: true, // legacy
web_watch_rounded_player_large: true, // legacy
};
const oldSidebarFlags = {
enable_lockup_redesign: false,
enable_profile_cards_on_comments: false,
kevlar_player_unified_player_loading: false,
kevlar_unified_player: false,
web_watch_move_lockup_overflow_menu: false,
web_watch_use_secondary_max_width_percent: false,
web_watch_use_sidebar_width_percentage: false,
kevlar_watch_secondary_max_width: 550,
kevlar_watch_sidebar_min_width: 300,
kevlar_watch_sidebar_width_percentage: 0.25,
web_watch_compact_thumbnail_width_string: '168px',
kevlar_watch_grid: false, // legacy
small_avatars_for_comments: false, // legacy
small_avatars_for_comments_ep: false, // legacy
web_watch_rounded_player_large: false, // legacy
};
if (this.storage.undo_the_new_sidebar === true || this.storage.undo_the_new_sidebar === "true") {
if (window.yt.config_.EXPERIMENT_FLAGS.enable_lockup_redesign !== false) {
try {
newSidebarFlags.forEach(F => {
Object.defineProperty(window.yt.config_.EXPERIMENT_FLAGS, F, { get: () => false });
Object.entries(oldSidebarFlags).forEach(([key, val]) => {
Object.defineProperty(window.yt.config_.EXPERIMENT_FLAGS, key, { get: () => val, configurable: true });
});
} catch (error) { console.error("can't undo description on the side", error); }
}} else if (this.storage.description === "sidebar" && window.yt.config_.EXPERIMENT_FLAGS.kevlar_watch_grid !== true) {
}} else if (this.storage.description === "sidebar" && window.yt.config_.EXPERIMENT_FLAGS.enable_lockup_redesign !== true) {
try {
newSidebarFlags.forEach(F => {
Object.defineProperty(window.yt.config_.EXPERIMENT_FLAGS, F, { get: () => true });
Object.entries(newSidebarFlags).forEach(([key, val]) => {
Object.defineProperty(window.yt.config_.EXPERIMENT_FLAGS, key, { get: () => val, configurable: true });
});
} catch (error) { console.error("tried to move description to the sidebar", error); }
}
} else { console.log ("yt.config_.EXPERIMENT_FLAGS is not yet defined") }
} else { console.log ("yt.config_.EXPERIMENT_FLAGS is not yet defined") }
}
}
/*try {
Expand Down
159 changes: 159 additions & 0 deletions tests/unit/undo-sidebar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
function setupGlobals(storage) {
const attrs = {};
global.document = {
documentElement: {
dataset: { pageType: 'video' },
setAttribute: jest.fn((k, v) => { attrs[k] = v; }),
removeAttribute: jest.fn((k) => { delete attrs[k]; }),
getAttribute: jest.fn((k) => attrs[k] || null),
style: {}
},
addEventListener: jest.fn(),
querySelector: jest.fn(() => null),
getElementById: jest.fn(() => null),
createElement: jest.fn(() => ({
setAttribute: jest.fn(), style: {}, appendChild: jest.fn(),
addEventListener: jest.fn(), classList: { add: jest.fn(), remove: jest.fn() }
})),
head: { appendChild: jest.fn() }
};
global.location = { href: 'https://www.youtube.com/watch?v=test', pathname: '/watch' };
global.navigator = { userAgent: 'Macintosh' };

const experimentFlags = {
// Flags that differ between logged-in (new sidebar) and logged-out (old sidebar)
enable_lockup_redesign: true,
enable_profile_cards_on_comments: true,
kevlar_player_unified_player_loading: true,
kevlar_unified_player: true,
web_watch_move_lockup_overflow_menu: true,
web_watch_use_secondary_max_width_percent: true,
web_watch_use_sidebar_width_percentage: true,
kevlar_watch_secondary_max_width: 700,
kevlar_watch_sidebar_min_width: 200,
kevlar_watch_sidebar_width_percentage: 0.275,
web_watch_compact_thumbnail_width_string: '62.5%',
// Legacy flags
kevlar_watch_grid: true,
small_avatars_for_comments: true,
small_avatars_for_comments_ep: true,
web_watch_rounded_player_large: true,
};

global.window = {
addEventListener: jest.fn(),
yt: { config_: { EXPERIMENT_FLAGS: experimentFlags } },
matchMedia: jest.fn(() => ({ matches: false, addListener: jest.fn(), removeListener: jest.fn() }))
};
global.MutationObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(), disconnect: jest.fn()
}));
global.ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(), disconnect: jest.fn()
}));

global.ImprovedTube = {
storage: storage,
elements: {}
};
}

function loadModule() {
jest.resetModules();
require('../../js&css/web-accessible/www.youtube.com/appearance.js');
}

function cleanup() {
delete global.document;
delete global.location;
delete global.navigator;
delete global.window;
delete global.ImprovedTube;
}

describe('YouTubeExperiments - undo new sidebar', () => {
afterEach(cleanup);

test('overrides experiment flags when undo_the_new_sidebar is enabled', () => {
setupGlobals({ undo_the_new_sidebar: 'true' });
loadModule();

ImprovedTube.YouTubeExperiments();

const flags = window.yt.config_.EXPERIMENT_FLAGS;
// Boolean flags reverted to false
expect(flags.enable_lockup_redesign).toBe(false);
expect(flags.enable_profile_cards_on_comments).toBe(false);
expect(flags.kevlar_player_unified_player_loading).toBe(false);
expect(flags.kevlar_unified_player).toBe(false);
expect(flags.web_watch_move_lockup_overflow_menu).toBe(false);
expect(flags.web_watch_use_secondary_max_width_percent).toBe(false);
expect(flags.web_watch_use_sidebar_width_percentage).toBe(false);
// Numeric/string flags reset to logged-out values
expect(flags.kevlar_watch_secondary_max_width).toBe(550);
expect(flags.kevlar_watch_sidebar_min_width).toBe(300);
expect(flags.kevlar_watch_sidebar_width_percentage).toBe(0.25);
expect(flags.web_watch_compact_thumbnail_width_string).toBe('168px');
// Legacy flags also reverted
expect(flags.kevlar_watch_grid).toBe(false);
expect(flags.small_avatars_for_comments).toBe(false);
expect(flags.small_avatars_for_comments_ep).toBe(false);
expect(flags.web_watch_rounded_player_large).toBe(false);
});

test('overrides experiment flags when undo_the_new_sidebar is boolean true', () => {
setupGlobals({ undo_the_new_sidebar: true });
loadModule();

ImprovedTube.YouTubeExperiments();

const flags = window.yt.config_.EXPERIMENT_FLAGS;
expect(flags.enable_lockup_redesign).toBe(false);
expect(flags.web_watch_compact_thumbnail_width_string).toBe('168px');
});

test('does not override flags when setting is disabled', () => {
setupGlobals({ undo_the_new_sidebar: 'false' });
loadModule();

ImprovedTube.YouTubeExperiments();

const flags = window.yt.config_.EXPERIMENT_FLAGS;
expect(flags.enable_lockup_redesign).toBe(true);
expect(flags.web_watch_compact_thumbnail_width_string).toBe('62.5%');
});

test('does not override flags on non-video pages', () => {
setupGlobals({ undo_the_new_sidebar: 'true' });
document.documentElement.dataset.pageType = 'browse';
loadModule();

ImprovedTube.YouTubeExperiments();

const flags = window.yt.config_.EXPERIMENT_FLAGS;
expect(flags.enable_lockup_redesign).toBe(true);
});

test('can be re-applied on SPA navigation without throwing', () => {
setupGlobals({ undo_the_new_sidebar: 'true' });
loadModule();

ImprovedTube.YouTubeExperiments();
expect(() => ImprovedTube.YouTubeExperiments()).not.toThrow();
});

test('forces new sidebar flags when description is sidebar', () => {
setupGlobals({ description: 'sidebar' });
// Simulate account without new sidebar (flags absent/false)
window.yt.config_.EXPERIMENT_FLAGS.enable_lockup_redesign = false;
loadModule();

ImprovedTube.YouTubeExperiments();

const flags = window.yt.config_.EXPERIMENT_FLAGS;
expect(flags.enable_lockup_redesign).toBe(true);
expect(flags.web_watch_use_sidebar_width_percentage).toBe(true);
expect(flags.kevlar_watch_secondary_max_width).toBe(700);
expect(flags.web_watch_compact_thumbnail_width_string).toBe('62.5%');
});
});