Closed Bug 1164594 Opened 7 years ago Closed 7 years ago

New Tab shouldn't use text-transform: uppercase


(Firefox :: New Tab Page, defect)

Not set



Firefox 41
41.2 - Jun 8
Tracking Status
firefox40 --- verified
firefox41 --- verified


(Reporter: flod, Assigned: emtwo)


(Blocks 1 open bug)


(Whiteboard: .?)


(6 files)

Attached image gear.png
Last item in the new Gear button is almost cut on Italian build (see screenshot).

Also, it's not completely safe to use text-transform: uppercase (see bug 830002), and some locales prefer to avoid it.
How should we go about fixing the uppercase menu title for Aurora 40?

Do we add a localization note in 40 about it being uppercase. But it's probably not end of the world if we took out transform uppercase in 40 and only added the note in 41.. ?

- <!ENTITY newtab.customize.cog.title "New Tab Controls">
+ <!ENTITY newtab.customize.cog.title "NEW TAB CONTROLS">
Component: Tiles → New Tab Page
Product: Content Services → Firefox
Whiteboard: .?
I wouldn't touch the string in Fx40 at this point, but we can add a comment explaining that the string will be transformed.

We can fix this on Fx41 (with a new string ID).
Attached image Missing right padding
Adding it here since it's related, there's also a missing right padding when title is the longest string.
Assignee: nobody → msamuel
Bug 1158859 introduced the menu changes for Nightly 40, so we'll need to uplift sizing fixes and potentially the removal of text-transform.
Blocks: 1158859
No longer blocks: 1150228
Blocks: 1145418
Francesco, could you please test out the build here and let me know if it looks good to you?

This build adds right padding to the cog menu so no truncating occurs. It also adjusts the intro cog menu issues and static intro button widths mentioned in bug 1165394.

The build also includes removal of text-transform for uppercase (only for fx41)

Flags: needinfo?(francesco.lodolo)
Attached image large menu.png
It seems to work fine, but I'd probably a maximum width limit, after which text should start wrapping.
Flags: needinfo?(francesco.lodolo)
Any update? We currently look pretty broken on Developer Edition because of this issue.
I'll have the patches ready for review later today.
Attachment #8612649 - Flags: review?(edilee)
Started up a try build here for testing:
Comment on attachment 8612649 [details] [diff] [review]
Part 1: v1: Padding & text wrap fixes

>+++ b/browser/base/content/newtab/newTab.css
> #newtab-customize-title {
>   color: #7A7A7A;
>   font-size: 14px;
>   background-color: #FFFFFF;
>-  height: 52px;
>-  line-height: 52px;
>-  padding-left: 15px;
>+  line-height: 25px;
>+  padding: 15px;
>   font-weight: 600;
>   text-transform: uppercase;
>   cursor: default;
>   border-radius: 5px 5px 0px 0px;
>+  max-width: 300px;
This max width will prevent the title panel item from stretching as much as the other panel items. This means the border bottom will only be 300px wide.

> .newtab-customize-panel-item:not(:last-child),
> .newtab-search-panel-engine {
>   border-bottom: 1px solid threedshadow;
Maybe we can draw the border at the top except for the first child (i.e., title line)?

> #newtab-intro-modal {
>   font-family: "Helvetica";
>-  width: 700px;
>   height: 500px;
>   position: fixed;
>   left: 0;
>   right: 0;
>   top: 0;
>   bottom: 0;
>   margin: auto;
>   background: linear-gradient(#FFFFFF, #F9F9F9);
>   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
>   border-radius: 8px 8px 0px 0px;
>+  min-width: 715px;
>+  position: relative;
>+  max-width: 75%;
>+  display: inline-block;
>+  transform: translateY(50%);
I believe the vertically center trick you're looking for is
top: 50%;
transform: translateY(-50%);

> #newtab-intro-header {
>   font-size: 28px;
>   color: #737980;
>   text-align: center;
>   top: 50px;
>   position: relative;
>   border-bottom: 2px solid #E0DFE0;
>   padding-bottom: 10px;
>-  width: 600px;
This could be the longest line, so we'll want padding on sides so the text doesn't extend directly to the edge.
Attachment #8612649 - Flags: review?(edilee)
Attachment #8612650 - Flags: review?(edilee) → review+
Attachment #8612651 - Flags: review?(edilee) → review+
Duplicate of this bug: 1171839
(we should really land this)
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 41
We'll split off the text padding issue.
Blocks: 1140185
No longer blocks: 1145418
Summary: New Tab menu is cut on localized build, shouldn't use text-transform: uppercase → New Tab shouldn't use text-transform: uppercase
Depends on: 1172987
Iteration: --- → 41.2 - Jun 8
Points: --- → 2
Comment on attachment 8612650 [details] [diff] [review]
Part 2a: v1 (fx-40): Add a comment for text transform uppercase

Approval Request Comment

[Feature/regressing bug #]: bug 1158859

[User impact if declined]: localization may be incorrect due to css uppercase transformation.

[Describe test coverage new/current, TreeHerder]: N/A - just adding a comment

[Risks and why]: no risk - just a comment

[String/UUID change made/needed]: N/A
Attachment #8612650 - Flags: approval-mozilla-aurora?
Comment on attachment 8612650 [details] [diff] [review]
Part 2a: v1 (fx-40): Add a comment for text transform uppercase

Comment only which will simplify the life of our localizer. Taking it.
Attachment #8612650 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Verified fixed on Firefox 40.0b2 (build ID:20150817163452) and Firefox 40.0.2 (build ID: 20150812163655) using the Fr/It locales.
QA Contact: cornel.ionce
See Also: → 1235750
See Also: → 1475921
You need to log in before you can comment on or make changes to this bug.