1051511 - Searchbar is skinny in Google page headers (at top of search results, Gmail, Google News, Google+, etc.)

Status: VERIFIED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Visit https://www.google.com/#q=test
 2. Inspect the search bar at the top

EXPECTED RESULTS:
Search bar should be wide
(wider than the "Web Images News Videos Shopping More Search Tools" headers below it)

ACTUAL RESULTS:
Search bar is pretty small.
(just about as wide as "Web Images")



Nightly 34.0a1 (2014-08-08) gives EXPECTED RESULTS
Nightly 34.0a1 (2014-08-09) gives ACTUAL RESULTS

It's likely that this regressed as a result of bug 1032922 (which was a keyword-renaming for a spec change). That means this is probably a tech evang bug; filing as Core|Layout until I'm sure though.

(Inspector shows that this search box is inside a <form id="gbqf"> with style "display:flex", which makes it pretty believable that bug 1032922 could've impacted its sizing.)

Comment 1

[Daniel Holbert [:dholbert]]

(This was originally reported in bug 1032922 comment 26, btw.)

Comment 2

[Daniel Holbert [:dholbert]]

The text box in this search widget has class 'gbqff', and it gets sized via these rules from a <style> tag in the page (some intervening properties/rules removed for brevity):

gb_sb .gbqff {
  min-width:0;
  flex:1 1 auto
}
.gbqff{
  display:inline-block;
  width:100%
}

So before bug 1032922, it had a flex-basis of "100%" (taken from the width property).  Now it has a flex-basis of "auto" (i.e. the element's auto-width) -- and that's smallish since this is an inline-block, not a block.

There's more than just this going on, because I can't fix it just by setting "flex: 1 1 main-size" in Firefox's dev-tools.  But this does seem likely to be part of the problem, at least...

Also, this page has a number of other explicit flex shorthands with "auto":
 - "flex: 1 1 auto" (mentioned above) which could be replaced with "flex:auto" (which would mean the same thing before & after the main-size keyword-renaiming)
 - "flex: 0 1 auto", which could be replaced with "flex: initial"
 - at least one instance of "flex:0 2 auto" (which I don't think can be fixed to a single keyword that's both backwards-and-forwards-compatible, except by adding "flex:0 2 main-size" directly after that declaration, which Firefox Nightly will recognize & honor, and other browsers without "main-size" support will just reject that & stick with "0 2 auto" which means the same thing for them.)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (partially reduced)

Comment 4

[Daniel Holbert [:dholbert]]

Got it -- it's actually a different element whose style is primarily responsible for the search bar's width. It's the element with class "gb_rb", which has this style:
.gb_rb {
  width:650px;
}
.gb_sb .gb_rb {
  min-width:200px;
  flex:0 2 auto
}

So before the "main-size" keyword rename, it has a flex-basis of 650px.  After the rename, it has a flex-basis of "auto" (and a min-width of 200px, which is what ends up setting its width).


I can fix this by running this in my Web Console in Firefox Nightly:
  $(".gb_rb").style.flexBasis = "main-size"

Comment 5

[Daniel Holbert [:dholbert]]

Tab, could you get this on the radar of folks who work on the google.com search results page?

I *think* they just need the following on ".gb_rb", to fix this direct problem:
 flex:0 2 auto;
 flex:0 2 main-size;
(instead of just having the first "auto" version)

And ideally, they should also replace "flex: 1 1 auto" & similar from end of comment 2 with their shorter equivalent keywords whose meaning hasn't changed, like "auto" and "initial"/"unset" and "none"... though I'm not sure yet if those other decls influence the page noticably or not.

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing the skinny search bar

(This is what the site looks like currently in Firefox Nightly, fwiw.)

Comment 9

[iamjayakumars]

Same issue in Mac OS X 10.10 and Windows 8.1

Comment 10

[iamjayakumars]

Same issue, after Aug 10,2014 update.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:34.0) Gecko/20100101 Firefox/34.0 ID:20140810030204 CSet: 70be728521e3

Comment 11

[Dirkjan Ochtman (:djc)]

If we can't get the evangelism done soon, should we roll back the change, or add some workaround for now?

Comment 12

[Tim Nguyen :ntim]

We could support flex-basis: auto; until Google fixes the issue.

Comment 13

[Daniel Holbert [:dholbert]]

We *do* support "auto"; it just has a different meaning now. (It means the same thing it does for "width" and "height".)  But what I think you mean is keeping the old meaning, e.g. making "auto" & "main-size" synonyms.  I'd rather not do that, since then we'd be in a hacky intermediate state, and it'd require a lot of special-case code. I'd prefer to just back out (temporarily), if it comes to that.

Given that the site's not unusable, I think we can wait a few days for Google folks to respond. I've emailed the mozilla/google discussion list, too, which hopefully should get it on the radar.

Comment 16

[Daniel Holbert [:dholbert]]

In addition to the search results page, this issue affects the searchbar at the top of:
  https://news.google.com
  https://plus.google.com
  https://support.google.com/
  https://www.google.com/finance
...and probably many other Google properties that have a top-of-the-page searchbar.

Comment 17

[Daniel Holbert [:dholbert]]

(Looks like this affects Gmail, as well.)

Also, FWIW: for people being annoyed by this locally & wanting a local workaround, I've published a Stylish user-script workaround (applying the "flex-basis:main-size" styling to the element in question, per comment 4 -- a simplified version of what I think Google needs to change, per comment 5.)

My workaround stylesheet is available here:
 https://userstyles.org/styles/104266/google-flexbox-workaround-after-main-size-rename
and can be easily installed if you add the Stylish extension and visit that ^ page. Stylish is available here: https://addons.mozilla.org/en-US/firefox/addon/stylish/

Comment 19

[(no longer active)]

(In reply to Daniel Holbert [:dholbert] from comment #13)
> I've emailed the mozilla/google discussion list,
> too, which hopefully should get it on the radar.

Hmm, I'm pretty sure I haven't seen that email (I am on that list.)  Maybe your post is held in a moderation queue?

Comment 20

[Daniel Holbert [:dholbert]]

I guess the moderation queue hasn't been flushed in a few days. Forwarded email to ehsan, so he can send it & bypass the queue & hopefully get some Google folks' attention here.

Comment 21

[Tab Atkins Jr.]

I've reported the bug at the (Google-internal) url <https://b.corp.google.com/issue?id=16949734>

Comment 23

[Karl Dubost💡 :karlcow]

Thanks Daniel, Tab. 
For following up on this.

Comment 26

[Martijn Wargers (dead)]

Attachment: www.google.com.html

I was kind of working on getting a minimal testcase, but I see that the issue is already figured out.

Comment 29

[Daniel Holbert [:dholbert]]

(In reply to Tab Atkins Jr. from comment #21)
> I've reported the bug at the (Google-internal) url
> <https://b.corp.google.com/issue?id=16949734>

Hi Tab -- has there been any action on the Google internal bug, and is there any ETA on when a fix will be deployed?

(If there isn't an imminent fix, then we should perhaps consider rolling back bug 1032922 (the keyword-rename) for the time being, so that our Nightly users aren't stuck with teeny searchbars indefinitely...)

Comment 32

[Tab Atkins Jr.]

The bug was assigned this morning.

Comment 33

[pawel]

How long this bug will be in Nightly I can't use this short Google windows .I ask from Poland.

Comment 34

[Marc Auslander]

see comment 17 for a workaround that works for me.

Comment 36

[Johannes Pfrang [:johnp]]

Note: you probably have to adapt the "@-moz-document domain(google.com)" to match your country code TLD.

Comment 37

[pawel]

That Mozilla will release Nightly 34.I do think.I 'll be waiting so long as Team fix it.Thank

Comment 38

[Daniel Holbert [:dholbert]]

(In reply to Tab Atkins Jr. from comment #32)
> The bug was assigned this morning.

That's good to hear, thanks! Please let me know if there are any updates / ETA on when it'll be fixed.

(In the absence of more information, I'm planning on temporarily backing out the main-size rename (bug 1032922) on Monday, and re-landing it after this has been fixed on Google sites.)

Comment 39

[sashainap2r*]

Thank you  Daniel Holbert, your fix works and it is really a huge help.
Regards,

Comment 43

[Ajay Gupta]

Thank you Daniel. I just followed your instructions in comment 17 and the old behavior is restored.

Comment 44

[Gabriela [:gaby2300]]

The issue seems solved in the latest beta and Windows 7 64 bit (Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0, build config https://hg.mozilla.org/releases/mozilla-beta/rev/9ebeb7669cda)

Comment 45

[Daniel Holbert [:dholbert]]

(In reply to Gabriela [:gaby2300] from comment #44)
> The issue seems solved in the latest beta

Right -- the issue only exists for Nightly builds newer than 2014-08-09, per comment 0.

Comment 46

[Daniel Holbert [:dholbert]]

Tab, is there an ETA on the Google internal bug for this?

Per comment 38, I'm leaning towards reverting my "main-size" patch-stack and then re-landing it later, so that our Nightly users can have a working Gmail/Google experience in the meantime -- but I'd rather not do that if Google's going to be fixed within a day or so.

Comment 47

[u279076]

(In reply to Daniel Holbert [:dholbert] from comment #46)
> Tab, is there an ETA on the Google internal bug for this?
> 
> Per comment 38, I'm leaning towards reverting my "main-size" patch-stack and
> then re-landing it later, so that our Nightly users can have a working
> Gmail/Google experience in the meantime -- but I'd rather not do that if
> Google's going to be fixed within a day or so.

I would actually suggest we don't back this out. Sure the small search bar is annoying, but it can be worked around in the mean time (as you've demonstrated). Nightly users should be accustomed to problems like this from time to time. If this bug were to escalate to Beta I'd be pushing harder for a backout, but for Nightly it doesn't seem like a serious enough issue to warrant that.

Comment 48

[Tab Atkins Jr.]

There's a patch up right now that's undergoing review, so it should land soon.  I suggest not reverting if possible.

Comment 49

[Daniel Holbert [:dholbert]]

(In reply to Tab Atkins Jr. from comment #48)
> There's a patch up right now that's undergoing review, so it should land
> soon.  I suggest not reverting if possible.

That's great news -- thanks for the update! I'm glad to hear that a patch exists & is on a path to going live. I'll hold off on reverting, then.

(In reply to Anthony Hughes, QA Mentor (:ashughes) from comment #47)
> Sure the small search bar
> is annoying, but it can be worked around in the mean time (as you've
> demonstrated).

(The workaround only helps for the users who've gone through the hurdles of discovering this bug page, installing Stylish, and installing my user-style, which is just ~100 people right now, based on the "installs" count on userstyles.org. I'm concerned about users who've been running into this for a week and might be getting frustrated (& thinking about dropping Nightly) as well as those who've invested time in filing a bug only to have it duped to this one.  If this were to be broken for another week or longer, I'd want to do something to make things better for those users in the meantime -- but fortunately, it sounds like it won't stay broken for long.)

Comment 50

[sjw]

It seems that the patch has been applied. Google looks normal here and if your search for "flex:" or "main-size" in page source, you will see the fix.

Comment 51

[Daniel Holbert [:dholbert]]

Yup, it seems to be fixed, and I do indeed see "flex:0 0 main-size" in the page's source. Hooray!

Resolving as FIXED.

Comment 52

[Bryan Price]

Yes, in Google, it appears to be fixed.

In Gmail, it's still pretty short.

Which may mean that Google will fix it shortly, just not yet.

Comment 53

[Daniel Holbert [:dholbert]]

It's fixed for me in Gmail, too.  Hopefully it'll be fixed for you there, soon, too.

I tested & confirmed that this is fixed at all of the following sites:
  https://news.google.com
  https://mail.google.com
  https://calendar.google.com
  https://plus.google.com
  https://www.google.com/finance
  https://support.google.com/
  https://play.google.com/store
  https://www.google.com/#q=test

Comment 54

[Ajay Gupta]

Looks like this is all fixed now. Hooray! I will go ahead and remove stylish add-on (as I like to keep my #add-ons to the bare minimum I need).

Comment 55

[Bryan Price]

Propagation can be a b word.  I've been dealing with email for hours since I sat down at my machine.  And yes, a refresh shows the corrected code.  I think it's time to close the Gmail tab and go on to something different at this point. o_O