1040369 - Replace sponsored icon with identifying text with overlay description

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect)

Description

[Ed Lee :Mardak]

This will likely revert bug 974745 (remove panel) and bug 974736 (remove icon).

Comment 1

[Ed Lee :Mardak]

Attachment: sample animation webm

Here's a video of a WIP that starts as a slightly rounded blue square that expands to the full size of some sponsored text. This works for different languages as it will cover up the title text (now always centered independent of the sponsored text).

Comment 2

[Ed Lee :Mardak]

Attachment: sample animation stills

Comment 3

[Ed Lee :Mardak]

Attachment: "paid tile" unhovered and hovered

If we always need to show the text without user interaction, how about showing it opaque by default then making it transparent on hover. This will show the "paid tile" text by default but allow the user to see the title if the "paid" text happens to cover some of the title.

Comment 4

[Ed Lee :Mardak]

Attachment: wip

adw, this patch removes the now unused controls/@2x.png files

Comment 5

[Ed Lee :Mardak]

Bug 1037341 and bug 1037091 remove other uses of controls.png @2x

Comment 6

[Ed Lee :Mardak]

In the prototype: http://ytjbre.axshare.com/enhanced_view_-_concept_1.html

The "paid tile" button stays visible and is clickable like the current sponsored icon. So should we just reuse the current sponsored panel instead of implementing a whole new overlaid text?

Also, when the indicator was an icon, it has a fixed size but with text, it might cover up or be covered up by other title text. What should happen if the title text and sponsored text overlaps?

Perhaps related to the previous question, are we changing the tile's title from what it would have been even though the tile brings the user back to the original page? E.g., should bugzilla.mozilla.org tile have a title of "the nonprofit behind firefox" ?

Comment 7

[Ed Lee :Mardak]

Notes:

Labels should say "SPONSORED" 4px side padding
Paid tile text/treatment
use enhanced title replacing history title
overlay sponsored description: #333333 background, white text

Comment 8

[Ed Lee :Mardak]

More notes from dcrobot:

Static label: Border = 1, #DCDCDC, corner = 2, fill = #F9F9F9, text = Arial, Regular, 10 px, #9B9B9B
Rollover: fill = #DCDCDC, text = #666666

Comment 9

[Ed Lee :Mardak]

(In reply to Ed Lee :Mardak from comment #7)
> overlay sponsored description: #333333 background, white text
dcrobot, your prototype seems to have a semitransparent background. What % opacity should this be? rgba(51, 51, 51, .9) ?

Comment 10

[Aaron]

95% opacity.

Comment 11

[Ed Lee :Mardak]

Attachment: v1 screenshot classic

webmaker tile is history with title Tools, sponsored text open for Wired

Comment 12

[Ed Lee :Mardak]

Attachment: v1 screenshot enhanced

webmaker tile is enhanced with title Webmaker + enhanced text open, sponsored text open for Wired

Comment 13

[Ed Lee :Mardak]

Attachment: v1

Comment 14

[Francesco Lodolo [:flod]]

Comment on attachment 8475738 [details] [diff] [review]
v1

Review of attachment 8475738 [details] [diff] [review]:
-----------------------------------------------------------------

For which branch is this patch? It's OK if it's for mozilla-central, not really for other branches (if you only target en-US as discussed, you shouldn't use the standard localization files).

Also: using in Gecko Gaia's conventions ({{var}}) for variable naming is confusing. It's probably my fault (linked document), but I assumed it was clear you just need to follow the standard conventions (%1$S, %2$S, etc. in .properties files).

::: browser/locales/en-US/chrome/browser/newTab.properties
@@ +6,5 @@
>  newtab.unpin=Unpin this site
>  newtab.block=Remove this site
> +newtab.sponsored.button=Sponsored
> +# LOCALIZATION NOTE(newtab.sponsored.explain): {{icon}} will be the (X) block
> +# icon inline. {{link}} will use newtab.learn.link as a link

I think it's not that clear.

XXX will be replaced inline by the X icon used to close tabs. YYY will be replace by an active link using string newtab.learn.link as text.

@@ +10,5 @@
> +# icon inline. {{link}} will use newtab.learn.link as a link
> +newtab.sponsored.explain=This tile is being shown to you on behalf a Mozilla partner. You can remove it at anytime by clicking the {{icon}} button. {{link}}
> +# LOCALIZATION NOTE(newtab.enhanced.explain): {{icon}} will be the customization
> +# icon inline. {{link}} will use newtab.learn.link as a link
> +newtab.enhanced.explain=A Mozilla partner has visually enhanced this tile replacing the screenshot. You can turn off enhanced tiles by clicking the {{icon}} button for in-page preferences. {{link}}

Same here

XXX will be replaced inline by the gear icon used to customize the new tab window. YYY will be replace by an active link using string newtab.learn.link as text.

Comment 15

[Ed Lee :Mardak]

Attachment: v1

Comment 16

[Ed Lee :Mardak]

Attachment: v2

(In reply to Francesco Lodolo [:flod] from comment #14)
> For which branch is this patch? It's OK if it's for mozilla-central, not
> really for other branches (if you only target en-US as discussed, you
> shouldn't use the standard localization files).
This code will land initially on mozilla-central then uplifted to aurora. How should the strings work there? Basically put them inline or anywhere outside of the locales directory?

> Also: using in Gecko Gaia's conventions ({{var}}) for variable naming is
> confusing.
Either way works for me. I do see some l20n documentation saying it'll look like "{{ var }}" but maybe that just confuses things.

> follow the standard conventions (%1$S, %2$S, etc. in .properties files).
Done.

> > +# LOCALIZATION NOTE(newtab.sponsored.explain): {{icon}} will be the (X) block
> > +# icon inline. {{link}} will use newtab.learn.link as a link
> XXX will be replaced inline by the X icon used to close tabs. YYY will be
> replace by an active link using string newtab.learn.link as text.
Thanks.

Comment 17

[Ed Lee :Mardak]

Attachment: aurora extras

Comment 18

[Ed Lee :Mardak]

Attachment: aurora extras

Comment 19

[Francesco Lodolo [:flod]]

Comment on attachment 8475772 [details] [diff] [review]
aurora extras

Review of attachment 8475772 [details] [diff] [review]:
-----------------------------------------------------------------

I think they're fine in the code (Pike is already CCed, so he might comment further).

f- for the newTab.properties: even if unused, don't remove those strings. 
Removal creates unnecessary noise (technically it's still "breaking the string freeze"), and it should ride the train from m-c

Comment 20

[Francesco Lodolo [:flod]]

Also not sure what you mean with "aurora extra": you need an entire patch that doesn't touch string files, that patch makes me assume you want to land both, which is not OK.

Comment 21

[Ed Lee :Mardak]

(In reply to Francesco Lodolo [:flod] from comment #20)
> Also not sure what you mean with "aurora extra": you need an entire patch
> that doesn't touch string files, that patch makes me assume you want to land
> both, which is not OK.
You're saying there cannot be a changeset that adds the strings then another changeset that removes the strings in the same push?

You also said in comment 19 to not remove the strings, but that would be creating strings on aurora, no?

Comment 22

[Ed Lee :Mardak]

Attachment: v2

Getting late and attaching wrong files.. zzzz

Comment 23

[Francesco Lodolo [:flod]]

(In reply to Ed Lee :Mardak from comment #21)
> You're saying there cannot be a changeset that adds the strings then another
> changeset that removes the strings in the same push?
> 
> You also said in comment 19 to not remove the strings, but that would be
> creating strings on aurora, no?

I realized only after what you were trying to do, I thought you were just removing existing strings in Aurora.

The entire point of string freeze is "do not touch string files". I find a specific patch for Aurora a lot safer and clearer than 2 patches (one for both branches, the other only for aurora).

In any case, the Aurora patch is wrong: patch 1 removes newtab.sponsored, patch doesn't add it back. See why I think it's safer?

Comment 24

[Ed Lee :Mardak]

Attachment: v2 for aurora

Comment 25

[Ed Lee :Mardak]

Comment on attachment 8475782 [details] [diff] [review]
v2

l10n question: Should the string just be SPONSORED? Or there should be a localization note saying that css will convert this to uppercase?

>+++ b/browser/locales/en-US/chrome/browser/newTab.properties
>+newtab.sponsored.button=Sponsored

>+++ b/browser/base/content/newtab/newTab.css
>+.newtab-sponsored {
>+  text-transform: uppercase;

Comment 26

[Francesco Lodolo [:flod]]

It would be safer to put "SPONSORED" directly in the string with a note saying that the translation should be uppercase as well.

On the beauty of text-transform: uppercase
https://bugzilla.mozilla.org/show_bug.cgi?id=830002

Comment 27

[Axel Hecht [:Pike]]

Note, we're still waiting for input on how we'll eventually localize "sponsored" from legal.

So far we know little to nothing about the actual details, and how they affect local legal systems and what wording might be required where. That's really not a translation question, but needs local legal feedback based on a detailed description on what we're actually doing.

Comment 28

[Ed Lee :Mardak]

(In reply to Francesco Lodolo [:flod] from comment #26)
> On the beauty of text-transform: uppercase
> https://bugzilla.mozilla.org/show_bug.cgi?id=830002
Interesting Irish examples:
ÁR NATHAIR = OUR SNAKE
ÁR nATHAIR = OUR FATHER

-  text-transform: uppercase;
-newtab.sponsored.button=Sponsored
+# LOCALIZATION NOTE(newtab.sponsored.button): This text appears for sponsored
+# and enhanced tiles on the same line as the tile's title, so prefer short
+# strings to avoid overlap. This string should be uppercase.
+newtab.sponsored.button=SPONSORED

(In reply to Axel Hecht [:Pike] from comment #27)
> Note, we're still waiting for input on how we'll eventually localize
> "sponsored" from legal.
Is there something I should put in the localization note?

Comment 29

[Axel Hecht [:Pike]]

> (In reply to Axel Hecht [:Pike] from comment #27)
> > Note, we're still waiting for input on how we'll eventually localize
> > "sponsored" from legal.
> Is there something I should put in the localization note?

Actually, I've asked Bryan to get us data, I don't see a purpose until we get it from you guys. We need this answer to come out of the group that knows what tiles do.

Sadly, legal ducked away on the first try.

Comment 30

[Drew Willcoxon :adw]

Comment on attachment 8475782 [details] [diff] [review]
v2

Review of attachment 8475782 [details] [diff] [review]:
-----------------------------------------------------------------

The code looks OK to me, and I guess it needs the text-transform change in comment 28, so r+.  I can't really comment on the legal question in comment 27, but it doesn't seem like that should block landing and iteration in Nightly.

::: browser/base/content/newtab/newTab.css
@@ +194,5 @@
> +.newtab-site:-moz-any([type=enhanced], [type=sponsored]) .newtab-sponsored {
> +  display: block;
> +}
> +
> +.sponsored-explain, .sponsored-explain a {

Nit: Please put the second selector on a new line to make this easier to read.

::: browser/base/content/newtab/newTab.js
@@ +36,5 @@
>  });
>  
> +function newTabString(name, args) {
> +  let stringName = "newtab." + name;
> +  if (args == undefined) {

Nit: if (!args) {

@@ +40,5 @@
> +  if (args == undefined) {
> +    return gStringBundle.GetStringFromName(stringName);
> +  }
> +  else {
> +    return gStringBundle.formatStringFromName(stringName, args, args.length);

`else` isn't necessary, just return.

::: browser/base/content/newtab/sites.js
@@ +3,5 @@
>   * License, v. 2.0. If a copy of the MPL was not distributed with this file,
>   * You can obtain one at http://mozilla.org/MPL/2.0/. */
>  #endif
>  
> +const SPONSORED_EXPLAIN_LINK = "https://wiki.mozilla.org/Tiles";

Would be good to have something here for curious Nightly users.

::: browser/locales/en-US/chrome/browser/newTab.properties
@@ +8,5 @@
> +newtab.sponsored.button=Sponsored
> +# LOCALIZATION NOTE(newtab.sponsored.explain): %1$S will be replaced inline by
> +# the (X) block icon. %2$S will be replace by an active link using string
> +# newtab.learn.link as text.
> +newtab.sponsored.explain=This tile is being shown to you on behalf a Mozilla partner. You can remove it at anytime by clicking the %1$S button. %2$S

"Anytime"'s an adverb, you need "any time" here.  Or, remove the "at," so, "You can remove it anytime."

@@ +12,5 @@
> +newtab.sponsored.explain=This tile is being shown to you on behalf a Mozilla partner. You can remove it at anytime by clicking the %1$S button. %2$S
> +# LOCALIZATION NOTE(newtab.enhanced.explain): %1$S will be replaced inline by
> +# the gear icon used to customize the new tab window. %2$S will be replace by an
> +# active link using string newtab.learn.link as text.
> +newtab.enhanced.explain=A Mozilla partner has visually enhanced this tile replacing the screenshot. You can turn off enhanced tiles by clicking the %1$S button for in-page preferences. %2$S

Need a comma between "tile" and "replacing."

"For in-page preferences" sure is awkward, and "in-page" is jargon.  Can't we just say "the %1$S button above"?

::: browser/themes/shared/newtab/newTab.inc.css
@@ +61,5 @@
>    outline: 1px dotted;
>  }
>  
>  /* CUSTOMIZE */
> +#newtab-customize-button, .newtab-customize {

Nit: Please put the second selector on a new line.

Comment 31

[Ed Lee :Mardak]

Attachment: v3

Comment 32

[Ed Lee :Mardak]

Attachment: v3 screenshot

Comment 33

[Ed Lee :Mardak]

Attachment: aurora delta

This patch is on top of the one landing in m-c, but when landing this patch for aurora, it'll be squashed into the same commit so there's no churn of locales files.

Comment 34

[Axel Hecht [:Pike]]

Comment on attachment 8476907 [details]
v3 screenshot

Can you test this with a fake translation that has 1.5 - 2 times as much text?

Translations are generally a good deal longer.

I tried a few languages in google translate, 

Un partenaire Mozilla a amélioré visuellement cette tuile, le remplacement de la capture d'écran. Vous pouvez désactiver tuiles améliorés en cliquant sur le bouton X pour vos préférences. apprendre encore plus

might be a good example. (Probably google-translate-horrible, but the spacing might work)

Same for the "What is this page" box.

Comment 35

[Ed Lee :Mardak]

Attachment: v3 capture d'écran

Comment 36

[Ed Lee :Mardak]

Attachment: v3 screeeenshoot

Comment 37

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/df2c6fd11ac8

Comment 38

[Ed Lee :Mardak]

Attachment: aurora delta

Here's a patch on top of what landed in m-c but to make it string-freeze-friendly for aurora uplift.

Comment 39

[Sylvestre Ledru [:Sylvestre]]

Uplift has been managed in bug 1057602

Comment 40

[Liz Henry (:lizzard) (relman/hg->git project)]

Ed, can you clarify what this is supposed to do so we can give it a little QA attention and verify it for some different locales? It sounds like it would benefit from some extra manual testing, but we would like to have a good definition of what tiles should be doing. Thanks!

Comment 41

[Ed Lee :Mardak]

Sorry for the short comment 0 as the functionality wasn't super well defined then.

There are 3 main parts to this bug:
1) there's a "sponsored" button for both sponsored directory tiles and enhanced tiles
2) for sponsored directory tiles, e.g., wired, that show on an empty profile, clicking the "sponsored" button shows some explanation on top of the tile
3) for enhanced history tiles, e.g., a visit to a mozilla.org page, will have a different message shown when "sponsored" is clicked

Comment 42

[Francesco Lodolo [:flod]]

(In reply to Liz Henry :lizzard from comment #40)
> Ed, can you clarify what this is supposed to do so we can give it a little
> QA attention and verify it for some different locales?

Is this enabled for locales, even on trunk? My understanding was "no".

Comment 43

[Ed Lee :Mardak]

On trunk, only en-US has content to display although technically the code is enabled for all locales. You should be able to force the content to appear on no-en-US builds by changing general.useragent.locale to en-US.

Comment 44

[Francesco Lodolo [:flod]]

Thanks, it works. 

Noticed this: after I click the "sponsored" tag, I have no way to hide the "infobar". I have to click the tile, close the tab or close the tile. It looks quite bad. Is there a bug already for this behavior?

Comment 45

[Ed Lee :Mardak]

You should be able to click "sponsored" again or any part of the overlaid description (other than the link) to dismiss.

Comment 46

[Francesco Lodolo [:flod]]

(In reply to Ed Lee :Mardak from comment #45)
> You should be able to click "sponsored" again or any part of the overlaid
> description (other than the link) to dismiss.

Yes, it works, but I would have never imagined (and expect other users to be in the same situation).

Comment 47

[Ed Lee :Mardak]

https://hg.mozilla.org/releases/mozilla-aurora/rev/d8073de9838a

Comment 48

[Cornel Ionce [:noni] [Hubs QA]]

Verified fixed on Mac OS X 10.8.5, Ubuntu 14.04 32bit and Windows 7 64bit using:
- latest Nightly, build ID: 20140828030205
- latest Aurora, build ID: 20140829004003