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 a2b3eb7..7721275 100644 (file)
--- 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 96f2f0b..d59fdfb 100644 (file)
--- 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
                                                )