From 2ea12a11efa061e1a5aabe8a232a5fae90ce0b7e Mon Sep 17 00:00:00 2001 From: Jon Robson Date: Tue, 8 Aug 2023 11:04:11 -0700 Subject: [PATCH] Remove limited width cached HTML handling Bug: T343843 Change-Id: Ib49e8325fddef90e202d4e753526af45ed7b2c26 --- resources/skins.vector.js/features.js | 11 ------- .../skins.vector.js/limitedWidthToggle.js | 33 +++---------------- .../skins.vector.styles/layouts/grid.less | 6 +--- .../skins.vector.styles/layouts/preZebra.less | 4 +-- .../skins.vector.styles/layouts/screen.less | 4 +-- .../layouts/grid.less | 2 -- .../layouts/screen.less | 6 +--- 7 files changed, 9 insertions(+), 57 deletions(-) diff --git a/resources/skins.vector.js/features.js b/resources/skins.vector.js/features.js index 55cd0998a..607847e9e 100644 --- a/resources/skins.vector.js/features.js +++ b/resources/skins.vector.js/features.js @@ -13,17 +13,6 @@ function save( feature, enabled ) { if ( !mw.user.isNamed() ) { switch ( feature ) { case 'limited-width': - // FIXME: Cookie is set for cached HTML using the older inline script. - // When removing this code, - // please retain `mw.cookie.set( 'mwclientprefs', null );` for 1-4 weeks - // to clean up after ourselves so users don't have a non-expiring cookie which - // serves no purpose. - if ( enabled ) { - mw.cookie.set( 'mwclientprefs', null ); - } else { - mw.cookie.set( 'mwclientprefs', 'vector-feature-limited-width' ); - } - // Save the setting under the new system // @ts-ignore https://github.com/wikimedia/typescript-types/pull/44 mw.user.clientPrefs.set( `vector-feature-${feature}`, enabled ? '1' : '0' ); diff --git a/resources/skins.vector.js/limitedWidthToggle.js b/resources/skins.vector.js/limitedWidthToggle.js index 8a639da33..f19e47eb3 100644 --- a/resources/skins.vector.js/limitedWidthToggle.js +++ b/resources/skins.vector.js/limitedWidthToggle.js @@ -34,38 +34,15 @@ function init() { const settings = /** @type {HTMLElement|null} */ ( document.querySelector( '.vector-settings' ) ); const toggle = /** @type {HTMLElement|null} */ ( document.querySelector( '.vector-limited-width-toggle' ) ); const toggleIcon = /** @type {HTMLElement|null} */ ( document.querySelector( '.vector-limited-width-toggle .vector-icon' ) ); - const cookie = mw.cookie.get( 'mwclientprefs' ); - // @ts-ignore https://github.com/wikimedia/typescript-types/pull/42 - const existingValue = mw.user.clientPrefs.get( 'vector-feature-limited-width' ); - // On a cached page existingValue will return false. - // If the cookie is set then we need to add the appropriate class to the page - // so that the toggle works correctly. - if ( !existingValue ) { - document.documentElement.classList.add( - `vector-feature-limited-width-clientpref-${cookie ? '0' : '1'}` - ); - document.documentElement.classList.remove( - 'vector-feature-limited-width-disabled', - 'vector-feature-limited-width-enabled' - ); - } - // Sync cookie value with clientPrefs if the two are misaligned. - if ( cookie && existingValue === '1' ) { - // @ts-ignore https://github.com/wikimedia/typescript-types/pull/42 - mw.user.clientPrefs.set( 'vector-feature-limited-width', '0' ); - // Update the display. - document.documentElement.classList.remove( - 'vector-feature-limited-width-clientpref-1', - 'vector-feature-limited-width-enabled' - ); - document.documentElement.classList.add( - 'vector-feature-limited-width-clientpref-0' - ); - } if ( !settings || !toggle || !toggleIcon ) { return; } + // Remove any references to the old cookie. + // We retain this for longer than usual to make sure we remove this cookie from as + // many clients as possible. + // FIXME: This can be removed in November 2023. + mw.cookie.set( 'mwclientprefs', null ); setDataAttribute( toggle ); diff --git a/resources/skins.vector.styles/layouts/grid.less b/resources/skins.vector.styles/layouts/grid.less index d414711a1..72513b4b9 100644 --- a/resources/skins.vector.styles/layouts/grid.less +++ b/resources/skins.vector.styles/layouts/grid.less @@ -60,12 +60,10 @@ } } } -// FIXME: Remove -disabled when cache has cleared. + &.vector-feature-limited-width-clientpref-0 .mw-content-container, &.vector-feature-limited-width-clientpref-0 .mw-table-of-contents-container, -&.vector-feature-limited-width-disabled .mw-content-container, &.vector-feature-limited-width-content-disabled .mw-content-container, -&.vector-feature-limited-width-disabled .mw-table-of-contents-container, &.vector-feature-limited-width-content-disabled .mw-table-of-contents-container { // Allow the max-width of content on history/special pages to be wider than // the max-width of content on article pages. @@ -124,9 +122,7 @@ column-gap: @grid-column-gap; } - // FIXME: Remove -disabled when cache has cleared. &.vector-feature-limited-width-clientpref-0 .mw-body, - &.vector-feature-limited-width-disabled .mw-body, &.vector-feature-limited-width-content-disabled .mw-body { grid-template-columns: ~'minmax(0, 1fr) min-content'; } diff --git a/resources/skins.vector.styles/layouts/preZebra.less b/resources/skins.vector.styles/layouts/preZebra.less index 1168eface..119123db5 100644 --- a/resources/skins.vector.styles/layouts/preZebra.less +++ b/resources/skins.vector.styles/layouts/preZebra.less @@ -4,9 +4,7 @@ .mixin-page-container(); } -// FIXME: Remove -disabled when cache has cleared. -&.vector-feature-limited-width-clientpref-0 .vector-header-container, -&.vector-feature-limited-width-disabled .vector-header-container { +&.vector-feature-limited-width-clientpref-0 .vector-header-container { max-width: none; } diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index febfcac8a..3226ac75c 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -129,9 +129,7 @@ body { } } -// FIXME: Remove -disabled when cache has cleared. -&.vector-feature-limited-width-clientpref-0 .mw-page-container, -&.vector-feature-limited-width-disabled .mw-page-container { +&.vector-feature-limited-width-clientpref-0 .mw-page-container { max-width: none; } diff --git a/resources/skins.vector.zebra.styles/layouts/grid.less b/resources/skins.vector.zebra.styles/layouts/grid.less index 6480c7f20..d99bbfff4 100644 --- a/resources/skins.vector.zebra.styles/layouts/grid.less +++ b/resources/skins.vector.zebra.styles/layouts/grid.less @@ -115,9 +115,7 @@ column-gap: @grid-column-gap; } - // FIXME: Remove -disabled when cache has cleared. &.vector-feature-limited-width-clientpref-0 .mw-body, - &.vector-feature-limited-width-disabled .mw-body, &.vector-feature-limited-width-content-disabled .mw-body { grid-template-columns: ~'minmax(0, 1fr) min-content'; } diff --git a/resources/skins.vector.zebra.styles/layouts/screen.less b/resources/skins.vector.zebra.styles/layouts/screen.less index bcccc7401..0b8f30ce4 100644 --- a/resources/skins.vector.zebra.styles/layouts/screen.less +++ b/resources/skins.vector.zebra.styles/layouts/screen.less @@ -183,13 +183,9 @@ body { .mixin-vector-page-container-sizing(); } -// FIXME: Remove -disabled when cache has cleared. &.vector-feature-limited-width-clientpref-0 .mw-page-container, &.vector-feature-limited-width-clientpref-0 .vector-sticky-header, -&.vector-feature-limited-width-clientpref-0 .mw-header, -&.vector-feature-limited-width-disabled .mw-page-container, -&.vector-feature-limited-width-disabled .vector-sticky-header, -&.vector-feature-limited-width-disabled .mw-header { +&.vector-feature-limited-width-clientpref-0 .mw-header { max-width: none; }