Open Bug 914252 Opened 7 years ago Updated 2 years ago

Google calendar tier1 header would not render in Firefox Android

Categories

(Web Compatibility :: Mobile, defect, P3)

ARM
All
defect

Tracking

(Not tracked)

ASSIGNED

People

(Reporter: lmandel, Assigned: karlcow)

References

()

Details

(Keywords: webcompat:site-wait, Whiteboard: [serversniff] [webkitcss] [sitewait] [country-all] [platform-rel-Google][platform-rel-GoogleCalendar])

Attachments

(10 files)

As shown in the attached screenshot comparison, the header for Google Calendar renders incorrectly in Firefox.
Hmm, I don't get that version of the Calendar. I'll upload a screenshot of the lo-fi one I get in Firefox for Android 23.0. Were you doing any spoofing?

But spoofing with the FxOS Tablet UA gets me to that same version (yay?) and I can verify the problem. There's an inline stylehsheet (will attach) that contains a ton of -webkit-border-image data URIs, and a few -webkit-border-radius styles all without an unprefixed or -moz- variant.
(In reply to Mike Taylor [:miketaylr] from comment #1)
> Hmm, I don't get that version of the Calendar. I'll upload a screenshot of
> the lo-fi one I get in Firefox for Android 23.0. Were you doing any spoofing?

Must have been as I now get the same lo-fi version shown in your screenshot.
So if we want the hi-fi experience, we have to ask them both to amend sniffing and CSS, I suppose.
Whiteboard: [webkitcss][serversniff][contactready]
Some details: Requesting google.com/calendar redirects through accounts.google.com/ServiceLogin to www.google.com/calendar/m which is the lo-fi version. All HTTP-based redirects and backend sniffing.
Summary: Google calendar header renders incorrectly in Firefox → Google calendar header (fancy mobile site) renders incorrectly in Firefox - and it sends simplified mobile by default
This bugs me on FirefoxOS as well =(

Is there a tag to add?
Contacted Alex today.
Whiteboard: [webkitcss][serversniff][contactready] → [webkitcss][serversniff][sitewait]
* On Firefox OS, I receive a low-fi version. Nothing fancy. Nothing seems broken per se.
* On Firefox for Android. Same.

We still do not get the hifi version. We have to see if they decided to just ignore Firefox for the shinier version.
Status: NEW → ASSIGNED
Assignee: nobody → kdubost
The lowfi version is rendering correctly.
The version delivered to WebKit browsers contains webkit only CSS properties. The most notable issues are gradient and flexbox.

I will close it as WONTFIX given 

* the last discussions we had with Google
* AND that this is not the version we are actually receiving.
Summary: Google calendar header (fancy mobile site) renders incorrectly in Firefox - and it sends simplified mobile by default → Google calendar tier1 header would not render in Firefox Android and Firefox OS
Whiteboard: [webkitcss][serversniff][sitewait] → [serversniff] [webkitcss] [sitewait] [country-all]
Still no progress on this.
iOS Safari and Opera Mobile, Firefox Android are receiving the same version than Chrome.
Firefox OS, IE Mobile are receiving the low-fi version too.

The version sent to Firefox Android is still a version without the gradient and the colors fixed.
The mobile version of Google Calendar with Firefox Android + version number + CSS Unprefixing services doesn't solve anything.

Firefox gets spinning wheels. A canvas image which is never stopping.


These are all the properties used without standard equivalents in the CSS.

    -webkit-border-image: url('data:image/png;base64,
    -webkit-border-radius: 2px;
    -webkit-box-align: baseline;
    -webkit-box-flex: 1
    -webkit-box-orient: horizontal;
    -webkit-box-pack: end
    -webkit-box-shadow: 2px 2px 2px #ccc
    -webkit-line-break: after-white-space
    -webkit-text-size-adjust: none;
The irony is that when we use an iPhone UA, we get a slightly better version. Still with issue, but just a tad working better.
In the version sent to Chrome Mobile.

Our friend innerText Bug 264412 is used a couple of times (6 times):


example:
        function kb(a) {
            var b = r[E]("style");
            b.type = "text/css";
            b.innerText = a;
            Ya[y](b)
        }

        function Ab() {
            if (S) {
                var a = L[0];
                a && db.innerText != a ? (db.innerText = a, ca(eb, I), fb[H].backgroundImage = I, jb(S, Ma), jb(O, La), w(gb[H], Fa), w(S[H], ta)) : a || (w(gb[H], ta), w(S[H], Fa))
            }
        };


The version sent to Chrome Mobile has also plenty of issues with -webkit- only properties. 

example: using

#og_head .og_a{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
}

instead of
#og_head .og_a{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: flex;
    flex-direction: row;
}

some of the CSS properties are set up with JavaScript

        function fa(a, b) {
            return a.WebkitTransition = b
        }

or
            ta = "-webkit-box",

or 

            Ta = "webkitTransitionEnd",
            Ua = "webkitvisibilitychange",


or
            W[H].WebkitBoxFlex = J;


or 
                if (r.webkitVisibilityState == Oa) {

or 
    function na(a, b) {
        return a.WebkitTransform = b
    }
or 
                    h[B].WebkitBorderRadius = "8px";
                    h[B].WebkitBoxShadow = "0 0 8px rgba(0, 0, 0, 0.7)";
                    h[B].WebkitBackgroundSize = "100% 8px";
                    h[B].backgroundColor = "#b0c8ec";
                    h[B].background = "#cddcf3 -webkit-gradient(linear, left bottom, left top, " + c ? "from(#cddcf3), to(#b3caed)) no-repeat top" : "from(#b3caed), to(#cddcf3)) no-repeat bottom";
                    h[B].font = "13px/17px sans-serif";

or
    si[L].o = function() {
        this.b[B].WebkitTransition = "-webkit-transform 0.7s ease-out";
        na(this.b[B], "translate3d(0," + (tc("iPad") ? qd + 17 : qd - this.b[jb] + yd - 17) + "px,0)")
    };

etc.



All of these seems fixable. That would be an interesting exercise to see if a shim for the full script could make Google calendar working on Firefox Android. Everything is contained in one page only.

Once prettified and CSS standard properties added we got a 102,625 lines of code.

All the CSS are easily fixable. Nothing really funky. And I'm under the impression that JS code would not take that much to fix too.
Attached image google-calendar.jpg
Current comparisons.
Depends on: innertext
This:
            function ib(a) {
                var b = l[G]("style");
                b.type = "text/css";
                b.innerText = a;
                Wa[y](b)
            }

is exactly why the icons don't appear in the header: they use innerText to add the actual CSS source to a STYLE element. Change that to textContent (or 

b.innerText = b.textContent = a;

to handle all browsers you might care about ;) and the header looks fine.

I'll leap to the conclusion that the similar header on GMail Touch is also broken for the same reason.
On Firefox OS when adding an event we get an XML error message transition, then the page is displayed. 


On Firefox Android, I get the desktop site first, then I can request the mobile site. The markup received is more or less very similar to the one sent to Chrome on Android with two issues in the CSS:
* webkit border-image
* webkit flexbox


I will prepare a similar work of screen testing that I did for gmail this week. In the spirit of show don't tell to make it easier for Google to evaluate the list of fixes needed. 
https://bug1036987.bmoattachments.org/attachment.cgi?id=8688736
Attached image gcal-fixed-css.png
The CSS served as inline (included in the HTML of the document) is currently 
~ 106,808 lines once prettified with the following format:


 .selector {
     property: value;
     property: value;
 }
 <SPACE>

It makes it harder to test the modifications in the current developer tools Style Editor. Modifying individual properties in the inspector is working through.

To note that on these 106,808 lines, 105,616 are used for @font-face declarations.
The remaining 1192 are for the element styling. Once the styling has been fixed the UI is quite similar to the ones of Chrome on Android.

(full analysis soon)
Attached image gcal-issues-gecko.png
Issues and different screens for Firefox OS and Firefox Android compared to Google Calendar on Chrome.
Recontacted Google today with the graph and describing the issues.
Attached image firefox-gecko-blink.png
So here we have 3 screenshots:

From left to right

1. Gecko (Desktop) + Chrome UA
2. Gecko (Desktop) + Chrome UA + layout.css.prefixes.webkit; true
3. Blink (Desktop) + Chrome UA


In 1. (known webkit-only issues)
  * Missing items in the top bar, 
  * day menu not on 1 line 

In 2. we can notice, two glitches. (to be tested on device)
  * The line after the calendar tab label is stopped.

<div style="height: 26px;" id="og_p">
  <canvas width="1" height="52" style="height: 26px; width: 123px;"></canvas>

  <div style="position: relative; height: 26px;">
    <canvas width="178" height="52" style="height: 26px; width: 89px;"></canvas>
    <div style="width: 64px; left: 12px;" class="og_m">Calendar</div>
  </div>

  <canvas style="height: 26px;" class="og_a" width="1" height="52"></canvas>
</div>

The missing line is the 3rd canvas. I thought it was because it has no set width in the style attribute like the first one, but the markup in Blink is 

<div id="og_p" style="height: 26px;">
  <canvas height="52" width="1" style="height: 26px; width: 123px;"></canvas>

  <div style="position: relative; height: 26px;">
    <canvas height="52" width="180" style="height: 26px; width: 90px;"></canvas>
    <div class="og_m" style="width: 64px; left: 13px;">Calendar</div>
  </div>

  <canvas height="52" width="1" class="og_a" style="height: 26px; -webkit-box-flex: 1;"></canvas>
</div>

When I had: 

  <canvas style="height: 26px; flex-grow: 1;" class="og_a" width="1" height="52"></canvas>

This is being fixed.


  * The more button is not aligned on the right side.
    As a result the touch is not happening at the right 
    place for closing once opened. 

Not sure about this one. I see a difference in the computed values for both environment. I will upload a screenshot.
So in that screenshot we see the different computed value. flex-direction is not the same but it doesn't seem to be logical.

Maybe Daniel has an idea.
Flags: needinfo?(dholbert)
(In reply to Karl Dubost :karlcow from comment #21)
> In 2. we can notice, two glitches. (to be tested on device)
>   * The line after the calendar tab label is stopped.

My patch in bug 1241021 fixes this. (They must be setting -webkit-box-flex on the canvas here using something like miketaylr's sample-code in bug 1241021 comment 0.)

>   * The more button is not aligned on the right side.

This is bug 1231682 -- an ancestor of this "more" element (#og_q) has "-webkit-box-pack: justify", which we reject.  If I manually give this element "flex-direction: space-between" (which is what that value will map to after bug 1231682 is fixed), then the "more" button gets snapped to the right place.
Flags: needinfo?(dholbert)
(In reply to Daniel Holbert [:dholbert] from comment #23)
> This is bug 1231682 -- an ancestor of this "more" element (#og_q) has
> "-webkit-box-pack: justify", which we reject.  If I manually give this
> element "flex-direction: space-between"

Sorry, I meant "justify-content: space-between" (not flex-direction)
(In reply to Karl Dubost :karlcow from comment #22)
> Created attachment 8714624 [details]
> gecko-blink-computed-values.png
> 
> So in that screenshot we see the different computed value. flex-direction is
> not the same but it doesn't seem to be logical.

(I'm not clear what element you have focused here, or what's going on. Is this the 3rd <canvas>, with class="og_a", which is responsible for the line that's missing in current nightly? That <canvas> has computed "flex-direction" of "row" for me. If you're seeing something different, that maybe merits investigation, though perhaps on a separate bug since it doesn't seem to cause rendering problems and we don't want this bug to get too long.)
Here's a screenshot of what this looks like now in Firefox Desktop build, with a mobile Chrome UA spoofed, with bug 1231682's patch applied. (not yet landed, pending review)

Comparing to the middle screenshot in attachment 8714623 [details], you can see that both issues noted in comment 23 are fixed.
platform-rel: --- → ?
Whiteboard: [serversniff] [webkitcss] [sitewait] [country-all] → [serversniff] [webkitcss] [sitewait] [country-all] [platform-rel-Google][platform-rel-GoogleCalendar]
platform-rel: ? → ---
Priority: -- → P3
Summary: Google calendar tier1 header would not render in Firefox Android and Firefox OS → Google calendar tier1 header would not render in Firefox Android
Product: Tech Evangelism → Web Compatibility

Karl, is this still a valid issue?

Flags: needinfo?(kdubost)

Without UA override, this is what Firefox Android is getting from Google for Calendar.

Firefox on the left
Chrome on the right

This happens after a redirection from
https://calendar.google.com/ + login.

to https://calendar.google.com/calendar/gp?hl=en-GB for Chrome
to https://calendar.google.com/calendar/m?pli=1 for Firefox.

That said if I'm already logged in and I type https://calendar.google.com/
I seem to be redirected to https://calendar.google.com/calendar/gp?hl=en-GB

Let's test this.
Fresh profile.

  1. Login in first to accounts.google.com
  2. entering https://calendar.google.com/

nope same thing, going to
https://calendar.google.com/calendar/m?pli=1

but if I enter a second time
https://calendar.google.com/
then I get the fancy version (minus the top toolbar)

Flags: needinfo?(kdubost)

See bug 1547409. Moving webcompat whiteboard tags to keywords.

You need to log in before you can comment on or make changes to this bug.