1047040 - Implement UI for link clickers to prompt users to grant access to microphone/camera when applicable (rooms)

Status: RESOLVED FIXED

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

Description

[Sevaan Franks [:sevaan]]

Attachment: Firefox and Chrome Permissions Call-Outs

Implement design work done in Bug 1020253.

Browser detection must be used to place callout box in correct areas.

For Firefox, this is a doorhanger that hangs from the URL bar.
For Chrome, this is a notification bar.
Safari and IE are not supported.
All other browsers do not receive the permissions call-out.

Note from :RT...

> Just one comment - having looked at other similar solutions from other
> services it seems that they struggle keeping the arrow underneath the
> buttons in the Chrome notification bar for different screen resolutions.
> Probably something to keep in mind when developing/testing.

Comment 1

[Romain Testard [:RT]]

FYI Chrome is in the process of changing their permission UI to something a lot more aligned with Firefox: https://groups.google.com/forum/#!topic/discuss-webrtc/0Oh7JYXyITg

I suggest we keep the current plan as this is WIP on the Chrome (probably a new bug to be raised once this is not behind a flag anymore on Chrome).

Comment 2

[Maire Reavy [:mreavy]]

Since this is a standalone only bug, we'll work on this in the mozilla35 cycle (sept 1 - oct 13)

Comment 3

[Romain Testard [:RT]]

Further notes from bug 1020253
The call-outs can remain on screen in the following scenarios until the user answers the gUM prompt:
* if the user clicks somewhere else on the page
* if the user navigates to another tab and then comes back to the Hello tab
* if the user goes to another application and then gets back to the Hello tab

Comment 4

[:shell escalante]

i believe this still matters to you RT - can we talk about this one so we can validate what our desired behavior is.  believe we need Firefox browser work before we can leverage in Loop (so put into 38?)....

Comment 5

[Romain Testard [:RT]]

(In reply to sescalante from comment #4)
> i believe this still matters to you RT - can we talk about this one so we
> can validate what our desired behavior is.  believe we need Firefox browser
> work before we can leverage in Loop (so put into 38?)....

This is only a link clicker UI bug, nothing at platform level.
This is about helping the user accept the gUM prompt which is often dismissed by people, through some visual indicator on the link clicker UI. This applies to Firefox, Chrome and Opera - no platform dependency.

One thing I'd like to investigate though is whether we can disable gUM door hanger for the hello.firefox.com domain given we are a trusted web app and the fact that currently the user experience is better on Chrome where gUM acceptance is requested once only. I created bug 1087947 to track this.

Comment 6

[:shell escalante]

Hi Maire, why was this one requiring firefox changes again?  sorry - there aren't notes and i just wasn't getting it.

Comment 8

[Mark Banner (:standard8)]

(In reply to sescalante from comment #6)
> Hi Maire, why was this one requiring firefox changes again?  sorry - there
> aren't notes and i just wasn't getting it.

No, this doesn't require Firefox changes. This is about extra UI on the standalone page to indicate to users that they need to accept the permissions.

Note that bug 1073410 is adjusting some of how that UI works, I think there may be opportunity to refine this depending on the work there, hence adding it as blocking.

Comment 9

[Adam Roach [:abr]]

(In reply to Mark Banner (:standard8) from comment #8)
> Note that bug 1073410 is adjusting some of how that UI works, I think there
> may be opportunity to refine this depending on the work there, hence adding
> it as blocking.

Right -- I had a conversation with Sevaan around the proposal I made in Bug 1073410 comment 13, and I believe he is going to work up some alternate UX diagrams based on that conversation.

Comment 10

[Maire Reavy [:mreavy]]

Hi Sevaan -- We'd love to get the UX for this fix ASAP.  When do you think we're likely to get it?  Thanks!

Comment 11

[Sevaan Franks [:sevaan]]

(In reply to Maire Reavy [:mreavy] (Plz needinfo me) from comment #10)
> Hi Sevaan -- We'd love to get the UX for this fix ASAP.  When do you think
> we're likely to get it?  Thanks!

Just starting on it now, so before the week is out if that's okay.

Comment 12

[Marco Mucci [:MarcoM]]

Hi Sevaan, can you mark this bug for QE verification.

Comment 13

[Sevaan Franks [:sevaan]]

Attachment: Updated Permissions Call Outs

Updated permissions call-outs attached.

Comment 14

[Adam Roach [:abr]]

Comment on attachment 8520777 [details]
Updated Permissions Call Outs

The prompts themselves look good. If you could do some kind of animated color-cycling on the button that users are supposed to click, that might be helpful in users' comprehension of what they're being prompted to do.

I'm not sure that the mock-ups are strictly accurate, in that we are likely going to require camera access before any server interactions are initiated, so I don't think we can get into a situation where you see the other party *and* are still being prompted for camera access. Similarly, I think the camera prompt won't appear until *after* the user clicks "Join the conversation", so you won't ever see this prompt and the "Join the Conversation" prompt at the same time.

If this is the layout of elements we're going to show after the user signals intention to join the room ("yes, I'm wearing a shirt") but before camera access is granted, then I think we may want a spinner in the large box. Alternately, we could simply put the *prompt* in the large box, and not have the self-view show up until after access is granted (I think this would be better).

But as I understand things, this is a review of the prompts, not the mock-ups. So r+.

Comment 15

[Nils Ohlmeier [:drno]]

(In reply to Adam Roach (Travelling through Nov 18th) [:abr] from comment #14)
> I'm not sure that the mock-ups are strictly accurate, in that we are likely
> going to require camera access before any server interactions are initiated,
> so I don't think we can get into a situation where you see the other party
> *and* are still being prompted for camera access.

This happens when you click on an account-link link and the far end accepted the call, before you gave access to your A/V. I get that all the time when testing.

Comment 16

[Darrin Henein [:darrin]]

Comment on attachment 8520777 [details]
Updated Permissions Call Outs

I think this looks good. Maybe run past Maslaney as he has been in charge of all the iconography etc. for Hello.

Comment 17

[Dan Mosedale (:dmosedale, :dmose)]

(In reply to Nils Ohlmeier [:drno] from comment #15)
> (In reply to Adam Roach (Travelling through Nov 18th) [:abr] from comment
> #14)
> > I'm not sure that the mock-ups are strictly accurate, in that we are likely
> > going to require camera access before any server interactions are initiated,
> > so I don't think we can get into a situation where you see the other party
> > *and* are still being prompted for camera access.
> 
> This happens when you click on an account-link link and the far end accepted
> the call, before you gave access to your A/V. I get that all the time when
> testing.

That flow is in the process of changing.  Soon, the flow will be start button clicked -> ask gum perms -> receive gum perms -> initiate call on the wire.

Comment 18

[Michael Maslaney [:mmaslaney] ([e-mail])]

Comment on attachment 8520777 [details]
Updated Permissions Call Outs

Looks good, Sevaan. 

We may have to change the green color to teal, because of Apple's copyright on — believe it or not — the green colored camera icon/button. A simple solution would be to change solely the camera to blue.

Darrin, what say you on this issue?

Comment 19

[Michael Maslaney [:mmaslaney] ([e-mail])]

As far as animations are concerned, I would recommend we use the same bounce/ease-in, ease-out effect that's utilize for the menu panel.

Comment 20

[Darrin Henein [:darrin]]

I would go with teal not only to avoid the copyright issue, but also for consistency with the rest of the UI.

Comment 21

[Sevaan Franks [:sevaan]]

Attachment: Permission Callouts (@1x, @2x)

Changed to teal. Assets attached. Preview: http://cl.ly/image/2R0s1Z2n0O3m

Comment 22

[Mark Banner (:standard8)]

Reopening - this was intended as an implementation bug (as per comment 0), rather than a UX bug, and we don't have anything else to cover this.

Comment 23

[Mark Banner (:standard8)]

Sevaan: do you have svg images for these?

Comment 24

[Maire Reavy [:mreavy]]

[Tracking Requested - why for this release]:
This patch is for the standalone app. We may choose to uplift it for the sake of shared code with desktop.  Marking this as tracking Fx36 so we get this fixed before Fx36 goes to Release.

Comment 25

[Sevaan Franks [:sevaan]]

Attachment: Permission call-outs (SVG)

Comment 26

[Sylvestre Ledru [:Sylvestre]]

Not tracking the issues for the standalone app.

Comment 27

[Maire Reavy [:mreavy]]

Moving P2->P3 (P3 is a "normal" bug that we want fixed for Fx36.)

Comment 28

[Maire Reavy [:mreavy]]

We're run out of time to get this in before New Years, but let's do this early in Fx38 and push it out to production (since this is standalone) before the end of January.

Comment 29

[:shell escalante]

fix the UI link to have the UI sevaan just did.

Comment 30

[Adam Roach [:abr]]

Attachment: Missing font?

(In reply to Sevaan Franks [:sevaan] from comment #25)
> Created attachment 8531341 [details]
> Permission call-outs (SVG)

I think we have some font issues in the SVGs. When I look at them locally, I get hex tofu for things like the camera icon and the back arrow. Screen shot attached.

Comment 31

[Sevaan Franks [:sevaan]]

Attachment: SVG Permissions (Updated)

Updated SVGs attached.

See PNGs for how they should look: https://bugzilla.mozilla.org/attachment.cgi?id=8523000&action=edit

Comment 33

[Jared Wein [:jaws] (please needinfo? me)]

https://bug1047040.bugzilla.mozilla.org/attachment.cgi?id=8520777 shows these graphics being placed in the bottom-right of the standalone page.

What causes this to appear? Besides the of a-browser-showing-some-kind-of-prompt graphic and a generic explanation of what Hello requires, I don't see any call to action for what the user should do when they see this.

Is the bottom-right the best place for this? For LTR readers, since this is very important (and also spatially relevant), I think the top-left may be a better place (top-right for RTL, ideally).

Comment 34

[Romain Testard [:RT]]

This is an implementation bug from bug 1020253 and some of the requirements were in different locations.
I gathered all requirements under the User Story field.

Comment 35

[Mike de Boer [:mikedeboer]]

Sevaan, I just wanted to point out that the arrow inside the back button in firefox.svg is not aligned correctly. You might want to move it a bit to the left. Thanks!

Comment 36

[Sevaan Franks [:sevaan]]

Attachment: SVG Permissions (Update #2)

Thanks :mikedeboer. Updated SVGs attached.

Comment 37

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch

I didn't position this in the bottom-right as there are still some quirks to work out with the positioning of the standalone link clicker page (bug 1131104, bug 1119047).

Comment 38

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8563142 [details] [diff] [review]
Patch

I'll pick up the review for this.

Comment 39

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8563142 [details] [diff] [review]
Patch

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

This looks generally good, but I'd like to see it again with the comments I've requested.  I'd also suggest that it would be nice to scale the SVGs larger, as this makes it more obvious what it is.  That said, if that's difficult to do without having the SVGs occluded by the dialogs that they are trying to illustrate, don't worry about it.

::: browser/components/loop/content/shared/css/conversation.css
@@ +882,5 @@
>  }
>  
>  .standalone .room-conversation-wrapper .room-inner-info-area {
>    position: absolute;
> +  top: calc(50% - 140px);

Please add a comment describing where 140px number comes from and what it needs to be kept in sync with, if anything.

@@ +888,2 @@
>    z-index: 1000;
> +  width: 250px;

Same with this and the other non-relative-unit constants in this patch.

@@ +892,5 @@
> +}
> +
> +.standalone .prompt-media-message {
> +  padding-top: 78px;
> +  padding-top: calc(62px + 1rem);

There are two padding-tops here.

Comment 40

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Dan Mosedale (:dmose) - needinfo? me for response from comment #39)
> > +.standalone .prompt-media-message {
> > +  padding-top: 78px;
> > +  padding-top: calc(62px + 1rem);
> 
> There are two padding-tops here.

This is for browsers that don't support calc() which would be IE9+ and Opera.

Comment 41

[Dan Mosedale (:dmosedale, :dmose)]

OK, so a comment would be great for that.  

Also, it's possible that using vw and vh units will help more clearly express intent and add responsiveness.

Comment 42

[Mike de Boer [:mikedeboer]]

Comment on attachment 8563142 [details] [diff] [review]
Patch

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

A driveby review from me... I already had this tab open, thought I might be able to help ;-)

Another general comment is that all the SVG shape element tags can be converted to auto-close. Saves a few bytes.

::: browser/components/loop/standalone/content/img/gum-chrome.svg
@@ +10,5 @@
> +      <g transform="translate(0.000000, 18.000000)">
> +        <rect stroke="#92CB3E" stroke-width="2" fill="#FFFFFF" x="0.5" y="0" width="100" height="10"></rect>
> +        <path d="M89.5096131,3 C88.3997344,3 87.5,3.88772964 87.5,5 L87.5,5 C87.5,6.1045695 88.3933569,7 89.4971942,7 L88.5360952,7 C89.6426425,7 91.4357226,7 92.5331547,7 L95.5533191,7 C96.6560555,7 97.55,6.11227036 97.55,5 L97.55,5 C97.55,3.8954305 96.6581295,3 95.5403869,3 L89.5096131,3 Z" stroke="#92CB3E" fill="#FFFFFF"></path>
> +        <path d="M78.5096131,3 C77.3997344,3 76.5,3.88772964 76.5,5 L76.5,5 C76.5,6.1045695 77.3933569,7 78.4971942,7 L77.5360952,7 C78.6426425,7 80.4357226,7 81.5331547,7 L84.5533191,7 C85.6560555,7 86.55,6.11227036 86.55,5 L86.55,5 C86.55,3.8954305 85.6581295,3 84.5403869,3 L78.5096131,3 Z" stroke="#92CB3E" fill="#FFFFFF"></path>
> +        <path d="M8.5,3.69642857 L8.5,6.73214286 C8.5,6.81026825 8.46372804,6.86514121 8.39118304,6.89676339 C8.36700137,6.90606403 8.34375011,6.91071429 8.32142857,6.91071429 C8.27120511,6.91071429 8.22935285,6.89304333 8.19587054,6.85770089 L7.07142857,5.73325893 L7.07142857,6.19642857 C7.07142857,6.41778384 6.99283933,6.60704907 6.83565848,6.76422991 C6.67847764,6.92141076 6.48921242,7 6.26785714,7 L4.30357143,7 C4.08221616,7 3.89295093,6.92141076 3.73577009,6.76422991 C3.57858924,6.60704907 3.5,6.41778384 3.5,6.19642857 L3.5,4.23214286 C3.5,4.01078758 3.57858924,3.82152236 3.73577009,3.66434152 C3.89295093,3.50716067 4.08221616,3.42857143 4.30357143,3.42857143 L6.26785714,3.42857143 C6.48921242,3.42857143 6.67847764,3.50716067 6.83565848,3.66434152 C6.99283933,3.82152236 7.07142857,4.01078758 7.07142857,4.23214286 L7.07142857,4.69252232 L8.19587054,3.57087054 C8.22935285,3.5355281 8.27120511,3.51785714 8.32142857,3.51785714 C8.34375011,3.51785714 8.36700137,3.52250739 8.39118304,3.53180804 C8.46372804,3.56343022 8.5,3.61830318 8.5,3.69642857 L8.5,3.69642857 Z" id="" fill="#00AF84"></path>

The IDs are showing up as out-of-range characters to me. Since they're not needed, can you remove them?

@@ +12,5 @@
> +        <path d="M89.5096131,3 C88.3997344,3 87.5,3.88772964 87.5,5 L87.5,5 C87.5,6.1045695 88.3933569,7 89.4971942,7 L88.5360952,7 C89.6426425,7 91.4357226,7 92.5331547,7 L95.5533191,7 C96.6560555,7 97.55,6.11227036 97.55,5 L97.55,5 C97.55,3.8954305 96.6581295,3 95.5403869,3 L89.5096131,3 Z" stroke="#92CB3E" fill="#FFFFFF"></path>
> +        <path d="M78.5096131,3 C77.3997344,3 76.5,3.88772964 76.5,5 L76.5,5 C76.5,6.1045695 77.3933569,7 78.4971942,7 L77.5360952,7 C78.6426425,7 80.4357226,7 81.5331547,7 L84.5533191,7 C85.6560555,7 86.55,6.11227036 86.55,5 L86.55,5 C86.55,3.8954305 85.6581295,3 84.5403869,3 L78.5096131,3 Z" stroke="#92CB3E" fill="#FFFFFF"></path>
> +        <path d="M8.5,3.69642857 L8.5,6.73214286 C8.5,6.81026825 8.46372804,6.86514121 8.39118304,6.89676339 C8.36700137,6.90606403 8.34375011,6.91071429 8.32142857,6.91071429 C8.27120511,6.91071429 8.22935285,6.89304333 8.19587054,6.85770089 L7.07142857,5.73325893 L7.07142857,6.19642857 C7.07142857,6.41778384 6.99283933,6.60704907 6.83565848,6.76422991 C6.67847764,6.92141076 6.48921242,7 6.26785714,7 L4.30357143,7 C4.08221616,7 3.89295093,6.92141076 3.73577009,6.76422991 C3.57858924,6.60704907 3.5,6.41778384 3.5,6.19642857 L3.5,4.23214286 C3.5,4.01078758 3.57858924,3.82152236 3.73577009,3.66434152 C3.89295093,3.50716067 4.08221616,3.42857143 4.30357143,3.42857143 L6.26785714,3.42857143 C6.48921242,3.42857143 6.67847764,3.50716067 6.83565848,3.66434152 C6.99283933,3.82152236 7.07142857,4.01078758 7.07142857,4.23214286 L7.07142857,4.69252232 L8.19587054,3.57087054 C8.22935285,3.5355281 8.27120511,3.51785714 8.32142857,3.51785714 C8.34375011,3.51785714 8.36700137,3.52250739 8.39118304,3.53180804 C8.46372804,3.56343022 8.5,3.61830318 8.5,3.69642857 L8.5,3.69642857 Z" id="" fill="#00AF84"></path>
> +      </g>
> +      <path d="M97.9285714,14.5714286 L97.9285714,14.8571429 C97.9285714,14.8958335 97.9144347,14.9293153 97.8861607,14.9575893 C97.8578868,14.9858632 97.824405,15 97.7857143,15 L94.6428571,15 C94.6041665,15 94.5706847,14.9858632 94.5424107,14.9575893 C94.5141368,14.9293153 94.5,14.8958335 94.5,14.8571429 L94.5,14.5714286 C94.5,14.5327379 94.5141368,14.4992561 94.5424107,14.4709821 C94.5706847,14.4427082 94.6041665,14.4285714 94.6428571,14.4285714 L97.7857143,14.4285714 C97.824405,14.4285714 97.8578868,14.4427082 97.8861607,14.4709821 C97.9144347,14.4992561 97.9285714,14.5327379 97.9285714,14.5714286 L97.9285714,14.5714286 Z M97.9285714,13.4285714 L97.9285714,13.7142857 C97.9285714,13.7529764 97.9144347,13.7864582 97.8861607,13.8147321 C97.8578868,13.8430061 97.824405,13.8571429 97.7857143,13.8571429 L94.6428571,13.8571429 C94.6041665,13.8571429 94.5706847,13.8430061 94.5424107,13.8147321 C94.5141368,13.7864582 94.5,13.7529764 94.5,13.7142857 L94.5,13.4285714 C94.5,13.3898808 94.5141368,13.356399 94.5424107,13.328125 C94.5706847,13.299851 94.6041665,13.2857143 94.6428571,13.2857143 L97.7857143,13.2857143 C97.824405,13.2857143 97.8578868,13.299851 97.8861607,13.328125 C97.9144347,13.356399 97.9285714,13.3898808 97.9285714,13.4285714 L97.9285714,13.4285714 Z M97.9285714,12.2857143 L97.9285714,12.5714286 C97.9285714,12.6101192 97.9144347,12.643601 97.8861607,12.671875 C97.8578868,12.700149 97.824405,12.7142857 97.7857143,12.7142857 L94.6428571,12.7142857 C94.6041665,12.7142857 94.5706847,12.700149 94.5424107,12.671875 C94.5141368,12.643601 94.5,12.6101192 94.5,12.5714286 L94.5,12.2857143 C94.5,12.2470236 94.5141368,12.2135418 94.5424107,12.1852679 C94.5706847,12.1569939 94.6041665,12.1428571 94.6428571,12.1428571 L97.7857143,12.1428571 C97.824405,12.1428571 97.8578868,12.1569939 97.8861607,12.1852679 C97.9144347,12.2135418 97.9285714,12.2470236 97.9285714,12.2857143 L97.9285714,12.2857143 Z" id="-7" fill="#FFFFFF"></path>

and here

@@ +15,5 @@
> +      </g>
> +      <path d="M97.9285714,14.5714286 L97.9285714,14.8571429 C97.9285714,14.8958335 97.9144347,14.9293153 97.8861607,14.9575893 C97.8578868,14.9858632 97.824405,15 97.7857143,15 L94.6428571,15 C94.6041665,15 94.5706847,14.9858632 94.5424107,14.9575893 C94.5141368,14.9293153 94.5,14.8958335 94.5,14.8571429 L94.5,14.5714286 C94.5,14.5327379 94.5141368,14.4992561 94.5424107,14.4709821 C94.5706847,14.4427082 94.6041665,14.4285714 94.6428571,14.4285714 L97.7857143,14.4285714 C97.824405,14.4285714 97.8578868,14.4427082 97.8861607,14.4709821 C97.9144347,14.4992561 97.9285714,14.5327379 97.9285714,14.5714286 L97.9285714,14.5714286 Z M97.9285714,13.4285714 L97.9285714,13.7142857 C97.9285714,13.7529764 97.9144347,13.7864582 97.8861607,13.8147321 C97.8578868,13.8430061 97.824405,13.8571429 97.7857143,13.8571429 L94.6428571,13.8571429 C94.6041665,13.8571429 94.5706847,13.8430061 94.5424107,13.8147321 C94.5141368,13.7864582 94.5,13.7529764 94.5,13.7142857 L94.5,13.4285714 C94.5,13.3898808 94.5141368,13.356399 94.5424107,13.328125 C94.5706847,13.299851 94.6041665,13.2857143 94.6428571,13.2857143 L97.7857143,13.2857143 C97.824405,13.2857143 97.8578868,13.299851 97.8861607,13.328125 C97.9144347,13.356399 97.9285714,13.3898808 97.9285714,13.4285714 L97.9285714,13.4285714 Z M97.9285714,12.2857143 L97.9285714,12.5714286 C97.9285714,12.6101192 97.9144347,12.643601 97.8861607,12.671875 C97.8578868,12.700149 97.824405,12.7142857 97.7857143,12.7142857 L94.6428571,12.7142857 C94.6041665,12.7142857 94.5706847,12.700149 94.5424107,12.671875 C94.5141368,12.643601 94.5,12.6101192 94.5,12.5714286 L94.5,12.2857143 C94.5,12.2470236 94.5141368,12.2135418 94.5424107,12.1852679 C94.5706847,12.1569939 94.6041665,12.1428571 94.6428571,12.1428571 L97.7857143,12.1428571 C97.824405,12.1428571 97.8578868,12.1569939 97.8861607,12.1852679 C97.9144347,12.2135418 97.9285714,12.2470236 97.9285714,12.2857143 L97.9285714,12.2857143 Z" id="-7" fill="#FFFFFF"></path>
> +      <path d="M5.92857143,13.5714286 L5.92857143,13.8571429 C5.92857143,13.9360123 5.90439012,14.0033479 5.85602679,14.0591518 C5.80766345,14.1149556 5.74479205,14.1428571 5.66741071,14.1428571 L4.09598214,14.1428571 L4.75,14.7991071 C4.8065479,14.8526788 4.83482143,14.9196425 4.83482143,15 C4.83482143,15.0803575 4.8065479,15.1473212 4.75,15.2008929 L4.58258929,15.3705357 C4.52752949,15.4255955 4.46056587,15.453125 4.38169643,15.453125 C4.30431509,15.453125 4.23660743,15.4255955 4.17857143,15.3705357 L2.72544643,13.9151786 C2.67038663,13.8601188 2.64285714,13.7931552 2.64285714,13.7142857 C2.64285714,13.6369044 2.67038663,13.5691967 2.72544643,13.5111607 L4.17857143,12.0602679 C4.23511933,12.00372 4.30282699,11.9754464 4.38169643,11.9754464 C4.45907777,11.9754464 4.52604138,12.00372 4.58258929,12.0602679 L4.75,12.2254464 C4.8065479,12.2819943 4.83482143,12.349702 4.83482143,12.4285714 C4.83482143,12.5074409 4.8065479,12.5751485 4.75,12.6316964 L4.09598214,13.2857143 L5.66741071,13.2857143 C5.74479205,13.2857143 5.80766345,13.3136158 5.85602679,13.3694196 C5.90439012,13.4252235 5.92857143,13.4925591 5.92857143,13.5714286 L5.92857143,13.5714286 Z" fill="#FFFFFF"></path>
> +      <path d="M10.9285714,13.5714286 L10.9285714,13.8571429 C10.9285714,13.9360123 10.9043901,14.0033479 10.8560268,14.0591518 C10.8076634,14.1149556 10.7447921,14.1428571 10.6674107,14.1428571 L9.09598214,14.1428571 L9.75,14.7991071 C9.8065479,14.8526788 9.83482143,14.9196425 9.83482143,15 C9.83482143,15.0803575 9.8065479,15.1473212 9.75,15.2008929 L9.58258929,15.3705357 C9.52752949,15.4255955 9.46056587,15.453125 9.38169643,15.453125 C9.30431509,15.453125 9.23660743,15.4255955 9.17857143,15.3705357 L7.72544643,13.9151786 C7.67038663,13.8601188 7.64285714,13.7931552 7.64285714,13.7142857 C7.64285714,13.6369044 7.67038663,13.5691967 7.72544643,13.5111607 L9.17857143,12.0602679 C9.23511933,12.00372 9.30282699,11.9754464 9.38169643,11.9754464 C9.45907777,11.9754464 9.52604138,12.00372 9.58258929,12.0602679 L9.75,12.2254464 C9.8065479,12.2819943 9.83482143,12.349702 9.83482143,12.4285714 C9.83482143,12.5074409 9.8065479,12.5751485 9.75,12.6316964 L9.09598214,13.2857143 L10.6674107,13.2857143 C10.7447921,13.2857143 10.8076634,13.3136158 10.8560268,13.3694196 C10.9043901,13.4252235 10.9285714,13.4925591 10.9285714,13.5714286 L10.9285714,13.5714286 Z" fill="#FFFFFF" transform="translate(9.285714, 13.714286) scale(-1, 1) translate(-9.285714, -13.714286) "></path>
> +      <path d="M16.9285714,12.1428571 L16.9285714,13.1428571 C16.9285714,13.1815478 16.9144347,13.2150296 16.8861607,13.2433036 C16.8578868,13.2715775 16.824405,13.2857143 16.7857143,13.2857143 L15.7857143,13.2857143 C15.723214,13.2857143 15.6793156,13.2559527 15.6540179,13.1964286 C15.6287201,13.1383926 15.6391367,13.0870538 15.6852679,13.0424107 L15.9933036,12.734375 C15.7730644,12.5305049 15.5133944,12.4285714 15.2142857,12.4285714 C15.059523,12.4285714 14.9118311,12.4587051 14.7712054,12.5189732 C14.6305797,12.5792414 14.5089291,12.6607138 14.40625,12.7633929 C14.3035709,12.8660719 14.2220985,12.9877225 14.1618304,13.1283482 C14.1015622,13.2689739 14.0714286,13.4166659 14.0714286,13.5714286 C14.0714286,13.7261912 14.1015622,13.8738832 14.1618304,14.0145089 C14.2220985,14.1551346 14.3035709,14.2767852 14.40625,14.3794643 C14.5089291,14.4821434 14.6305797,14.5636158 14.7712054,14.6238839 C14.9118311,14.6841521 15.059523,14.7142857 15.2142857,14.7142857 C15.3913699,14.7142857 15.558779,14.6755956 15.7165179,14.5982143 C15.8742567,14.5208329 16.0074399,14.411459 16.1160714,14.2700893 C16.1264881,14.2552083 16.1436011,14.2462798 16.1674107,14.2433036 C16.1882442,14.2433036 16.2068452,14.2499999 16.2232143,14.2633929 L16.5290179,14.5714286 C16.5424108,14.5833334 16.5494792,14.5985862 16.5502232,14.6171875 C16.5509673,14.6357888 16.545387,14.6525297 16.5334821,14.6674107 C16.371279,14.8638403 16.1748523,15.0159965 15.9441964,15.1238839 C15.7135405,15.2317714 15.4702394,15.2857143 15.2142857,15.2857143 C14.9821417,15.2857143 14.7604177,15.2403278 14.5491071,15.1495536 C14.3377966,15.0587793 14.1555067,14.9367567 14.0022321,14.7834821 C13.8489576,14.6302076 13.726935,14.4479177 13.6361607,14.2366071 C13.5453865,14.0252966 13.5,13.8035726 13.5,13.5714286 C13.5,13.3392846 13.5453865,13.1175606 13.6361607,12.90625 C13.726935,12.6949394 13.8489576,12.5126496 14.0022321,12.359375 C14.1555067,12.2061004 14.3377966,12.0840778 14.5491071,11.9933036 C14.7604177,11.9025293 14.9821417,11.8571429 15.2142857,11.8571429 C15.4330368,11.8571429 15.6447162,11.8984371 15.8493304,11.9810268 C16.0539445,12.0636165 16.2358623,12.1800588 16.3950893,12.3303571 L16.6852679,12.0424107 C16.7284228,11.9962795 16.7805056,11.985863 16.8415179,12.0111607 C16.8995539,12.0364585 16.9285714,12.0803568 16.9285714,12.1428571 L16.9285714,12.1428571 Z" id="-5" fill="#FFFFFF"></path>

and here

::: browser/components/loop/standalone/content/img/gum-firefox.svg
@@ +16,5 @@
> +        <path d="M8.07491535,9.33333333 C6.68872738,9.33333333 5.565,10.4429954 5.565,11.8333333 L5.565,11.8333333 C5.565,13.2140452 6.68484687,14.3333333 8.05891597,14.3333333 L31.8786161,14.3333333 L90.0705787,14.3333333 C91.4482095,14.3333333 92.565,13.2236713 92.565,11.8333333 L92.565,11.8333333 C92.565,10.4526215 91.4491428,9.33333333 90.0550846,9.33333333 L8.07491535,9.33333333 Z" fill="#FFFFFF"></path>
> +        <ellipse stroke="#FFFFFF" fill="#AAE5F9" cx="5.565" cy="12" rx="3" ry="3"></ellipse>
> +        <path d="M16.2240909,16.6938776 L44.5630004,16.6938776 C45.6668839,16.6938776 46.565,17.5893929 46.565,18.6940672 L46.565,44.9998104 C46.565,46.1094081 45.6686743,47 44.5630004,47 L5.56699958,47 C4.46311611,47 3.565,46.1044846 3.565,44.9998104 L3.565,18.6940672 C3.565,17.5844694 4.46132574,16.6938776 5.56699958,16.6938776 L8.40590909,16.6938776 L12.315,14 L16.2240909,16.6938776 Z" stroke="#92CB3E" stroke-width="2" fill="#FFFFFF"></path>
> +        <path d="M25.0575753,38 C23.680964,38 22.565,39.1096621 22.565,40.5 L22.565,40.5 C22.565,41.8807119 23.6941328,43 25.0722854,43 L26.115167,43 C27.4952935,43 29.7367265,43 31.1231981,43 L40.0643408,43 C41.4454167,43 42.565,41.8903379 42.565,40.5 L42.565,40.5 C42.565,39.1192881 41.4468578,38 40.0724247,38 L25.0575753,38 Z" stroke="#92CB3E" fill="#FFFFFF"></path>
> +        <path d="M17.565,22.3928571 L17.565,28.4642857 C17.565,28.6205365 17.4924561,28.7302824 17.3473661,28.7935268 C17.2990027,28.8121281 17.2525002,28.8214286 17.2078571,28.8214286 C17.1074102,28.8214286 17.0237057,28.7860867 16.9567411,28.7154018 L14.7078571,26.4665179 L14.7078571,27.3928571 C14.7078571,27.8355677 14.5506787,28.2140981 14.236317,28.5284598 C13.9219553,28.8428215 13.5434248,29 13.1007143,29 L9.17214286,29 C8.72943231,29 8.35090187,28.8428215 8.03654018,28.5284598 C7.72217849,28.2140981 7.565,27.8355677 7.565,27.3928571 L7.565,23.4642857 C7.565,23.0215752 7.72217849,22.6430447 8.03654018,22.328683 C8.35090187,22.0143213 8.72943231,21.8571429 9.17214286,21.8571429 L13.1007143,21.8571429 C13.5434248,21.8571429 13.9219553,22.0143213 14.236317,22.328683 C14.5506787,22.6430447 14.7078571,23.0215752 14.7078571,23.4642857 L14.7078571,24.3850446 L16.9567411,22.1417411 C17.0237057,22.0710562 17.1074102,22.0357143 17.2078571,22.0357143 C17.2525002,22.0357143 17.2990027,22.0450148 17.3473661,22.0636161 C17.4924561,22.1268604 17.565,22.2366064 17.565,22.3928571 L17.565,22.3928571 Z" id="" fill="#00AF84"></path>

and here

@@ +19,5 @@
> +        <path d="M25.0575753,38 C23.680964,38 22.565,39.1096621 22.565,40.5 L22.565,40.5 C22.565,41.8807119 23.6941328,43 25.0722854,43 L26.115167,43 C27.4952935,43 29.7367265,43 31.1231981,43 L40.0643408,43 C41.4454167,43 42.565,41.8903379 42.565,40.5 L42.565,40.5 C42.565,39.1192881 41.4468578,38 40.0724247,38 L25.0575753,38 Z" stroke="#92CB3E" fill="#FFFFFF"></path>
> +        <path d="M17.565,22.3928571 L17.565,28.4642857 C17.565,28.6205365 17.4924561,28.7302824 17.3473661,28.7935268 C17.2990027,28.8121281 17.2525002,28.8214286 17.2078571,28.8214286 C17.1074102,28.8214286 17.0237057,28.7860867 16.9567411,28.7154018 L14.7078571,26.4665179 L14.7078571,27.3928571 C14.7078571,27.8355677 14.5506787,28.2140981 14.236317,28.5284598 C13.9219553,28.8428215 13.5434248,29 13.1007143,29 L9.17214286,29 C8.72943231,29 8.35090187,28.8428215 8.03654018,28.5284598 C7.72217849,28.2140981 7.565,27.8355677 7.565,27.3928571 L7.565,23.4642857 C7.565,23.0215752 7.72217849,22.6430447 8.03654018,22.328683 C8.35090187,22.0143213 8.72943231,21.8571429 9.17214286,21.8571429 L13.1007143,21.8571429 C13.5434248,21.8571429 13.9219553,22.0143213 14.236317,22.328683 C14.5506787,22.6430447 14.7078571,23.0215752 14.7078571,23.4642857 L14.7078571,24.3850446 L16.9567411,22.1417411 C17.0237057,22.0710562 17.1074102,22.0357143 17.2078571,22.0357143 C17.2525002,22.0357143 17.2990027,22.0450148 17.3473661,22.0636161 C17.4924561,22.1268604 17.565,22.2366064 17.565,22.3928571 L17.565,22.3928571 Z" id="" fill="#00AF84"></path>
> +        <path d="M13.565,11.0178571 L13.565,12.8392857 C13.565,12.8861609 13.5432368,12.9190847 13.4997098,12.938058 C13.4852008,12.9436384 13.4712501,12.9464286 13.4578571,12.9464286 C13.4277231,12.9464286 13.4026117,12.935826 13.3825223,12.9146205 L12.7078571,12.2399554 L12.7078571,12.5178571 C12.7078571,12.6506703 12.6607036,12.7642294 12.5663951,12.8585379 C12.4720866,12.9528465 12.3585274,13 12.2257143,13 L11.0471429,13 C10.9143297,13 10.8007706,12.9528465 10.7064621,12.8585379 C10.6121535,12.7642294 10.565,12.6506703 10.565,12.5178571 L10.565,11.3392857 C10.565,11.2064726 10.6121535,11.0929134 10.7064621,10.9986049 C10.8007706,10.9042964 10.9143297,10.8571429 11.0471429,10.8571429 L12.2257143,10.8571429 C12.3585274,10.8571429 12.4720866,10.9042964 12.5663951,10.9986049 C12.6607036,11.0929134 12.7078571,11.2064726 12.7078571,11.3392857 L12.7078571,11.6155134 L13.3825223,10.9425223 C13.4026117,10.9213169 13.4277231,10.9107143 13.4578571,10.9107143 C13.4712501,10.9107143 13.4852008,10.9135044 13.4997098,10.9190848 C13.5432368,10.9380581 13.565,10.9709819 13.565,11.0178571 L13.565,11.0178571 Z" fill="#00AF84"></path>
> +        <path d="M6.86418806,12.1429618 C6.86418806,12.2021139 6.84605208,12.2526156 6.80977958,12.2944685 C6.77350707,12.3363214 6.72635353,12.3572475 6.66831752,12.3572475 L5.48974609,12.3572475 L5.98025949,12.849435 C6.02267041,12.8896138 6.04387556,12.9398365 6.04387556,13.0001046 C6.04387556,13.0603728 6.02267041,13.1105955 5.98025949,13.1507743 L5.85470145,13.2780064 C5.8134066,13.3193013 5.76318389,13.3399484 5.70403181,13.3399484 C5.6459958,13.3399484 5.59521506,13.3193013 5.55168806,13.2780064 L4.46184431,12.1864886 C4.42054946,12.1451937 4.39990234,12.094971 4.39990234,12.0358189 C4.39990234,11.9777829 4.42054946,11.9270022 4.46184431,11.8834752 L5.55168806,10.7953055 C5.59409898,10.7528946 5.64487973,10.7316895 5.70403181,10.7316895 C5.76206781,10.7316895 5.81229052,10.7528946 5.85470145,10.7953055 L5.98025949,10.9191895 C6.02267041,10.9616004 6.04387556,11.0123811 6.04387556,11.0715332 C6.04387556,11.1306853 6.02267041,11.181466 5.98025949,11.223877 L5.48974609,11.7143903 L6.66831752,11.7143903 C6.72635353,11.7143903 6.77350707,11.7353165 6.80977958,11.7771694 C6.84605208,11.8190223 6.86418806,11.869524 6.86418806,11.9286761 L6.86418806,12.1429618 Z" fill="#FFFFFF"></path>
> +        <path d="M97.1364286,12.6785714 L97.1364286,12.8928571 C97.1364286,12.9218751 97.125826,12.9469865 97.1046205,12.968192 C97.0834151,12.9893974 97.0583037,13 97.0292857,13 L94.6721429,13 C94.6431249,13 94.6180135,12.9893974 94.596808,12.968192 C94.5756026,12.9469865 94.565,12.9218751 94.565,12.8928571 L94.565,12.6785714 C94.565,12.6495534 94.5756026,12.6244421 94.596808,12.6032366 C94.6180135,12.5820311 94.6431249,12.5714286 94.6721429,12.5714286 L97.0292857,12.5714286 C97.0583037,12.5714286 97.0834151,12.5820311 97.1046205,12.6032366 C97.125826,12.6244421 97.1364286,12.6495534 97.1364286,12.6785714 L97.1364286,12.6785714 Z M97.1364286,11.8214286 L97.1364286,12.0357143 C97.1364286,12.0647323 97.125826,12.0898436 97.1046205,12.1110491 C97.0834151,12.1322546 97.0583037,12.1428571 97.0292857,12.1428571 L94.6721429,12.1428571 C94.6431249,12.1428571 94.6180135,12.1322546 94.596808,12.1110491 C94.5756026,12.0898436 94.565,12.0647323 94.565,12.0357143 L94.565,11.8214286 C94.565,11.7924106 94.5756026,11.7672992 94.596808,11.7460937 C94.6180135,11.7248883 94.6431249,11.7142857 94.6721429,11.7142857 L97.0292857,11.7142857 C97.0583037,11.7142857 97.0834151,11.7248883 97.1046205,11.7460937 C97.125826,11.7672992 97.1364286,11.7924106 97.1364286,11.8214286 L97.1364286,11.8214286 Z M97.1364286,10.9642857 L97.1364286,11.1785714 C97.1364286,11.2075894 97.125826,11.2327008 97.1046205,11.2539062 C97.0834151,11.2751117 97.0583037,11.2857143 97.0292857,11.2857143 L94.6721429,11.2857143 C94.6431249,11.2857143 94.6180135,11.2751117 94.596808,11.2539062 C94.5756026,11.2327008 94.565,11.2075894 94.565,11.1785714 L94.565,10.9642857 C94.565,10.9352677 94.5756026,10.9101564 94.596808,10.8889509 C94.6180135,10.8677454 94.6431249,10.8571429 94.6721429,10.8571429 L97.0292857,10.8571429 C97.0583037,10.8571429 97.0834151,10.8677454 97.1046205,10.8889509 C97.125826,10.9101564 97.1364286,10.9352677 97.1364286,10.9642857 L97.1364286,10.9642857 Z" id="-7" fill="#FFFFFF"></path>

and here

::: browser/components/loop/standalone/content/img/gum-opera.svg
@@ +8,5 @@
> +      <path d="M27.2559789,11 C25.8746722,11 24.754902,12.1096621 24.754902,13.5 L24.754902,13.5 C24.754902,14.8807119 25.8688951,16 27.2538514,16 L46.91717,16 L95.5280221,16 C96.9095015,16 98.0294118,14.8903379 98.0294118,13.5 L98.0294118,13.5 C98.0294118,12.1192881 96.9077658,11 95.5283349,11 L27.2559789,11 Z" fill="#FFFFFF"></path>
> +      <rect stroke="#92CB3E" stroke-width="2" fill="#FFFFFF" x="28.7156863" y="15" width="42.5784314" height="22" rx="2"></rect>
> +      <path d="M51.5228862,29 C50.1376565,29 49.0147059,30.1096621 49.0147059,31.5 L49.0147059,31.5 C49.0147059,32.8807119 50.1327688,34 51.5124335,34 L55.0045081,34 L66.3156937,34 C67.6980258,34 68.8186275,32.8903379 68.8186275,31.5 L68.8186275,31.5 C68.8186275,30.1192881 67.6971405,29 66.3104471,29 L51.5228862,29 Z" stroke="#92CB3E" fill="#FFFFFF"></path>
> +      <rect stroke="#ABE6F8" x="0" y="0" width="101" height="62"></rect>
> +      <path d="M40.6764706,19.7142857 L40.6764706,24.5714286 C40.6764706,24.6964292 40.6184355,24.7842259 40.5023634,24.8348214 C40.4636728,24.8497025 40.4264708,24.8571429 40.3907563,24.8571429 C40.3103988,24.8571429 40.2434351,24.8288693 40.1898634,24.7723214 L38.3907563,22.9732143 L38.3907563,23.7142857 C38.3907563,24.0684542 38.2650135,24.3712785 38.0135242,24.6227679 C37.7620348,24.8742572 37.4592105,25 37.105042,25 L33.9621849,25 C33.6080164,25 33.3051921,24.8742572 33.0537027,24.6227679 C32.8022134,24.3712785 32.6764706,24.0684542 32.6764706,23.7142857 L32.6764706,20.5714286 C32.6764706,20.2172601 32.8022134,19.9144358 33.0537027,19.6629464 C33.3051921,19.4114571 33.6080164,19.2857143 33.9621849,19.2857143 L37.105042,19.2857143 C37.4592105,19.2857143 37.7620348,19.4114571 38.0135242,19.6629464 C38.2650135,19.9144358 38.3907563,20.2172601 38.3907563,20.5714286 L38.3907563,21.3080357 L40.1898634,19.5133929 C40.2434351,19.456845 40.3103988,19.4285714 40.3907563,19.4285714 C40.4264708,19.4285714 40.4636728,19.4360118 40.5023634,19.4508929 C40.6184355,19.5014883 40.6764706,19.5892851 40.6764706,19.7142857 L40.6764706,19.7142857 Z" id="" fill="#00AF84"></path>

and here

@@ +9,5 @@
> +      <rect stroke="#92CB3E" stroke-width="2" fill="#FFFFFF" x="28.7156863" y="15" width="42.5784314" height="22" rx="2"></rect>
> +      <path d="M51.5228862,29 C50.1376565,29 49.0147059,30.1096621 49.0147059,31.5 L49.0147059,31.5 C49.0147059,32.8807119 50.1327688,34 51.5124335,34 L55.0045081,34 L66.3156937,34 C67.6980258,34 68.8186275,32.8903379 68.8186275,31.5 L68.8186275,31.5 C68.8186275,30.1192881 67.6971405,29 66.3104471,29 L51.5228862,29 Z" stroke="#92CB3E" fill="#FFFFFF"></path>
> +      <rect stroke="#ABE6F8" x="0" y="0" width="101" height="62"></rect>
> +      <path d="M40.6764706,19.7142857 L40.6764706,24.5714286 C40.6764706,24.6964292 40.6184355,24.7842259 40.5023634,24.8348214 C40.4636728,24.8497025 40.4264708,24.8571429 40.3907563,24.8571429 C40.3103988,24.8571429 40.2434351,24.8288693 40.1898634,24.7723214 L38.3907563,22.9732143 L38.3907563,23.7142857 C38.3907563,24.0684542 38.2650135,24.3712785 38.0135242,24.6227679 C37.7620348,24.8742572 37.4592105,25 37.105042,25 L33.9621849,25 C33.6080164,25 33.3051921,24.8742572 33.0537027,24.6227679 C32.8022134,24.3712785 32.6764706,24.0684542 32.6764706,23.7142857 L32.6764706,20.5714286 C32.6764706,20.2172601 32.8022134,19.9144358 33.0537027,19.6629464 C33.3051921,19.4114571 33.6080164,19.2857143 33.9621849,19.2857143 L37.105042,19.2857143 C37.4592105,19.2857143 37.7620348,19.4114571 38.0135242,19.6629464 C38.2650135,19.9144358 38.3907563,20.2172601 38.3907563,20.5714286 L38.3907563,21.3080357 L40.1898634,19.5133929 C40.2434351,19.456845 40.3103988,19.4285714 40.3907563,19.4285714 C40.4264708,19.4285714 40.4636728,19.4360118 40.5023634,19.4508929 C40.6184355,19.5014883 40.6764706,19.5892851 40.6764706,19.7142857 L40.6764706,19.7142857 Z" id="" fill="#00AF84"></path>
> +      <path d="M22.2422969,14.5714286 L22.2422969,14.8571429 C22.2422969,14.8958335 22.2281602,14.9293153 22.1998862,14.9575893 C22.1716123,14.9858632 22.1381304,15 22.0994398,15 L18.9565826,15 C18.917892,15 18.8844102,14.9858632 18.8561362,14.9575893 C18.8278623,14.9293153 18.8137255,14.8958335 18.8137255,14.8571429 L18.8137255,14.5714286 C18.8137255,14.5327379 18.8278623,14.4992561 18.8561362,14.4709821 C18.8844102,14.4427082 18.917892,14.4285714 18.9565826,14.4285714 L22.0994398,14.4285714 C22.1381304,14.4285714 22.1716123,14.4427082 22.1998862,14.4709821 C22.2281602,14.4992561 22.2422969,14.5327379 22.2422969,14.5714286 L22.2422969,14.5714286 Z M22.2422969,13.4285714 L22.2422969,13.7142857 C22.2422969,13.7529764 22.2281602,13.7864582 22.1998862,13.8147321 C22.1716123,13.8430061 22.1381304,13.8571429 22.0994398,13.8571429 L18.9565826,13.8571429 C18.917892,13.8571429 18.8844102,13.8430061 18.8561362,13.8147321 C18.8278623,13.7864582 18.8137255,13.7529764 18.8137255,13.7142857 L18.8137255,13.4285714 C18.8137255,13.3898808 18.8278623,13.356399 18.8561362,13.328125 C18.8844102,13.299851 18.917892,13.2857143 18.9565826,13.2857143 L22.0994398,13.2857143 C22.1381304,13.2857143 22.1716123,13.299851 22.1998862,13.328125 C22.2281602,13.356399 22.2422969,13.3898808 22.2422969,13.4285714 L22.2422969,13.4285714 Z M22.2422969,12.2857143 L22.2422969,12.5714286 C22.2422969,12.6101192 22.2281602,12.643601 22.1998862,12.671875 C22.1716123,12.700149 22.1381304,12.7142857 22.0994398,12.7142857 L18.9565826,12.7142857 C18.917892,12.7142857 18.8844102,12.700149 18.8561362,12.671875 C18.8278623,12.643601 18.8137255,12.6101192 18.8137255,12.5714286 L18.8137255,12.2857143 C18.8137255,12.2470236 18.8278623,12.2135418 18.8561362,12.1852679 C18.8844102,12.1569939 18.917892,12.1428571 18.9565826,12.1428571 L22.0994398,12.1428571 C22.1381304,12.1428571 22.1716123,12.1569939 22.1998862,12.1852679 C22.2281602,12.2135418 22.2422969,12.2470236 22.2422969,12.2857143 L22.2422969,12.2857143 Z" id="" fill="#FFFFFF"></path>

and here

@@ +12,5 @@
> +      <path d="M40.6764706,19.7142857 L40.6764706,24.5714286 C40.6764706,24.6964292 40.6184355,24.7842259 40.5023634,24.8348214 C40.4636728,24.8497025 40.4264708,24.8571429 40.3907563,24.8571429 C40.3103988,24.8571429 40.2434351,24.8288693 40.1898634,24.7723214 L38.3907563,22.9732143 L38.3907563,23.7142857 C38.3907563,24.0684542 38.2650135,24.3712785 38.0135242,24.6227679 C37.7620348,24.8742572 37.4592105,25 37.105042,25 L33.9621849,25 C33.6080164,25 33.3051921,24.8742572 33.0537027,24.6227679 C32.8022134,24.3712785 32.6764706,24.0684542 32.6764706,23.7142857 L32.6764706,20.5714286 C32.6764706,20.2172601 32.8022134,19.9144358 33.0537027,19.6629464 C33.3051921,19.4114571 33.6080164,19.2857143 33.9621849,19.2857143 L37.105042,19.2857143 C37.4592105,19.2857143 37.7620348,19.4114571 38.0135242,19.6629464 C38.2650135,19.9144358 38.3907563,20.2172601 38.3907563,20.5714286 L38.3907563,21.3080357 L40.1898634,19.5133929 C40.2434351,19.456845 40.3103988,19.4285714 40.3907563,19.4285714 C40.4264708,19.4285714 40.4636728,19.4360118 40.5023634,19.4508929 C40.6184355,19.5014883 40.6764706,19.5892851 40.6764706,19.7142857 L40.6764706,19.7142857 Z" id="" fill="#00AF84"></path>
> +      <path d="M22.2422969,14.5714286 L22.2422969,14.8571429 C22.2422969,14.8958335 22.2281602,14.9293153 22.1998862,14.9575893 C22.1716123,14.9858632 22.1381304,15 22.0994398,15 L18.9565826,15 C18.917892,15 18.8844102,14.9858632 18.8561362,14.9575893 C18.8278623,14.9293153 18.8137255,14.8958335 18.8137255,14.8571429 L18.8137255,14.5714286 C18.8137255,14.5327379 18.8278623,14.4992561 18.8561362,14.4709821 C18.8844102,14.4427082 18.917892,14.4285714 18.9565826,14.4285714 L22.0994398,14.4285714 C22.1381304,14.4285714 22.1716123,14.4427082 22.1998862,14.4709821 C22.2281602,14.4992561 22.2422969,14.5327379 22.2422969,14.5714286 L22.2422969,14.5714286 Z M22.2422969,13.4285714 L22.2422969,13.7142857 C22.2422969,13.7529764 22.2281602,13.7864582 22.1998862,13.8147321 C22.1716123,13.8430061 22.1381304,13.8571429 22.0994398,13.8571429 L18.9565826,13.8571429 C18.917892,13.8571429 18.8844102,13.8430061 18.8561362,13.8147321 C18.8278623,13.7864582 18.8137255,13.7529764 18.8137255,13.7142857 L18.8137255,13.4285714 C18.8137255,13.3898808 18.8278623,13.356399 18.8561362,13.328125 C18.8844102,13.299851 18.917892,13.2857143 18.9565826,13.2857143 L22.0994398,13.2857143 C22.1381304,13.2857143 22.1716123,13.299851 22.1998862,13.328125 C22.2281602,13.356399 22.2422969,13.3898808 22.2422969,13.4285714 L22.2422969,13.4285714 Z M22.2422969,12.2857143 L22.2422969,12.5714286 C22.2422969,12.6101192 22.2281602,12.643601 22.1998862,12.671875 C22.1716123,12.700149 22.1381304,12.7142857 22.0994398,12.7142857 L18.9565826,12.7142857 C18.917892,12.7142857 18.8844102,12.700149 18.8561362,12.671875 C18.8278623,12.643601 18.8137255,12.6101192 18.8137255,12.5714286 L18.8137255,12.2857143 C18.8137255,12.2470236 18.8278623,12.2135418 18.8561362,12.1852679 C18.8844102,12.1569939 18.917892,12.1428571 18.9565826,12.1428571 L22.0994398,12.1428571 C22.1381304,12.1428571 22.1716123,12.1569939 22.1998862,12.1852679 C22.2281602,12.2135418 22.2422969,12.2470236 22.2422969,12.2857143 L22.2422969,12.2857143 Z" id="" fill="#FFFFFF"></path>
> +      <path d="M7.38935574,13.5714286 L7.38935574,13.8571429 C7.38935574,13.9360123 7.36517444,14.0033479 7.3168111,14.0591518 C7.26844776,14.1149556 7.20557637,14.1428571 7.12819503,14.1428571 L5.55676646,14.1428571 L6.21078431,14.7991071 C6.26733222,14.8526788 6.29560574,14.9196425 6.29560574,15 C6.29560574,15.0803575 6.26733222,15.1473212 6.21078431,15.2008929 L6.0433736,15.3705357 C5.9883138,15.4255955 5.92135018,15.453125 5.84248074,15.453125 C5.7650994,15.453125 5.69739175,15.4255955 5.63935574,15.3705357 L4.18623074,13.9151786 C4.13117094,13.8601188 4.10364146,13.7931552 4.10364146,13.7142857 C4.10364146,13.6369044 4.13117094,13.5691967 4.18623074,13.5111607 L5.63935574,12.0602679 C5.69590364,12.00372 5.7636113,11.9754464 5.84248074,11.9754464 C5.91986208,11.9754464 5.9868257,12.00372 6.0433736,12.0602679 L6.21078431,12.2254464 C6.26733222,12.2819943 6.29560574,12.349702 6.29560574,12.4285714 C6.29560574,12.5074409 6.26733222,12.5751485 6.21078431,12.6316964 L5.55676646,13.2857143 L7.12819503,13.2857143 C7.20557637,13.2857143 7.26844776,13.3136158 7.3168111,13.3694196 C7.36517444,13.4252235 7.38935574,13.4925591 7.38935574,13.5714286 L7.38935574,13.5714286 Z" id="-2" fill="#FFFFFF"></path>
> +      <path d="M12.3403361,13.5714286 L12.3403361,13.8571429 C12.3403361,13.9360123 12.3161548,14.0033479 12.2677915,14.0591518 C12.2194282,14.1149556 12.1565568,14.1428571 12.0791754,14.1428571 L10.5077468,14.1428571 L11.1617647,14.7991071 C11.2183126,14.8526788 11.2465861,14.9196425 11.2465861,15 C11.2465861,15.0803575 11.2183126,15.1473212 11.1617647,15.2008929 L10.994354,15.3705357 C10.9392942,15.4255955 10.8723306,15.453125 10.7934611,15.453125 C10.7160798,15.453125 10.6483721,15.4255955 10.5903361,15.3705357 L9.13721113,13.9151786 C9.08215134,13.8601188 9.05462185,13.7931552 9.05462185,13.7142857 C9.05462185,13.6369044 9.08215134,13.5691967 9.13721113,13.5111607 L10.5903361,12.0602679 C10.646884,12.00372 10.7145917,11.9754464 10.7934611,11.9754464 C10.8708425,11.9754464 10.9378061,12.00372 10.994354,12.0602679 L11.1617647,12.2254464 C11.2183126,12.2819943 11.2465861,12.349702 11.2465861,12.4285714 C11.2465861,12.5074409 11.2183126,12.5751485 11.1617647,12.6316964 L10.5077468,13.2857143 L12.0791754,13.2857143 C12.1565568,13.2857143 12.2194282,13.3136158 12.2677915,13.3694196 C12.3161548,13.4252235 12.3403361,13.4925591 12.3403361,13.5714286 L12.3403361,13.5714286 Z" fill="#FFFFFF" transform="translate(10.697479, 13.714286) scale(-1, 1) translate(-10.697479, -13.714286) "></path>
> +      <path d="M17.2913165,12.1428571 L17.2913165,13.1428571 C17.2913165,13.1815478 17.2771798,13.2150296 17.2489058,13.2433036 C17.2206319,13.2715775 17.1871501,13.2857143 17.1484594,13.2857143 L16.1484594,13.2857143 C16.0859591,13.2857143 16.0420607,13.2559527 16.016763,13.1964286 C15.9914652,13.1383926 16.0018818,13.0870538 16.048013,13.0424107 L16.3560487,12.734375 C16.1358095,12.5305049 15.8761395,12.4285714 15.5770308,12.4285714 C15.4222681,12.4285714 15.2745762,12.4587051 15.1339505,12.5189732 C14.9933248,12.5792414 14.8716742,12.6607138 14.7689951,12.7633929 C14.666316,12.8660719 14.5848436,12.9877225 14.5245755,13.1283482 C14.4643073,13.2689739 14.4341737,13.4166659 14.4341737,13.5714286 C14.4341737,13.7261912 14.4643073,13.8738832 14.5245755,14.0145089 C14.5848436,14.1551346 14.666316,14.2767852 14.7689951,14.3794643 C14.8716742,14.4821434 14.9933248,14.5636158 15.1339505,14.6238839 C15.2745762,14.6841521 15.4222681,14.7142857 15.5770308,14.7142857 C15.754115,14.7142857 15.9215241,14.6755956 16.079263,14.5982143 C16.2370018,14.5208329 16.370185,14.411459 16.4788165,14.2700893 C16.4892332,14.2552083 16.5063462,14.2462798 16.5301558,14.2433036 C16.5509892,14.2433036 16.5695903,14.2499999 16.5859594,14.2633929 L16.891763,14.5714286 C16.9051559,14.5833334 16.9122243,14.5985862 16.9129683,14.6171875 C16.9137124,14.6357888 16.9081321,14.6525297 16.8962272,14.6674107 C16.734024,14.8638403 16.5375974,15.0159965 16.3069415,15.1238839 C16.0762856,15.2317714 15.8329845,15.2857143 15.5770308,15.2857143 C15.3448868,15.2857143 15.1231628,15.2403278 14.9118522,15.1495536 C14.7005417,15.0587793 14.5182518,14.9367567 14.3649772,14.7834821 C14.2117027,14.6302076 14.0896801,14.4479177 13.9989058,14.2366071 C13.9081315,14.0252966 13.8627451,13.8035726 13.8627451,13.5714286 C13.8627451,13.3392846 13.9081315,13.1175606 13.9989058,12.90625 C14.0896801,12.6949394 14.2117027,12.5126496 14.3649772,12.359375 C14.5182518,12.2061004 14.7005417,12.0840778 14.9118522,11.9933036 C15.1231628,11.9025293 15.3448868,11.8571429 15.5770308,11.8571429 C15.7957819,11.8571429 16.0074613,11.8984371 16.2120755,11.9810268 C16.4166896,12.0636165 16.5986074,12.1800588 16.7578344,12.3303571 L17.048013,12.0424107 C17.0911679,11.9962795 17.1432507,11.985863 17.204263,12.0111607 C17.262299,12.0364585 17.2913165,12.0803568 17.2913165,12.1428571 L17.2913165,12.1428571 Z" id="-7" fill="#FFFFFF"></path>

and here

::: browser/components/loop/standalone/content/img/gum-others.svg
@@ +1,5 @@
> +<?xml version="1.0" encoding="UTF-8" standalone="no"?>
> +<svg width="51px" height="36px" viewBox="0 0 51 36" version="1.1" xmlns="http://www.w3.org/2000/svg">
> +  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
> +    <g transform="translate(0.500000, 0.000000)">
> +      <path d="M50,2.96428571 L50,33.3214286 C50,34.1026825 49.6372804,34.6514121 48.9118304,34.9676339 C48.6700137,35.0606403 48.4375011,35.1071429 48.2142857,35.1071429 C47.7120511,35.1071429 47.2935285,34.9304333 46.9587054,34.5770089 L35.7142857,23.3325893 L35.7142857,27.9642857 C35.7142857,30.1778384 34.9283933,32.0704907 33.3565848,33.6422991 C31.7847764,35.2141076 29.8921242,36 27.6785714,36 L8.03571429,36 C5.82216155,36 3.92950935,35.2141076 2.35770089,33.6422991 C0.785892439,32.0704907 0,30.1778384 0,27.9642857 L0,8.32142857 C0,6.10787584 0.785892439,4.21522363 2.35770089,2.64341518 C3.92950935,1.07160672 5.82216155,0.285714286 8.03571429,0.285714286 L27.6785714,0.285714286 C29.8921242,0.285714286 31.7847764,1.07160672 33.3565848,2.64341518 C34.9283933,4.21522363 35.7142857,6.10787584 35.7142857,8.32142857 L35.7142857,12.9252232 L46.9587054,1.70870536 C47.2935285,1.35528097 47.7120511,1.17857143 48.2142857,1.17857143 C48.4375011,1.17857143 48.6700137,1.22507394 48.9118304,1.31808036 C49.6372804,1.63430218 50,2.18303181 50,2.96428571 L50,2.96428571 Z" id="-2" fill="#00AF84"></path>

and here

@@ +2,5 @@
> +<svg width="51px" height="36px" viewBox="0 0 51 36" version="1.1" xmlns="http://www.w3.org/2000/svg">
> +  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
> +    <g transform="translate(0.500000, 0.000000)">
> +      <path d="M50,2.96428571 L50,33.3214286 C50,34.1026825 49.6372804,34.6514121 48.9118304,34.9676339 C48.6700137,35.0606403 48.4375011,35.1071429 48.2142857,35.1071429 C47.7120511,35.1071429 47.2935285,34.9304333 46.9587054,34.5770089 L35.7142857,23.3325893 L35.7142857,27.9642857 C35.7142857,30.1778384 34.9283933,32.0704907 33.3565848,33.6422991 C31.7847764,35.2141076 29.8921242,36 27.6785714,36 L8.03571429,36 C5.82216155,36 3.92950935,35.2141076 2.35770089,33.6422991 C0.785892439,32.0704907 0,30.1778384 0,27.9642857 L0,8.32142857 C0,6.10787584 0.785892439,4.21522363 2.35770089,2.64341518 C3.92950935,1.07160672 5.82216155,0.285714286 8.03571429,0.285714286 L27.6785714,0.285714286 C29.8921242,0.285714286 31.7847764,1.07160672 33.3565848,2.64341518 C34.9283933,4.21522363 35.7142857,6.10787584 35.7142857,8.32142857 L35.7142857,12.9252232 L46.9587054,1.70870536 C47.2935285,1.35528097 47.7120511,1.17857143 48.2142857,1.17857143 C48.4375011,1.17857143 48.6700137,1.22507394 48.9118304,1.31808036 C49.6372804,1.63430218 50,2.18303181 50,2.96428571 L50,2.96428571 Z" id="-2" fill="#00AF84"></path>
> +      <path d="M19.8214286,22.09375 L19.8214286,25.4419643 C19.8214286,25.5907746 19.7656256,25.7209816 19.6540179,25.8325893 C19.5424102,25.944197 19.4122031,26 19.2633929,26 L15.9151786,26 C15.7663683,26 15.6361613,25.944197 15.5245536,25.8325893 C15.4129459,25.7209816 15.3571429,25.5907746 15.3571429,25.4419643 L15.3571429,22.09375 C15.3571429,21.9449397 15.4129459,21.8147327 15.5245536,21.703125 C15.6361613,21.5915173 15.7663683,21.5357143 15.9151786,21.5357143 L19.2633929,21.5357143 C19.4122031,21.5357143 19.5424102,21.5915173 19.6540179,21.703125 C19.7656256,21.8147327 19.8214286,21.9449397 19.8214286,22.09375 L19.8214286,22.09375 Z M24.2299107,13.7232143 C24.2299107,14.2254489 24.1578318,14.6951243 24.0136719,15.1322545 C23.8695119,15.5693846 23.7067531,15.9251288 23.5253906,16.1994978 C23.3440281,16.4738667 23.0882643,16.7505566 22.7580915,17.0295759 C22.4279187,17.3085951 22.1605293,17.5108811 21.9559152,17.6364397 C21.7513011,17.7619984 21.4676357,17.9270823 21.1049107,18.1316964 C20.7235844,18.3456112 20.4050422,18.6478775 20.1492746,19.0385045 C19.8935069,19.4291314 19.765625,19.7406982 19.765625,19.9732143 C19.765625,20.1313252 19.709822,20.2824584 19.5982143,20.4266183 C19.4866066,20.5707783 19.3563996,20.6428571 19.2075893,20.6428571 L15.859375,20.6428571 C15.7198654,20.6428571 15.601284,20.5568275 15.5036272,20.3847656 C15.4059705,20.2127038 15.3571429,20.0383193 15.3571429,19.8616071 L15.3571429,19.233817 C15.3571429,18.4618637 15.6594092,17.7340994 16.2639509,17.0505022 C16.8684926,16.3669051 17.5334785,15.8623528 18.2589286,15.5368304 C18.8076664,15.285713 19.1982875,15.025299 19.4308036,14.7555804 C19.6633196,14.4858617 19.7795759,14.1324427 19.7795759,13.6953125 C19.7795759,13.3046855 19.5633392,12.960567 19.1308594,12.6629464 C18.6983795,12.3653259 18.1984775,12.2165179 17.6311384,12.2165179 C17.0265967,12.2165179 16.5243696,12.3513751 16.124442,12.6210938 C15.7989195,12.8536098 15.3013426,13.3883887 14.6316964,14.2254464 C14.5107881,14.3742567 14.3666303,14.4486607 14.1992188,14.4486607 C14.087611,14.4486607 13.9713548,14.4114587 13.8504464,14.3370536 L11.5625,12.593192 C11.4415917,12.5001855 11.3695128,12.3839293 11.3462612,12.2444196 C11.3230096,12.10491 11.3485859,11.974703 11.4229911,11.8537946 C12.9110938,9.37982394 15.0688103,8.14285714 17.8962054,8.14285714 C18.6402567,8.14285714 19.3889471,8.28701493 20.1422991,8.57533482 C20.8956511,8.86365472 21.5745878,9.24962556 22.1791295,9.73325893 C22.7836712,10.2168923 23.2765978,10.8097993 23.6579241,11.5119978 C24.0392504,12.2141962 24.2299107,12.951261 24.2299107,13.7232143 L24.2299107,13.7232143 Z" id="-3" fill="#FFFFFF"></path>

and here

::: browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
@@ +85,5 @@
>                                  {clientShortname: mozL10n.get("clientShortname2")});
> +          var browser = OTHelpers.env.name;
> +          var isChrome = browser == "Chrome";
> +          var isFirefox = browser == "Firefox";
> +          var isOpera = browser == "Opera";

Can you add this to /browser/components/loop/shared/js/utils.js? There's already an `isFirefox()` there.

Comment 43

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Mike de Boer [:mikedeboer] from comment #42)
> The IDs are showing up as out-of-range characters to me. Since they're not
> needed, can you remove them?

Weird, I thought I removed all of them before uploading the patch. Maybe I forgot to qref before uploading? Anyways, thanks for catching that.

> Can you add this to /browser/components/loop/shared/js/utils.js? There's
> already an `isFirefox()` there.

Sure thing.

Comment 44

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #43)
> (In reply to Mike de Boer [:mikedeboer] from comment #42)
> > The IDs are showing up as out-of-range characters to me. Since they're not
> > needed, can you remove them?
> 
> Weird, I thought I removed all of them before uploading the patch. Maybe I
> forgot to qref before uploading? Anyways, thanks for catching that.

It turns out my regex wasn't aggressive enough in finding these odd Unicode characters.

Comment 45

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #43)
> > Can you add this to /browser/components/loop/shared/js/utils.js? There's
> > already an `isFirefox()` there.
> 
> Sure thing.

Actually, it's not so simple. The Tokbox code does a fair amount of work to determine the browser that it is running on, and OTHelpers.env.name only returns the name: {"Firefox", "Chrome", "Opera", ...}

Pulling this out to a function within utils.js is unnecessary as that function would either do one of two things: (a) take a single parameter of the string that is returned by OTHelpers.env.name, and then do the comparison there, or (b) check navigator.userAgent and look for specific substrings. (a) will be confusing because other people may think that you can pass in the userAgent, and OTHelpers.env.name shows that just looking for substrings of the userAgent is too naive.

Comment 46

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch v2

(In reply to Dan Mosedale (:dmose) - needinfo? me for response from comment #39)
> I'd also suggest that it would be nice to scale the SVGs
> larger.

Done.
> 
> ::: browser/components/loop/content/shared/css/conversation.css
> @@ +882,5 @@
> >  }
> >  
> >  .standalone .room-conversation-wrapper .room-inner-info-area {
> >    position: absolute;
> > +  top: calc(50% - 140px);
> 
> Please add a comment describing where 140px number comes from and what it
> needs to be kept in sync with, if anything.

This replaced a calc(50% - 1em) which I believe was supposed to keep it vertically centered. Although, that wasn't really true since this element is not being moved relative to the video element (it's absolutely positioned to the page). The spec looks to request that this is centered within the video element. We need to move around some of the markup to make this info-area be a child of the .video-inner if we want to be able to pull off that design.

This change keeps it looking vertically centered within the video element, but it is still hacky and we'll need to do some mass refactoring to fix this correctly. Currently there is too much usage of position:absolute to place items throughout the page which isn't scaling well with respect to varying viewport sizes.

> 
> @@ +888,2 @@
> >    z-index: 1000;
> > +  width: 250px;
> 
> Same with this and the other non-relative-unit constants in this patch.

This came from the spec. I didn't put a comment here because I'm generally against "/* as specified by the spec */"-type comments, but if you feel that it is something that we should still do I can add it.

> @@ +892,5 @@
> > +}
> > +
> > +.standalone .prompt-media-message {
> > +  padding-top: 78px;
> > +  padding-top: calc(62px + 1rem);
> 
> There are two padding-tops here.

Added a comment in the file.

Comment 47

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8565738 [details] [diff] [review]
Patch v2

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

r=dmose with the following comments addressed.

::: browser/components/loop/content/shared/css/conversation.css
@@ +888,2 @@
>    z-index: 1000;
> +  width: 250px;

The top: and width: rules also want comments on what they are related to.

@@ +893,5 @@
> +
> +.standalone .prompt-media-message {
> +  padding-top: 136px; /* Fallback for browsers that don't support calc() */
> +  /* 124px is the height of the background-image, and 1rem puts one line of
> +     margin between the background-image and supporting text. */

Is this an intrinsic size of the SVG because we're not using a variable stroke width, or is this something that we're simply arbitrarily setting here?  Might be worth noting as well.

@@ +899,5 @@
> +  color: #000;
> +  background-color: #fff;
> +  background-image: url("../../img/gum-others.svg");
> +  background-position: top center;
> +  background-size: 202px 124px;

A comment on what the 202 relates to would be helpful also.

Comment 48

[Mark Banner (:standard8)]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #45)
> Actually, it's not so simple. The Tokbox code does a fair amount of work to
> determine the browser that it is running on, and OTHelpers.env.name only
> returns the name: {"Firefox", "Chrome", "Opera", ...}
> 
> Pulling this out to a function within utils.js is unnecessary as that
> function would either do one of two things: (a) take a single parameter of
> the string that is returned by OTHelpers.env.name, and then do the
> comparison there, or (b) check navigator.userAgent and look for specific
> substrings. (a) will be confusing because other people may think that you
> can pass in the userAgent, and OTHelpers.env.name shows that just looking
> for substrings of the userAgent is too naive.

My concern about this is it breaks some of the encapsulation that we already have for the sdk. Mostly the code parts of OT* are wrapped up in OTSdkDriver, and the only reason OT* gets referenced elsewhere is to pass it in via dependencies so that testing is easier (except for the older non-flux call code that needs to go away real soon).

The downside is that we'd need to either set this up in something like utils (which would still break the encapsulation), or have some way that activeRoomStore queries OTSdkDriver for the value, and saves it in its state. The view would then access the state. Admittedly that's a longer route, but it would preserve some of the encapsulation.

I guess I'd like us to preserve the sdk driver wrapper if possible - as this will make future work/maintenance easier - however, if it looks too complex, then maybe we'll just have to go with it for now.

Comment 49

[Jared Wein [:jaws] (please needinfo? me)]

Landed with the changes requested in comment #47 and removed the dependency on the SDK as requested by comment #48.

https://hg.mozilla.org/integration/fx-team/rev/c1d72213f4b2

Comment 50

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

https://hg.mozilla.org/mozilla-central/rev/c1d72213f4b2