1298937 - about:newtab settings icon overlaps with search bar when the viewport is 600 pixels

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect)

Description

[alex_mayorga]

Attachment: about-newtab-overlap.png

Steps:
- Resize a Firefox window to 600 pixels horizontal.
- Load about:newtab

Result:
about:newtab settings icon overlaps with search bar

Result:
about:newtab settings icon doesn't overlap with search bar

Comment 1

[Aditya Srivastava]

I've reproduced this issue on Ubuntu and lubuntu too; should I create a new issue for those?

I would like to work on this bug, and would greatly appreciate someone walking me through how to go about it.

Comment 2

[Mark Banner (:standard8)]

(In reply to Aditya Srivastava from comment #1)
> I've reproduced this issue on Ubuntu and lubuntu too; should I create a new
> issue for those?

I see this on Mac as well, so we can say all platforms.
 
> I would like to work on this bug, and would greatly appreciate someone
> walking me through how to go about it.

The source code for the newtab page lives here:

https://dxr.mozilla.org/mozilla-central/source/browser/base/content/newtab

You should be able to inspect the page by opening up a new tab, then going to Tools -> Web Developer -> Inspector.

From there you can look at the css and experiment with different options.

I believe Dão has also been doing most work in this area recently, so he may be able to help as well.

Comment 3

[Aditya Srivastava]

Attachment: Exported diff of the changes made.

I was able to fix the overlap by moving the search bar 15px down. I've worked with git but never with Mercurial so I'm not sure if what I did is right, but I committed my changes and then exported them out to a file which I'm attaching here.

Comment 4

[Aditya Srivastava]

Attachment: Screenshot showing the modified and rebuilt newtab page

The button for the dropdown menu no longer overlaps with the search bar even when active.

Comment 5

[Mark Banner (:standard8)]

Hi Aditya, attaching a patch is fine. Using mozreview is something to consider for later, but starting with attaching is OK!

We'll need UX review on this, so I'll request it in a moment.

Comment 6

[Mark Banner (:standard8)]

Comment on attachment 8820377 [details]
Screenshot showing the modified and rebuilt newtab page

Stephen, could you take a look at the changes here please? The patch is moving the search bar 15px further down.

Comment 7

[Stephen Horlander [:shorlander]]

Comment on attachment 8820377 [details]
Screenshot showing the modified and rebuilt newtab page

Looks good to me.

Comment 8

[Mark Banner (:standard8)]

Comment on attachment 8820374 [details] [diff] [review]
Exported diff of the changes made.

Hi Aditya, I'm sorry, I only just noticed this got ui+. Lets get it reviewed and hopefully landed.

Comment 9

[Drew Willcoxon :adw]

Comment on attachment 8820374 [details] [diff] [review]
Exported diff of the changes made.

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

Thanks Mark.

Comment 10

[Mark Banner (:standard8)]

Simple css change, try push shouldn't be necessary.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/637d897a3364
Fix overlap by changing search bar's margin-top attribute. r=adw

Comment 12

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

https://hg.mozilla.org/mozilla-central/rev/637d897a3364

Comment 13

[Fahima Zulfath]

Attachment: moz.png

[bugday-20170419]
BROWSER:Firefox Nightly 55.0a1
OS: Windows 10.0
The bug is no longer reproducible, hence verified.

Comment 14

[balaji2198]

[bugday-20170426]

Os:Windows 7 (32 bit)
Browser : Firefox Nightly 55.oa1
Result : Fixed and Verified

I can able to reproduce the bug and the about : :newtab settings icon are appears normally

Comment 15

[sreerag]

Operating system : Windows 7 (32 bit)
firefox Browser version::Firefox 54.0a2



This occurs when i reproduce the bug it Result into

about:newtab settings icon doesn't overlap with search bar.It just positioned in correct place.



BUGID::[1298937]

Comment 16

[alex_mayorga]

¡Hola Fahima, Balaji and Sreerag!

Thanks for veryfying this.

¡Gracias!
Alex