From b594daf8c803d4ae46f4c7da8af6c67e90beaae4 Mon Sep 17 00:00:00 2001 From: Stephen Niedzielski Date: Thu, 25 Apr 2019 12:58:16 -0600 Subject: [PATCH] Fix: AMC overflow menu initial CSS and SSR icons When advanced mobile contributions is enabled and the overflow menu is shown: - The initial state should have no transition. This prevents the menu from flickering initially. Move the transition to the checked state only. - The icons should be available for server-side rendered HTML without JavaScript. Add wikimedia.ui to the SSR modules. Bug: T216418#5129152 Change-Id: I3b91f6cdefd4b727c2fb512272d8c4282af632bf --- includes/skins/SkinMinerva.php | 3 ++- resources/skins.minerva.base.styles/pageactions.less | 10 +++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php index e3543f8..32f195d 100644 --- a/includes/skins/SkinMinerva.php +++ b/includes/skins/SkinMinerva.php @@ -1221,7 +1221,8 @@ class SkinMinerva extends SkinTemplate { 'mediawiki.hlist', 'mediawiki.ui.icon', 'mediawiki.ui.button', - 'skins.minerva.icons.images' + 'skins.minerva.icons.images', + 'wikimedia.ui' ]; if ( $title->isMainPage() ) { $styles[] = 'skins.minerva.mainPage.styles'; diff --git a/resources/skins.minerva.base.styles/pageactions.less b/resources/skins.minerva.base.styles/pageactions.less index b4a9f6a..4f78fbe 100644 --- a/resources/skins.minerva.base.styles/pageactions.less +++ b/resources/skins.minerva.base.styles/pageactions.less @@ -134,12 +134,16 @@ box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px @colorGray10; border-radius: @borderRadius; // - // Animate menu visibility, opacity, and translation changes in and out. Visibility must be - // animated since it's a boolean and nothing can be seen in the hidden state. visibility: hidden; opacity: 0; transform: translateY( -8px ); - .transition( visibility .1s ease-in-out, opacity .1s ease-in-out, transform .1s ease-in-out; ); + + // Animate menu visibility, opacity, and translation changes in and out. Visibility must be + // animated since it's a boolean and nothing can be seen in display hidden. Visibility itself + // cannot be animated as it causes a flash on page load in Chromium due to + // https://bugs.chromium.org/p/chromium/issues/detail?id=332189. The effect is that the menu is + // animated in but not animated out. + .transition( opacity .1s ease-in-out, transform .1s ease-in-out; ); } .toolbar-overflow-menu__list-item {