From: Moriel Schottlender <moriel@gmail.com>
Date: Wed, 20 Jun 2018 22:14:23 +0000 (-0700)
Subject: RCFilters: Fix saved filter name truncation for Firefox
X-Git-Tag: 1.34.0-rc.0~4995^2
X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=commitdiff_plain;h=c6bc5a257d7647b5c089bfa6dbda89711dac85ef

RCFilters: Fix saved filter name truncation for Firefox

Firefox seem to have a bit of trouble with variable-width flexbox
div that need to be truncated with an ellipses.

This fix includes a couple of changes:
* Split the three elements of the title into three separate divs,
  and define the flex divs properly for a variable-width one in
  the middle.
* Taking advantage of #1, clean up the class names too (move to
  under '-top-xxx' classes for better organization in the LESS
  file too.
* Add a max-width: 100% rule to the label that gets
  truncated; this seems to force Firefox to recalculate its proper
  width while in flexbox and actually add the ellipses.

Bug: T197835
Change-Id: Ibe2002a5fe9006f262b2256cae222fed9e9a8fd0
---

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
index a2b3eb7313..7721275e93 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
@@ -66,19 +66,25 @@
 			display: flex;
 			flex-wrap: nowrap;
 			justify-content: space-between;
-		}
 
-		&-title {
-			padding: 0.6em 0; // Same top padding as the handle
-			white-space: nowrap;
-			min-width: 0; // This has to be here to enable the text truncation
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
+			&-title {
+				padding: 0.6em 0; // Same top padding as the handle
+				flex: 0 0 auto;
+			}
+			&-queryName {
+				flex: 1 1 auto;
+				padding: 0.6em 0; // Same top padding as the handle
+				white-space: nowrap;
+				min-width: 0; // This has to be here to enable the text truncation
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
 
-		&-hideshow {
-			margin-left: 0.5em;
-			padding-left: 0.5em;
+			&-hideshow {
+				flex: 0 0 auto;
+				margin-left: 0.5em;
+				padding-left: 0.5em;
+			}
 		}
 
 		&-content {
@@ -96,6 +102,14 @@
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
+				// This is necessary for Firefox to be able to
+				// truncate the text. Without this rule, the label
+				// is treated as if it's full-width, and while it is
+				// being truncated with the overflow:hidden,
+				// the ellipses isn't showing properly.
+				// This rule seems to convince Firefox to re-render,
+				// fix the label's width properly, and add the ellipses
+				max-width: 100%;
 			}
 		}
 	}
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
index 96f2f0bfe2..d59fdfb45c 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -222,13 +222,13 @@
 				.addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top' )
 				.append(
 					$( '<div>' )
-						.addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-title' )
-						.append(
-							title.$element,
-							this.savedQueryTitle.$element
-						),
+						.addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top-title' )
+						.append( title.$element ),
+					$( '<div>' )
+						.addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top-queryName' )
+						.append( this.savedQueryTitle.$element ),
 					$( '<div>' )
-						.addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-hideshow' )
+						.addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top-hideshow' )
 						.append(
 							this.hideShowButton.$element
 						)