From 95e3271e7942e39e4646bc0ca67e1d0ca50539e0 Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Tue, 28 Sep 2021 09:27:10 -0700 Subject: [PATCH] Address cache related FIXMEs Follows up the sticky header search refactors in caed16e Change-Id: I5832bc04f0c675ff8bc1a00fff17b6b9f8399e6e --- resources/common/components/MenuDropdown.less | 3 -- resources/common/components/SearchBox.less | 14 ++------- .../skins.vector.search.js | 3 +- .../layouts/screen.less | 5 ---- .../components/Header.less | 4 +-- .../components/UserLinks.less | 9 ------ .../components/VueEnhancedSearchBox.less | 29 ++++--------------- .../skins.vector.styles/layouts/screen.less | 3 +- 8 files changed, 11 insertions(+), 59 deletions(-) diff --git a/resources/common/components/MenuDropdown.less b/resources/common/components/MenuDropdown.less index a4b6079..06bae63 100644 --- a/resources/common/components/MenuDropdown.less +++ b/resources/common/components/MenuDropdown.less @@ -164,9 +164,6 @@ } } -// FIXME: `mw-portlet-` selectors are for cached HTML. Remove after 1 week. (T283757) -.mw-portlet-variants, -.mw-portlet-cactions, .vector-menu-dropdown-noicon { h3 { // `padding-top` needs to scale with font-size. diff --git a/resources/common/components/SearchBox.less b/resources/common/components/SearchBox.less index dbb534c..bb19953 100644 --- a/resources/common/components/SearchBox.less +++ b/resources/common/components/SearchBox.less @@ -4,9 +4,7 @@ // Defined as `div`. // Provide extra element for gadgets due to `form` already carrying an `id`. -// FIXME: Remove #simpleSearch when cache has cleared -.vector-search-box-inner, -#simpleSearch { +.vector-search-box-inner { position: relative; height: 100%; } @@ -15,8 +13,6 @@ // Note that these rules only apply to the non-Vue enabled search input field. // When Vue.js has loaded this element will no longer be in the page and subsituted with // a WVUI element. -// FIXME: Remove searchInput selector when cache has cleared. -#searchInput, .vector-search-box-input { background-color: rgba( 255, 255, 255, 0.5 ); color: @color-base--emphasized; @@ -41,16 +37,12 @@ // Support: Firefox. -moz-appearance: textfield; - // FIXME: Remove #simpleSearch when cache has cleared - .vector-search-box-inner:hover &, - #simpleSearch:hover & { + .vector-search-box-inner:hover & { border-color: @colorGray7; } - // FIXME: #simpleSearch can be removed when cache has cleared. &:focus, - .vector-search-box-inner:hover &:focus, - #simpleSearch:hover &:focus { + .vector-search-box-inner:hover &:focus { outline: 0; border-color: @border-color-base--focus; box-shadow: @box-shadow-base--focus; diff --git a/resources/skins.vector.search/skins.vector.search.js b/resources/skins.vector.search/skins.vector.search.js index e9f808b..dc7fcd2 100644 --- a/resources/skins.vector.search/skins.vector.search.js +++ b/resources/skins.vector.search/skins.vector.search.js @@ -61,8 +61,7 @@ function initApp( searchForms ) { */ function main( document ) { var - // FIXME: Use .vector-search-box-form instead when cache allows. - searchForms = document.querySelectorAll( '.vector-search-box form' ); + searchForms = document.querySelectorAll( '.vector-search-box-form' ); initApp( searchForms ); } diff --git a/resources/skins.vector.styles.legacy/layouts/screen.less b/resources/skins.vector.styles.legacy/layouts/screen.less index 78802f1..79b95da 100644 --- a/resources/skins.vector.styles.legacy/layouts/screen.less +++ b/resources/skins.vector.styles.legacy/layouts/screen.less @@ -128,9 +128,6 @@ body { // Defined as `div`. // Provide extra element for gadgets due to `form` already carrying an `id`. // FIXME: This selector requires knowledge of the internals of the search component -// FIXME: #simpleSearch selector can be removed when cache has cleared. -// and should not be used here. -#simpleSearch, .vector-search-box-inner { min-width: 5em; // Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-. @@ -182,8 +179,6 @@ body { padding-left: 0.5em; } - // FIXME: p-search is for cached HTML only. Can be removed in 1 week. - #p-search, .vector-search-box { margin-right: 1em; } diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less index 4ea2252..5c0b535 100644 --- a/resources/skins.vector.styles/components/Header.less +++ b/resources/skins.vector.styles/components/Header.less @@ -45,9 +45,7 @@ min-width: @min-width-search-desktop; flex-basis: @min-width-search; - // FIXME: Modify to use .vector-search-box-form when cache allows. - // When changing check the specificity is strong enough so that is still applies. - > div > form, + &-form, .wvui-typeahead-search { max-width: @max-width-search; } diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less index a7536e7..5bd080e 100644 --- a/resources/skins.vector.styles/components/UserLinks.less +++ b/resources/skins.vector.styles/components/UserLinks.less @@ -78,11 +78,6 @@ .mw-ui-icon ~ span { .mixin-screen-reader-text(); } - - // FIXME: For cached HTML only. - &.mw-ui-icon > span { - color: transparent; - } } .vector-menu-content { @@ -103,14 +98,10 @@ } } - // FIXME: Remove `li` selector when T289163 is addressed. - li, .mw-list-item { width: 100%; } - // FIXME: Remove `li > a` selector when T289163 is addressed. - li > a, .vector-menu-content-item, .mw-list-item > a { // Overrides .mw-ui-icon's `min-height` property to have a computed diff --git a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less index 77c843c..286c22e 100644 --- a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less +++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less @@ -27,25 +27,17 @@ } // Typeahead search elements -// FIXME: remove ID selectors when cache has cleared. -#searchInput, -#searchButton, -#mw-searchButton, .vector-search-box-vue .vector-search-box-input, .vector-search-box-vue .searchButton { // Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less font-size: inherit; } -// FIXME: remove #searchInput selector when cache has cleared. -.vector-search-box-vue .vector-search-box-input, -#searchInput { +.vector-search-box-vue .vector-search-box-input { height: @size-base; } -// FIXME: Remove searchButton when cache has cleared. -.vector-search-box-vue .searchButton, -#searchButton { +.vector-search-box-vue .searchButton { background-size: @background-size-x-search-button auto; } @@ -69,9 +61,7 @@ margin-bottom: 0; } - // FIXME: Remove #searchInput selector when cache has cleared. - .vector-search-box-input, - #searchInput { + .vector-search-box-input { padding-left: @size-search-figure; // Derived from @padding-input-text in WVUI's Input component. padding-right: 8px; @@ -102,13 +92,9 @@ .transition( none ); } - // FIXME: .p-search--show-thumbnail selector is for cached HTML relating to T276566. - .p-search--show-thumbnail, .vector-search-box-show-thumbnail { // Recreate WVUI expanding input. - // FIXME: Remove #searchInput selector when cache has cleared. - .vector-search-box-input:focus, - #searchInput:focus { + .vector-search-box-input:focus { position: relative; // Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation. padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )'; @@ -117,10 +103,7 @@ } // Reposition search icon for expanded input. - // FIXME: Remove #searchInput selectors when cache has cleared. - .vector-search-box-input:focus ~ .searchButton, - #searchInput:focus ~ #searchButton, - #searchInput:focus ~ #mw-searchButton { + .vector-search-box-input:focus ~ .searchButton { // Derived from // https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655 // (12px of space between the border and the icon) with 1px to account for the focused input border. @@ -129,8 +112,6 @@ } // Update search loader to match width and position of WVUI expanding input. - // FIXME: Remove #simpleSearch selector when cache has cleared. - #simpleSearch.search-form__loader:after, .vector-search-box-inner.search-form__loader:after { width: ~'calc( 100% + @{size-search-expand} )'; left: ~'calc( -1 * @{size-search-expand} )'; diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index 1502929..d2047f6 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -127,8 +127,7 @@ body { .mw-body #p-lang-btn { float: right; } -// FIXME: [ id='bodyContent' ] selector needed for cached HTML. -[ id='bodyContent' ], + .vector-body { position: relative; z-index: @z-index-base;