Closed Bug 1051511 Opened 10 years ago Closed 10 years ago

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

Categories

(Web Compatibility :: Site Reports, defect)

defect
Not set
normal

Tracking

(Not tracked)

VERIFIED FIXED

People

(Reporter: dholbert, Unassigned)

References

()

Details

(Whiteboard: [country-us] [css] [sitewait] [suggested fix for Google in comment 5] [local Stylish hackaround in comment 17])

Attachments

(3 files)

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.)
(This was originally reported in bug 1032922 comment 26, btw.)
Depends on: 1032922
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.)
Summary: Searchbar is skinnier than normal, at the top of google.com search results → Searchbar is skinnier than normal, at the top of google.com search results, due to use of "flex: 1 1 auto"
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"
Assignee: nobody → english-us
Component: Layout → English US
Product: Core → Tech Evangelism
Summary: Searchbar is skinnier than normal, at the top of google.com search results, due to use of "flex: 1 1 auto" → Searchbar is skinnier than normal, at the top of google.com search results, due to use of "flex: 0 2 auto" (now that the former "flex-basis:auto" behavior is set via "main-size" keyword)
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.
Flags: needinfo?(jackalmage)
(This is what the site looks like currently in Firefox Nightly, fwiw.)
OS: Linux → All
Same issue in Mac OS X 10.10 and Windows 8.1
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
If we can't get the evangelism done soon, should we roll back the change, or add some workaround for now?
We could support flex-basis: auto; until Google fixes the issue.
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.
Hardware: x86_64 → All
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.
Summary: Searchbar is skinnier than normal, at the top of google.com search results, due to use of "flex: 0 2 auto" (now that the former "flex-basis:auto" behavior is set via "main-size" keyword) → Searchbar is skinny in Google page headers (at top of search results, Google News, Google+, etc.) due to use of "flex: 0 2 auto", now that the former "flex-basis:auto" behavior is set via "main-size" keyword
(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/
Summary: Searchbar is skinny in Google page headers (at top of search results, Google News, Google+, etc.) due to use of "flex: 0 2 auto", now that the former "flex-basis:auto" behavior is set via "main-size" keyword → Searchbar is skinny in Google page headers (at top of search results, Gmail, Google News, Google+, etc.) due to use of "flex: 0 2 auto", now that the former "flex-basis:auto" behavior is set via "main-size" keyword
(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?
Flags: needinfo?(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.
Flags: needinfo?(dholbert)
Whiteboard: [suggested fix for Google in comment 5][local Stylish hackaround in comment 17]
I've reported the bug at the (Google-internal) url <https://b.corp.google.com/issue?id=16949734>
Flags: needinfo?(jackalmage)
Thanks Daniel, Tab. 
For following up on this.
Assignee: english-us → nobody
Status: NEW → ASSIGNED
Component: English US → Desktop
Summary: Searchbar is skinny in Google page headers (at top of search results, Gmail, Google News, Google+, etc.) due to use of "flex: 0 2 auto", now that the former "flex-basis:auto" behavior is set via "main-size" keyword → Searchbar is skinny in Google page headers (at top of search results, Gmail, Google News, Google+, etc.)
Whiteboard: [suggested fix for Google in comment 5][local Stylish hackaround in comment 17] → [country-us] [serversniff] [sitewait] [suggested fix for Google in comment 5] [local Stylish hackaround in comment 17]
Whiteboard: [country-us] [serversniff] [sitewait] [suggested fix for Google in comment 5] [local Stylish hackaround in comment 17] → [country-us] [css] [sitewait] [suggested fix for Google in comment 5] [local Stylish hackaround in comment 17]
Attached file www.google.com.html
I was kind of working on getting a minimal testcase, but I see that the issue is already figured out.
(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...)
Flags: needinfo?(jackalmage)
The bug was assigned this morning.
Flags: needinfo?(jackalmage)
How long this bug will be in Nightly I can't use this short Google windows .I ask from Poland.
see comment 17 for a workaround that works for me.
Note: you probably have to adapt the "@-moz-document domain(google.com)" to match your country code TLD.
That Mozilla will release Nightly 34.I do think.I 'll be waiting so long as Team fix it.Thank
(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.)
Thank you  Daniel Holbert, your fix works and it is really a huge help.
Regards,
Thank you Daniel. I just followed your instructions in comment 17 and the old behavior is restored.
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)
(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.
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.
Flags: needinfo?(jackalmage)
(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.
There's a patch up right now that's undergoing review, so it should land soon.  I suggest not reverting if possible.
Flags: needinfo?(jackalmage)
(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.)
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.
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.
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Status: RESOLVED → VERIFIED
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.
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
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).
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
Blocks: 1057162
No longer depends on: 1032922
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.