1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

Status: VERIFIED FIXED

(Hello (Loop) :: Client, defect, P1)

Description

[Mark Banner (:standard8)]

Checking out latest fx-team and loading the standalone UI in Google Chrome reveals that the Mozilla logo isn't displayed as it is in Firefox.

The issue is due to the use of svg fragment identifiers and that fact that Chrome doesn't like these as background-images (known Chrome issue).

We need to change the logo to be displayed via an image tag or something.

Comment 1

[Mark Banner (:standard8)]

P1 as this is needed before we can do the next major release of standalone.

Comment 2

[Romain Testard [:RT]]

Hi Mark, lowering the priority on that one since my understanding is that this is about not displaying the Mozilla logo (i.e lower priority than the rest of the user journey)

Comment 3

[Ed Lee :Mardak]

Attachment: screenshot of problem

top chrome, bottom firefox

Comment 4

[David Critchley (:dcritch)]

https://code.google.com/p/chromium/issues/detail?id=128055

Also... Bug that added the Mozilla svg in:
https://bugzilla.mozilla.org/show_bug.cgi?id=1208466
Part 2 in Attachments

Comment 5

[David Critchley (:dcritch)]

Attachment: Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

Fix Mozilla logo in Chrome for Loop Standalone

Comment 6

[Ed Lee :Mardak]

Comment on attachment 8681491 [details] [diff] [review]
Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

>+++ b/browser/components/loop/standalone/content/css/webapp.css
> .mozilla-logo {
>-  background: url("../img/mozilla-logo.svg#logo") no-repeat;
>-  background-size: contain;
>   width: 100px;
>-  height: 30px;
>+  height: 26px;
> }
What does this change do? I don't see an accompanying <img>

Comment 7

[David Critchley (:dcritch)]

Attachment: Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

Fix Mozilla logo in Chrome for Loop Standalone

Comment 8

[David Critchley (:dcritch)]

(In reply to Ed Lee :Mardak from comment #6)
> Comment on attachment 8681491 [details] [diff] [review]
> Attachment to Bug 1215487 - The mozilla logo isn't displayed on the
> standalone UI in Google Chrome
> 
> >+++ b/browser/components/loop/standalone/content/css/webapp.css
> > .mozilla-logo {
> >-  background: url("../img/mozilla-logo.svg#logo") no-repeat;
> >-  background-size: contain;
> >   width: 100px;
> >-  height: 30px;
> >+  height: 26px;
> > }
> What does this change do? I don't see an accompanying <img>

Yes, found other instance of mozlogo which needed to change as well. Thanks for catching this.

Comment 9

[Ed Lee :Mardak]

Comment on attachment 8682034 [details] [diff] [review]
Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

Can you attach a before/after screenshot for each of those? I'm wondering how changing it from a p/div/block to a img/inline affects the layout.

Comment 10

[David Critchley (:dcritch)]

Attachment: Before and After Screenshots of Chrome and Firefox

Comment 11

[Ed Lee :Mardak]

Comment on attachment 8682034 [details] [diff] [review]
Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

>+++ b/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
>@@ -117,17 +117,17 @@ loop.standaloneRoomViews = (function(mozL10n) {
>             <ToSView dispatcher={this.props.dispatcher} />
>-            <p className="mozilla-logo" />
>+            <img className="mozilla-logo" src="shared/img/mozilla-logo.svg#logo" />
I don't think Chrome users would normally see StandaloneHandleUserAgentView as I believe that's supposed to be for Firefoxes that can open a chat window for their own chat instead of taking a spot as a guest in the standalone.

But it's good practice to avoid svg background images.

Comment 12

[Ed Lee :Mardak]

I'll check this in.

Comment 13

[Ed Lee :Mardak]

Comment on attachment 8682034 [details] [diff] [review]
Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

>rename from browser/components/loop/standalone/content/img/mozilla-logo.svg
>rename to browser/components/loop/content/shared/img/mozilla-logo.svg
Sorry missed this earlier. Why the move?

Comment 14

[David Critchley (:dcritch)]

I couldn't reference the svg from the jsx pages in the standalone folder, so looking at other examples they showed the logos/images being referenced from the content shared folder, so moved the svg there.

Comment 15

[Ed Lee :Mardak]

Comment on attachment 8682034 [details] [diff] [review]
Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

>+          <img className="standalone-moz-logo" src="shared/img/mozilla-logo.svg#logo-white" />
The simplest approach of doing src="img/mozilla-logo.svg#logo-white" works. There's no need to move the file.

Comment 16

[Ed Lee :Mardak]

(In reply to Ed Lee :Mardak from comment #15)
> >+          <img className="standalone-moz-logo" src="shared/img/mozilla-logo.svg#logo-white" />
> The simplest approach of doing src="img/mozilla-logo.svg#logo-white" works.
> There's no need to move the file.
The above won't quite work for ui showcase.

Standard8, do we have a good way to have non-css images work in both /ui and standalone /content?

Would it be reasonable to use absolute urls, e.g., <img src="/content/img/mozilla-logo.svg" /> ?

Comment 17

[Mark Banner (:standard8)]

(In reply to Ed Lee :Mardak from comment #16)
> (In reply to Ed Lee :Mardak from comment #15)
> > >+          <img className="standalone-moz-logo" src="shared/img/mozilla-logo.svg#logo-white" />
> > The simplest approach of doing src="img/mozilla-logo.svg#logo-white" works.
> > There's no need to move the file.
> The above won't quite work for ui showcase.
> 
> Standard8, do we have a good way to have non-css images work in both /ui and
> standalone /content?
> 
> Would it be reasonable to use absolute urls, e.g., <img
> src="/content/img/mozilla-logo.svg" /> ?

We can't include content/ in there as the production code doesn't know about it. When we move to an add-on, this is definitely one reason why we should change.

I think the best way to manage this for now would be to use img/mozilla-logo.svg#etc and then add an extra line into standalone/server.js:

app.use("/ui/img/", express.static(path.join(__dirname, "..", "standalone", "content", "img")));

or something like that.

It'd at least get the showcase working for now, and we can sort out the directories better later on (we already have a bug on this).

Comment 18

[David Critchley (:dcritch)]

Attachment: Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

Fix Mozilla logo in Chrome for Loop Standalone

Comment 19

[Ed Lee :Mardak]

Comment on attachment 8682644 [details] [diff] [review]
Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

Comment 11 said that while Chrome doesn't see StandaloneHandleUserAgentView, we should fix it for consistency. Hopefully that'll avoid future bugs with Chrome + svg background because all existing examples use <img>.

>+++ b/browser/components/loop/standalone/server.js
>@@ -66,16 +66,19 @@ app.get("/content/c/config.js", getConfigFile);
> // /ui - for the ui showcase
> // /content - for the standalone files.
> 
> app.use("/ui", express.static(path.join(__dirname, "..", "ui")));
> app.use("/ui/loop/", express.static(path.join(__dirname, "..", "content")));
> app.use("/ui/shared/", express.static(path.join(__dirname, "..", "content",
>                                                 "shared")));
> 
>+// Exists for use by UI Showcase
>+app.use("/ui/img/", express.static(path.join(__dirname, "..", "standalone", "content", "img")));
This comment is unnecessary and move the app.use to just above the /ui/loop/ line from a few lines earlier.

Comment 20

[Ed Lee :Mardak]

Also as a heads up, you can test it in chrome using the ui showcase, e.g.,

Standalone Room Handle Join in Firefox
Standalone room conversation (ready)

Comment 21

[David Critchley (:dcritch)]

Attachment: Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

Fix Mozilla logo in Chrome for Loop Standalone

Comment 22

[Ed Lee :Mardak]

Comment on attachment 8682765 [details] [diff] [review]
Attachment to Bug 1215487 - The mozilla logo isn't displayed on the standalone UI in Google Chrome

I'll land this.

Comment 23

[Ed Lee :Mardak]

https://hg.mozilla.org/integration/fx-team/rev/117a37db2aa519779cc813b79d860f1236fd1707
Bug 1215487 - Fix Mozilla logo in Chrome for Loop Standalone [r=Mardak]

Comment 24

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/117a37db2aa5

Comment 25

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/117a37db2aa5

Comment 26

[Bogdan Maris, Desktop QA]

Verified against stage server with latest 45.0a1 (from 2015-11-08), across platforms [1] - the logo is correctly displayed in the standalone page via Chrome.

[1] Windows 7 64-bit, Mac OS X 10.11.1 and Ubuntu 14.04 64-bit