Bug 1028029 - Improve accesskeys in Sync pane of in-content preferences. r=jaws
authorFischer.json <fischer.json@gmail.com>
Tue, 13 Sep 2016 15:27:43 +0800
changeset 315132 09bb9527ecc03b5cbab9ca2760e01ddb39ab4c7b
parent 315131 20d78ac1c18adf62558b9550ac7997f8a343fe71
child 315133 78860a7d085b98ccc066b0457dc1a466533dae96
push id32563
push userihsiao@mozilla.com
push dateMon, 26 Sep 2016 11:18:33 +0000
treeherderautoland@eb840c87b5fd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1028029
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1028029 - Improve accesskeys in Sync pane of in-content preferences. r=jaws MozReview-Commit-ID: JL4qlQavo0l
browser/components/preferences/in-content/sync.xul
browser/locales/en-US/chrome/browser/preferences/sync.dtd
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@@ -127,18 +127,17 @@
     <groupbox class="syncGroupBox">
       <grid>
         <columns>
           <column/>
           <column flex="1"/>
         </columns>
         <rows>
           <row align="center">
-            <label accesskey="&syncDeviceName.accesskey;"
-                   control="syncComputerName">
+            <label control="syncComputerName">
               &syncDeviceName.label;
             </label>
             <textbox id="syncComputerName"/>
           </row>
         </rows>
       </grid>
       <hbox>
         <label id="unlinkDevice" class="text-link">
@@ -180,19 +179,19 @@
             <label id="noFxaCaption">&signedOut.caption;</label>
             <description id="noFxaDescription" flex="1">&signedOut.description;</description>
             <hbox class="fxaAccountBox">
               <vbox>
                 <image class="fxaFirefoxLogo"/>
               </vbox>
               <vbox flex="1">
                 <label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
-                <hbox class="fxaAccountBoxButtons" align="center">
-                  <button id="noFxaSignUp" label="&signedOut.accountBox.create;"></button>
-                  <button id="noFxaSignIn" label="&signedOut.accountBox.signin;"></button>
+                <hbox class="fxaAccountBoxButtons">
+                  <button id="noFxaSignUp" label="&signedOut.accountBox.create;" accesskey="&signedOut.accountBox.create.accesskey;"></button>
+                  <button id="noFxaSignIn" label="&signedOut.accountBox.signin;" accesskey="&signedOut.accountBox.signin.accesskey;"></button>
                 </hbox>
               </vbox>
             </hbox>
           </vbox>
         </groupbox>
       </vbox>
       <vbox>
         <image class="fxaSyncIllustration"/>
@@ -225,21 +224,22 @@
                     role="button"
                     onclick="gSyncPane.openChangeProfileImage(event);" hidden="true"
                     onkeypress="gSyncPane.openChangeProfileImage(event);"
                     tooltiptext="&profilePicture.tooltip;"/>
               </vbox>
               <vbox flex="1" pack="center">
                 <label id="fxaDisplayName" hidden="true"/>
                 <label id="fxaEmailAddress1"/>
-                <hbox class="fxaAccountBoxButtons" align="center">
-                  <button id="fxaUnlinkButton" label="&disconnect.label;"/>
-                  <label id="verifiedManage" class="text-link"
+                <hbox class="fxaAccountBoxButtons">
+                  <button id="fxaUnlinkButton" label="&disconnect.label;" accesskey="&disconnect.label.accesskey;"/>
+                  <html:a id="verifiedManage" target="_blank"
+                         accesskey="&verifiedManage.label.accesskey;"
                          onkeypress="gSyncPane.openManageFirefoxAccount(event);"><!--
-                  -->&verifiedManage.label;</label>
+                  -->&verifiedManage.label;</html:a>
                 </hbox>
               </vbox>
             </hbox>
 
             <!-- logged in to an unverified account -->
             <hbox id="fxaLoginUnverified" class="fxaAccountBox">
               <vbox>
                 <image id="fxaProfileImage"/>
@@ -248,19 +248,19 @@
                 <hbox>
                   <vbox><image id="fxaLoginRejectedWarning"/></vbox>
                   <description flex="1">
                     &signedInUnverified.beforename.label;
                     <label id="fxaEmailAddress2"/>
                     &signedInUnverified.aftername.label;
                   </description>
                 </hbox>
-                <hbox class="fxaAccountBoxButtons" align="center">
-                  <button id="verifyFxaAccount">&verify.label;</button>
-                  <button id="unverifiedUnlinkFxaAccount">&forget.label;</button>
+                <hbox class="fxaAccountBoxButtons">
+                  <button id="verifyFxaAccount" accesskey="&verify.label.accesskey;">&verify.label;</button>
+                  <button id="unverifiedUnlinkFxaAccount" accesskey="&forget.label.accesskey;">&forget.label;</button>
                 </hbox>
               </vbox>
             </hbox>
 
             <!-- logged in locally but server rejected credentials -->
             <hbox id="fxaLoginRejected" class="fxaAccountBox">
               <vbox>
                 <image id="fxaProfileImage"/>
@@ -269,19 +269,19 @@
                 <hbox>
                   <vbox><image id="fxaLoginRejectedWarning"/></vbox>
                   <description flex="1">
                     &signedInLoginFailure.beforename.label;
                     <label id="fxaEmailAddress3"/>
                     &signedInLoginFailure.aftername.label;
                   </description>
                 </hbox>
-                <hbox class="fxaAccountBoxButtons" align="center">
-                  <button id="rejectReSignIn">&signIn.label;</button>
-                  <button id="rejectUnlinkFxaAccount">&forget.label;</button>
+                <hbox class="fxaAccountBoxButtons">
+                  <button id="rejectReSignIn" accessky="&signIn.label.accesskey;">&signIn.label;</button>
+                  <button id="rejectUnlinkFxaAccount" accesskey="&rejectUnlinkFxaAccount.forget.label.accesskey;">&forget.label;</button>
                 </hbox>
               </vbox>
             </hbox>
           </deck>
         </groupbox>
         <groupbox id="syncOptions">
           <caption><label>&signedIn.engines.label;</label></caption>
           <hbox id="fxaSyncEngines">
@@ -312,31 +312,33 @@
         </groupbox>
       </vbox>
       <vbox>
         <image class="fxaSyncIllustration"/>
       </vbox>
     </hbox>
     <groupbox>
       <caption>
-        <label accesskey="&syncDeviceName.accesskey;"
-               control="fxaSyncComputerName">
+        <label control="fxaSyncComputerName">
           &fxaSyncDeviceName.label;
         </label>
       </caption>
       <hbox id="fxaDeviceName">
         <textbox id="fxaSyncComputerName" disabled="true"/>
         <hbox>
           <button id="fxaChangeDeviceName"
-                  label="&changeSyncDeviceName.label;"/>
+                  label="&changeSyncDeviceName.label;"
+                  accesskey="&changeSyncDeviceName.label.accesskey;"/>
           <button id="fxaCancelChangeDeviceName"
                   label="&cancelChangeSyncDeviceName.label;"
+                  accesskey="&cancelChangeSyncDeviceName.label.accesskey;"
                   hidden="true"/>
           <button id="fxaSaveChangeDeviceName"
                   label="&saveChangeSyncDeviceName.label;"
+                  accesskey="&saveChangeSyncDeviceName.label.accesskey;"
                   hidden="true"/>
         </hbox>
       </hbox>
     </groupbox>
     <label class="fxaMobilePromo">
         &mobilePromo3.start;<!-- We put these comments to avoid inserting white spaces
         --><label class="androidLink text-link" id="fxaMobilePromo-android-hasFxaAccount"><!--
         -->&mobilePromo3.androidLink;</label><!--
--- a/browser/locales/en-US/chrome/browser/preferences/sync.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/sync.dtd
@@ -33,21 +33,23 @@
 <!ENTITY engine.passwords.accesskey "P">
 <!ENTITY engine.prefs.label         "Preferences">
 <!ENTITY engine.prefs.accesskey     "S">
 <!ENTITY engine.addons.label        "Add-ons">
 <!ENTITY engine.addons.accesskey    "A">
 
 <!-- Device Settings -->
 <!ENTITY syncDeviceName.label       "Device Name:">
-<!ENTITY syncDeviceName.accesskey   "c">
 <!ENTITY fxaSyncDeviceName.label       "Device Name">
 <!ENTITY changeSyncDeviceName.label "Change Device Name…">
+<!ENTITY changeSyncDeviceName.label.accesskey "h">
 <!ENTITY cancelChangeSyncDeviceName.label "Cancel">
+<!ENTITY cancelChangeSyncDeviceName.label.accesskey "n">
 <!ENTITY saveChangeSyncDeviceName.label "Save">
+<!ENTITY saveChangeSyncDeviceName.label.accesskey "v">
 <!ENTITY unlinkDevice.label           "Unlink This Device">
 
 <!-- Footer stuff -->
 <!ENTITY prefs.tosLink.label        "Terms of Service">
 <!ENTITY prefs.ppLink.label         "Privacy Policy">
 
 <!-- Firefox Accounts stuff -->
 <!ENTITY fxaPrivacyNotice.link.label "Privacy Notice">
@@ -66,33 +68,41 @@ signedInLoginFailure.aftername.label): t
 before and after the account email address. Localizers can use one of them, or
 both, to better adapt this sentence to their language.
 -->
 <!ENTITY signedInLoginFailure.beforename.label "Please sign in to reconnect">
 <!ENTITY signedInLoginFailure.aftername.label "">
 
 <!ENTITY notSignedIn.label           "You are not signed in.">
 <!ENTITY signIn.label                "Sign in">
+<!ENTITY signIn.label.accesskey            "g">
 <!ENTITY profilePicture.tooltip      "Change profile picture">
 <!ENTITY verifiedManage.label        "Manage Account">
+<!ENTITY verifiedManage.label.accesskey    "o">
 <!ENTITY disconnect.label            "Disconnect…">
+<!ENTITY disconnect.label.accesskey        "D">
 <!ENTITY verify.label                "Verify Email">
+<!ENTITY verify.label.accesskey            "V">
 <!ENTITY forget.label                "Forget this Email">
+<!ENTITY forget.label.accesskey            "F">
+<!ENTITY rejectUnlinkFxaAccount.forget.label.accesskey            "e">
 
 <!ENTITY welcome.description "Access your tabs, bookmarks, passwords and more wherever you use &brandShortName;.">
 <!ENTITY welcome.signIn.label "Sign In">
 <!ENTITY welcome.createAccount.label "Create Account">
 
 <!ENTITY welcome.useOldSync.label "Using an older version of Sync?">
 
 <!ENTITY signedOut.caption            "Take your Web with you">
 <!ENTITY signedOut.description        "Synchronize your bookmarks, history, tabs, passwords, add-ons, and preferences across all your devices.">
 <!ENTITY signedOut.accountBox.title   "Connect with a &syncBrand.fxAccount.label;">
 <!ENTITY signedOut.accountBox.create  "Create Account">
+<!ENTITY signedOut.accountBox.create.accesskey  "C">
 <!ENTITY signedOut.accountBox.signin  "Sign In">
+<!ENTITY signedOut.accountBox.signin.accesskey  "I">
 
 <!ENTITY signedIn.engines.label       "Sync across all devices">
 
 <!-- LOCALIZATION NOTE (mobilePromo3.*): the following strings will be used to
      create a single sentence with active links.
      The resulting sentence in English is: "Download Firefox for
      Android or iOS to sync with your mobile device." -->
 
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -492,16 +492,18 @@ description > html|a {
 
 #signedOutAccountBoxTitle {
   font-weight: bold;
 }
 
 .fxaAccountBoxButtons {
   margin-bottom: 0 !important;
   margin-top: 11px;
+  display: flex;
+  align-items: center;
 }
 
 .fxaAccountBoxButtons > * {
   -moz-box-flex: 1;
 }
 
 .fxaAccountBoxButtons > button {
   text-align: center;