mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 19:25:43 +00:00
cdb092fe66
This is a Fennec version of about:accounts, cribbed largely from Desktop's implementation. This implementation serves two purposes: One, it allows all fxa-content-server pref handling to remain in Gecko. Java-side consumers redirect to about:accounts?action=... and have pref munging and parameter addition (like context=fx_fennec_v1, etc) handled by about:accounts itself. Two, it handles network connectivity display and error handling. When a request is started, we display an animated spinner. We transition smoothly from the spinner to the iframe display if we can, and if not we hide any network error and offer to retry. This is more important in Fennec than it is on Desktop. This approach agrees with Firefox for iOS. Some additional notes: The spinner to iframe transition uses the WebChannel listener to send LOADED messages to the appropriate XUL <browser> element. It's worth remembering that Fennec's Gecko is single process, so the <browser> in question is in the same process. None-the-less, we are close to e10s safe. There are four actions: signup/signin/force_reauth, and manage. The first three try to produce a LOGIN message. The last uses the fxa-content-server to manage the Account settings. *This is not how this is arranged on Desktop: Desktop redirects to a new tab, not wrapped in about:accounts.* --HG-- extra : commitid : F2waTwe355B extra : rebase_source : f63c96f676d1300c774d091968ec8d88bb7a86dc
92 lines
1.4 KiB
CSS
92 lines
1.4 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
div {
|
|
transition: opacity 0.4s ease-in;
|
|
}
|
|
|
|
#spinner {
|
|
transition: opacity 0.2s ease-in;
|
|
}
|
|
|
|
#remote {
|
|
border: 0;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease-in;
|
|
}
|
|
|
|
.text {
|
|
color: #363B40;
|
|
font-size: 25px;
|
|
font-weight: lighter;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hint {
|
|
color: #777777;
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
a {
|
|
color: #0096DD; /* link_blue */
|
|
text-decoration: none;
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
a:active {
|
|
color: #0082C6; /* link_blue_pressed */
|
|
}
|
|
|
|
.toplevel {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
.container {
|
|
height: 100%;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
.text-container {
|
|
padding-top: 60px;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
.flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.button-row {
|
|
flex: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.button {
|
|
flex: 1;
|
|
height: 60px;
|
|
background-color: #E66000; /*matched to action_orange in java codebase*/
|
|
color: #FFFFFF;
|
|
font-size: 20px;
|
|
border-radius: 4px;
|
|
border-width: 0px;
|
|
}
|