1450294 - Page action menu is too narrow for complex actions (e.g. adding a search engine)

Status: RESOLVED FIXED

(Firefox :: Address Bar, enhancement, P1)

Description

[Francesco Lodolo [:flod]]

Attachment: screenshot.png

Just tried out the new feature added in bug 1221539 on Bugzilla, and sadly it doesn't make any sense in Italian, because of the limited space available.

English: "Add “%S” to One-Click Search"
Italian: I went for a 1:1 translation, "Aggiungi “%S” ai motori di ricerca in un clic", and you can see the result in the screenshot. That's not usable, the label doesn't make any sense.

I will try to simplify the translation, but it might still not fit, and I expect most of our tier-1 locales to have the same issue. Check out how "one-click search engines" is translated here https://transvision.mozfr.org/string/?entity=browser/chrome/browser/preferences/search.dtd:oneClickSearchEngines.label&repo=gecko_strings)

If we want sentences as long as this one to the page action menu, localizations will need some layout flexibility.

P.S. the string landed in bug 1221539 doesn't have any comment giving context on where the string will be used, or the space limitations. We should try to avoid that, and fix this the specific case.

Comment 1

[:Gijs (he/him)]

I would suggest talking with Paolo about how best to move the current width settings (in CSS) into l10n files so that we stop having this problem, also in the hamburger menu.

Comment 2

[Drew Willcoxon :adw]

(In reply to :Gijs (he/him) from comment #1)
> I would suggest talking with Paolo about how best to move the current width
> settings (in CSS) into l10n files so that we stop having this problem, also
> in the hamburger menu.

Paolo, any thoughts on this?

Comment 3

[Drew Willcoxon :adw]

IMO we should nix the "One-Click" in this string, too.  You're adding a search engine that can be used anywhere in Firefox, not only with the one-click/one-off buttons.

Comment 4

[:Paolo Amadini]

(In reply to Drew Willcoxon :adw from comment #2)
> (In reply to :Gijs (he/him) from comment #1)
> > I would suggest talking with Paolo about how best to move the current width
> > settings (in CSS) into l10n files so that we stop having this problem, also
> > in the hamburger menu.
> 
> Paolo, any thoughts on this?

On this specifically, the approach would be programmatic, reading the width from a localized string and setting a CSS variable accordingly. We would just need to ensure that special menu items in the panel use the right CSS variable and use calc() where necessary, which is probably already the case.

As a side note, we now have different widths for different panels that are opened from the toolbar, even when they end up with the same content, like the list of visited pages. We may want to make the panels all the same width, but we'd need separate UX input for this.

I don't think this is sufficient to solve the problem though. The spec in bug 1221539 says we should always truncate the engine name, while here we use the simple solution of crop="center". In languages where the name of the engine would be placed at the start or the end of the sentence instead of roughly in the middle, we may end up truncating the wrong part of the string if the website-provided name is long. In fact, even in English this doesn't look good right now, because the engine name is closer to the start.

The spec does mention that we may need alternate solutions, so the UX team should probably also provide input on this. Some ideas as a starting point:

- Ignore the website-provided engine name and use a generic string for the single engine case
- Make the truncation algorithm more intelligent
- Always open the subview even when there is only one engine
- Place the description of the action and the engine name on two separate lines 
- Make a special section with a descriptive header, and use checkboxes to select or deselect individual engines

Comment 5

[Eric Pang [:epang] UX]

>Ignore the website-provided engine name and use a generic string for the single engine case

Thanks Paolo! Seeing as the user is on the site and also has the favicon as reinforcement using a generic string makes sense here.  

Let's update the string to "Add to One-Click Search".

This also feels more inline with other actions in the menu such as "Copy URL", "Take Screenshot", "Save to Pocket", etc.

Comment 6

[:Gijs (he/him)]

(In reply to Eric Pang [:epang] UX from comment #5)
> Let's update the string to "Add to One-Click Search".

(In reply to Drew Willcoxon :adw from comment #3)
> IMO we should nix the "One-Click" in this string, too.  You're adding a
> search engine that can be used anywhere in Firefox, not only with the
> one-click/one-off buttons.

I agree with Drew here. Why can't we just label it "Add search engine" or similar?

Comment 7

[Eric Pang [:epang] UX]

(In reply to :Gijs (he/him) from comment #6)
> (In reply to Eric Pang [:epang] UX from comment #5)
> > Let's update the string to "Add to One-Click Search".
> 
> (In reply to Drew Willcoxon :adw from comment #3)
> > IMO we should nix the "One-Click" in this string, too.  You're adding a
> > search engine that can be used anywhere in Firefox, not only with the
> > one-click/one-off buttons.
> 
> I agree with Drew here. Why can't we just label it "Add search engine" or
> similar?

I'm good with "Add Search Engine".  The reason I had 'One-Click' is because that's visually where we want to show it being added.  See Bug 1452700.  But being more general covers both cases so that works with me too.

Comment 8

[Drew Willcoxon :adw]

Attachment: Bug 1450294 - Change the title of the add-search-engine page action.

Review commit: https://reviewboard.mozilla.org/r/235462/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/235462/

Comment 9

[Drew Willcoxon :adw]

This only changes the action title; it doesn't resize the panel.  The title change by itself seems sufficient to fix the particulars of this bug.

I also changed the text of the success notification popup.  It used to be "Added to Search Dropdown".  I think we should generalize it the same way we generalized the action name, so I chose "Added Search Engine".  Eric, is that OK?

Comment 10

[:Gijs (he/him)]

Comment on attachment 8966787 [details]
Bug 1450294 - Change the title of the add-search-engine page action.

https://reviewboard.mozilla.org/r/235462/#review241266

LGTM. If we still need a wider popup, let's deal with that in a follow-up.

Comment 11

[Eric Pang [:epang] UX]

(In reply to Drew Willcoxon :adw from comment #9)
> This only changes the action title; it doesn't resize the panel.  The title
> change by itself seems sufficient to fix the particulars of this bug.

Perfect, changing the width of the panel is a last resort kind of thing in my opinion :).
 
> I also changed the text of the success notification popup.  It used to be
> "Added to Search Dropdown".  I think we should generalize it the same way we
> generalized the action name, so I chose "Added Search Engine".  Eric, is
> that OK?

Yes, works for me!  Though once Bug 1452700 lands we'll lose the notification popup all together.

Comment 12

[Drew Willcoxon :adw]

Comment on attachment 8966787 [details]
Bug 1450294 - Change the title of the add-search-engine page action.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/235462/diff/1-2/

Comment 13

[Drew Willcoxon :adw]

Forgot to update the test.  I'll land this now.

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/392129bbf027
Change the title of the add-search-engine page action. r=Gijs

Comment 15

[Eliza Balazs [:ebalazs_]]

https://hg.mozilla.org/mozilla-central/rev/392129bbf027