From 35e489de25a1b6cc86af00c152a41beae5411070 Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Fri, 13 Sep 2019 01:42:24 +0200
Subject: [PATCH] Fix truncated text showing through icons & last-modified bar

To accommodate for cached HTML a new class last-modified-bar__text
replaces last-modifier-tagline to help us distinguish between old
out dated HTML and the new HTML.

Bug: T232792
Bug: T232800
Change-Id: I53fa45058dbc81c91089840073e03113ff1a4b9c
---
 includes/skins/history.mustache               | 20 ++++++++++---------
 .../skins.minerva.base.styles/footer.less     | 15 +++++++++++++-
 resources/skins.minerva.base.styles/ui.less   |  2 +-
 resources/skins.minerva.scripts/init.js       |  2 +-
 .../mediawiki.ui.icon/mediawiki.ui.icon.less  |  3 ++-
 .../features/support/pages/article_page.js    |  3 +--
 6 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/includes/skins/history.mustache b/includes/skins/history.mustache
index 01c9d4a56..696318e0d 100644
--- a/includes/skins/history.mustache
+++ b/includes/skins/history.mustache
@@ -1,11 +1,13 @@
-<div class="content last-modified-bar view-border-box footer-element">
-	<div class="last-modifier-tagline truncated-text {{clockIconClass}}">
-		<span class="{{arrowIconClass}}"></span>
-		<a href="{{href}}"
-			data-user-name="{{data-user-name}}"
-			data-user-gender="{{data-user-gender}}"
-			data-timestamp="{{data-timestamp}}">
-			<span>{{text}}</span>
-		</a>
+<div class="last-modified-bar view-border-box footer-element">
+	<div class="content">
+		<div class="last-modified-bar__text truncated-text {{clockIconClass}}">
+			<span class="{{arrowIconClass}}"></span>
+			<a href="{{href}}"
+				data-user-name="{{data-user-name}}"
+				data-user-gender="{{data-user-gender}}"
+				data-timestamp="{{data-timestamp}}">
+				<span>{{text}}</span>
+			</a>
+		</div>
 	</div>
 </div>
diff --git a/resources/skins.minerva.base.styles/footer.less b/resources/skins.minerva.base.styles/footer.less
index f0c118849..e0ca22bb7 100644
--- a/resources/skins.minerva.base.styles/footer.less
+++ b/resources/skins.minerva.base.styles/footer.less
@@ -25,15 +25,28 @@ footer {
 		transition: background-color 0.2s ease, color 0.2s ease;
 	}
 
+	// for compatibility with cached HTML. Can be returned 2 weeks after
+	// I53fa45058dbc81c91089840073e03113ff1a4b9c lands.
 	.last-modifier-tagline {
+		height: 40px;
+		line-height: 40px;
+		font-size: @font-size-minerva-small;
+	}
+
+	.last-modified-bar__text {
 		@end-padding: @iconGutterWidth + @iconGutterWidth + @iconSize;
 		display: block;
+		height: auto;
+		padding-right: 40px;
 		.truncated-text();
 
+		&:before {
+			float: left;
+		}
+
 		> a,
 		> span > span,
 		> span:last-child {
-			display: inline-block;
 			font-size: @font-size-minerva-small;
 		}
 	}
diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less
index 3f4b7fca4..9e82828eb 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -62,7 +62,7 @@ main {
 	a:visited {
 		color: @colorGray5;
 		// If browser supports
-		&:nth-child( 2 ) {
+		&:nth-child( 1 ) {
 			font-weight: bold;
 		}
 	}
diff --git a/resources/skins.minerva.scripts/init.js b/resources/skins.minerva.scripts/init.js
index 2f8e326db..3892ef76d 100644
--- a/resources/skins.minerva.scripts/init.js
+++ b/resources/skins.minerva.scripts/init.js
@@ -323,7 +323,7 @@
 		initModifiedInfo();
 		initRegistrationInfo();
 		// eslint-disable-next-line no-jquery/no-global-selector
-		initHistoryLink( $( '.last-modifier-tagline a' ) );
+		initHistoryLink( $( '.last-modified-bar__text a' ) );
 		if ( toolbarElement ) {
 			Toolbar.bind( window, toolbarElement );
 			Toolbar.render( window, toolbarElement );
diff --git a/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less b/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less
index c7438c9a1..a1b1066ee 100644
--- a/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less
+++ b/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less
@@ -65,7 +65,6 @@
 	vertical-align: middle;
 	line-height: 0;
 	overflow: hidden;
-	white-space: nowrap;
 
 	// resetting styles for <button> elements
 	-moz-appearance: none;
@@ -94,6 +93,7 @@
 
 	// screen-reader text. Not using `text-indent: -999px` because
 	// the inner :before element is `display: block` so text-indent has no effect.
+	line-height: 999px;
 	color: transparent;
 
 	&:focus, &:active, &:visited {
@@ -122,6 +122,7 @@
 
 .mw-ui-icon-before {
 	width: auto;
+	max-width: 100%;
 
 	&:before {
 		.mixin-background-square();
diff --git a/tests/selenium/features/support/pages/article_page.js b/tests/selenium/features/support/pages/article_page.js
index 54fdad198..7e2504b90 100644
--- a/tests/selenium/features/support/pages/article_page.js
+++ b/tests/selenium/features/support/pages/article_page.js
@@ -26,8 +26,7 @@ class ArticlePage extends MinervaPage {
 	get overlay_category_topic_item_element() { return $( '.topic-title-list li' ); }
 	get red_link_element() { return $( 'a.new' ); }
 	get is_authenticated_element() { return $( 'body.is-authenticated' ); }
-	get last_modified_bar_history_link_element() { return $( '.last-modifier-tagline a[href*=\'Special:History\']' ); }
-
+	get last_modified_bar_history_link_element() { return $( '.last-modified-bar__text a[href*=\'Special:History\']' ); }
 }
 
 module.exports = new ArticlePage();