Bug 791901 - social provider should provide more strings for the share popup. r=jaws

browser/base/content/browser-social.js

@@ -325,7 +325,7 @@ let SocialShareButton = {
   },
 
   updateProfileInfo: function SSB_updateProfileInfo() {
-    let profileRow = document.getElementById("editSharePopupHeader");
+    let profileRow = document.getElementById("unsharePopupHeader");
     let profile = Social.provider.profile;
     this.promptImages = null;
     this.promptMessages = null;
@@ -384,7 +384,11 @@ let SocialShareButton = {
       }
       promptImages[sub] = url;
     }
-    for (let sub of ["shareTooltip", "unshareTooltip", "sharedLabel", "unsharedLabel"]) {
+    for (let sub of ["shareTooltip", "unshareTooltip",
+                     "sharedLabel", "unsharedLabel", "unshareLabel",
+                     "portraitLabel", 
+                     "unshareConfirmLabel", "unshareConfirmAccessKey",
+                     "unshareCancelLabel", "unshareCancelAccessKey"]) {
       if (typeof data.messages[sub] != "string" || data.messages[sub].length == 0) {
         return reportError('messages["' + sub + '"] is not a valid string');
       }
@@ -398,12 +402,12 @@ let SocialShareButton = {
   get shareButton() {
     return document.getElementById("share-button");
   },
-  get sharePopup() {
-    return document.getElementById("editSharePopup");
+  get unsharePopup() {
+    return document.getElementById("unsharePopup");
   },
 
-  dismissSharePopup: function SSB_dismissSharePopup() {
-    this.sharePopup.hidePopup();
+  dismissUnsharePopup: function SSB_dismissUnsharePopup() {
+    this.unsharePopup.hidePopup();
   },
 
   updateButtonHiddenState: function SSB_updateButtonHiddenState() {
@@ -424,27 +428,42 @@ let SocialShareButton = {
   },
 
   panelShown: function SSB_panelShown(aEvent) {
-    let sharePopupOkButton = document.getElementById("editSharePopupOkButton");
-    if (sharePopupOkButton)
-      sharePopupOkButton.focus();
+    function updateElement(id, attrs) {
+      let el = document.getElementById(id);
+      Object.keys(attrs).forEach(function(attr) {
+        el.setAttribute(attr, attrs[attr]);
+      });
+    }
+    let continueSharingButton = document.getElementById("unsharePopupContinueSharingButton");
+    continueSharingButton.focus();
+    updateElement("unsharePopupContinueSharingButton",
+                  {label: this.promptMessages.unshareCancelLabel,
+                   accesskey: this.promptMessages.unshareCancelAccessKey});
+    updateElement("unsharePopupStopSharingButton",
+                  {label: this.promptMessages.unshareConfirmLabel,
+                  accesskey: this.promptMessages.unshareConfirmAccessKey});
+    updateElement("socialUserPortrait",
+                  {"aria-label": this.promptMessages.portraitLabel});
+    updateElement("socialUserRecommendedText",
+                  {value: this.promptMessages.unshareLabel});
   },
 
   sharePage: function SSB_sharePage() {
-    this.sharePopup.hidden = false;
+    this.unsharePopup.hidden = false;
 
     let uri = gBrowser.currentURI;
     if (!Social.isPageShared(uri)) {
       Social.sharePage(uri);
       this.updateShareState();
     } else {
-      this.sharePopup.openPopup(this.shareButton, "bottomcenter topright");
+      this.unsharePopup.openPopup(this.shareButton, "bottomcenter topright");
     }
   },
 
   unsharePage: function SSB_unsharePage() {
     Social.unsharePage(gBrowser.currentURI);
     this.updateShareState();
-    this.dismissSharePopup();
+    this.dismissUnsharePopup();
   },
 
   updateShareState: function SSB_updateShareState() {

browser/base/content/browser.xul

@@ -216,7 +216,7 @@
       </hbox>
     </panel>
 
-    <panel id="editSharePopup"
+    <panel id="unsharePopup"
            type="arrow"
            orient="vertical"
            ignorekeys="true"
@@ -224,45 +224,39 @@
            onpopupshown="SocialShareButton.panelShown(event);"
            consumeoutsideclicks="true"
            level="top">
-      <row id="editSharePopupHeader" align="center">
+      <!-- Note that 'label', 'accesskey', 'value' and 'aria-label' attributes
+           for many of these elements are supplied by the provider and filled
+           in at runtime
+      -->
+      <row id="unsharePopupHeader" align="center">
         <vbox align="center">
-          <image id="socialUserPortrait" onclick="SocialUI.showProfile();"
-                 aria-label="&social.sharePopup.portrait.arialabel;"/>
+          <image id="socialUserPortrait" onclick="SocialUI.showProfile();"/>
         </vbox>
-        <vbox id="editSharePopupText">
+        <vbox id="unsharePopupText">
           <button id="socialUserDisplayName" pack="start"
                   oncommand="SocialUI.showProfile();"/>
           <spacer flex="1"/>
-          <label id="socialUserRecommendedText"
-                 value="&social.sharePopup.shared.label;"/>
+          <label id="socialUserRecommendedText"/>
         </vbox>
       </row>
-      <hbox id="editSharePopupBottomButtons" pack="end">
+      <hbox id="unsharePopupBottomButtons" pack="end">
 #ifdef XP_UNIX
-        <button id="editSharePopupUndoButton"
-                class="editSharePopupBottomButton"
-                label="&social.sharePopup.undo.label;"
-                accesskey="&social.sharePopup.undo.accesskey;"
+        <button id="unsharePopupStopSharingButton"
+                class="unsharePopupBottomButton"
                 command="Social:UnsharePage"/>
-        <button id="editSharePopupOkButton"
-                class="editSharePopupBottomButton"
+        <button id="unsharePopupContinueSharingButton"
+                class="unsharePopupBottomButton"
                 default="true"
                 autofocus="autofocus"
-                label="&social.ok.label;"
-                accesskey="&social.ok.accesskey;"
-                oncommand="SocialShareButton.dismissSharePopup();"/>
+                oncommand="SocialShareButton.dismissUnsharePopup();"/>
 #else
-        <button id="editSharePopupOkButton"
-                class="editSharePopupBottomButton"
+        <button id="unsharePopupContinueSharingButton"
+                class="unsharePopupBottomButton"
                 default="true"
                 autofocus="autofocus"
-                label="&social.ok.label;"
-                accesskey="&social.ok.accesskey;"
-                oncommand="SocialShareButton.dismissSharePopup();"/>
-        <button id="editSharePopupUndoButton"
-                class="editSharePopupBottomButton"
-                label="&social.sharePopup.undo.label;"
-                accesskey="&social.sharePopup.undo.accesskey;"
+                oncommand="SocialShareButton.dismissUnsharePopup();"/>
+        <button id="unsharePopupStopSharingButton"
+                class="unsharePopupBottomButton"
                 command="Social:UnsharePage"/>
 #endif
       </hbox>

browser/base/content/test/browser_social_shareButton.js

@@ -44,12 +44,12 @@ function testInitial(finishcb) {
   ok(port, "Social provider has a port to its FrameWorker");
   port.close();
 
-  let {shareButton, sharePopup} = SocialShareButton;
+  let {shareButton, unsharePopup} = SocialShareButton;
   ok(shareButton, "share button exists");
-  ok(sharePopup, "share popup exists");
+  ok(unsharePopup, "share popup exists");
 
-  let okButton = document.getElementById("editSharePopupOkButton");
-  let undoButton = document.getElementById("editSharePopupUndoButton");
+  let okButton = document.getElementById("unsharePopupContinueSharingButton");
+  let undoButton = document.getElementById("unsharePopupStopSharingButton");
   let shareStatusLabel = document.getElementById("share-button-status");
 
   // ensure the worker initialization and handshakes are all done and we
@@ -62,8 +62,8 @@ function testInitial(finishcb) {
     is(profile.portrait, portrait, "portrait is set");
     let displayName = document.getElementById("socialUserDisplayName");
     is(displayName.label, profile.displayName, "display name is set");
-    ok(!document.getElementById("editSharePopupHeader").hidden, "user profile is visible");
-  
+    ok(!document.getElementById("unsharePopupHeader").hidden, "user profile is visible");
+
     // Check the strings from our worker actually ended up on the button.
     is(shareButton.getAttribute("tooltiptext"), "Share this page", "check tooltip text is correct");
     is(shareStatusLabel.getAttribute("value"), "", "check status label text is blank");
@@ -85,9 +85,9 @@ function testInitial(finishcb) {
 }
 
 function testSecondClick(nextTest) {
-  let {shareButton, sharePopup} = SocialShareButton;
-  sharePopup.addEventListener("popupshown", function listener() {
-    sharePopup.removeEventListener("popupshown", listener);
+  let {shareButton, unsharePopup} = SocialShareButton;
+  unsharePopup.addEventListener("popupshown", function listener() {
+    unsharePopup.removeEventListener("popupshown", listener);
     ok(true, "popup was shown after second click");
     executeSoon(nextTest);
   });
@@ -95,10 +95,10 @@ function testSecondClick(nextTest) {
 }
 
 function testPopupOKButton() {
-  let {shareButton, sharePopup} = SocialShareButton;
-  let okButton = document.getElementById("editSharePopupOkButton");
-  sharePopup.addEventListener("popuphidden", function listener() {
-    sharePopup.removeEventListener("popuphidden", listener);
+  let {shareButton, unsharePopup} = SocialShareButton;
+  let okButton = document.getElementById("unsharePopupContinueSharingButton");
+  unsharePopup.addEventListener("popuphidden", function listener() {
+    unsharePopup.removeEventListener("popuphidden", listener);
     is(shareButton.hasAttribute("shared"), true, "Share button should still have 'shared' attribute after OK button is clicked");
     executeSoon(testSecondClick.bind(window, testPopupUndoButton));
   });
@@ -106,10 +106,10 @@ function testPopupOKButton() {
 }
 
 function testPopupUndoButton() {
-  let {shareButton, sharePopup} = SocialShareButton;
-  let undoButton = document.getElementById("editSharePopupUndoButton");
-  sharePopup.addEventListener("popuphidden", function listener() {
-    sharePopup.removeEventListener("popuphidden", listener);
+  let {shareButton, unsharePopup} = SocialShareButton;
+  let undoButton = document.getElementById("unsharePopupStopSharingButton");
+  unsharePopup.addEventListener("popuphidden", function listener() {
+    unsharePopup.removeEventListener("popuphidden", listener);
     is(shareButton.hasAttribute("shared"), false, "Share button should not have 'shared' attribute after Undo button is clicked");
     executeSoon(testShortcut);
   });
@@ -126,12 +126,12 @@ function testShortcut() {
 }
 
 function checkShortcutWorked(keyTarget) {
-  let {sharePopup, shareButton} = SocialShareButton;
+  let {unsharePopup, shareButton} = SocialShareButton;
   is(shareButton.hasAttribute("shared"), true, "Share button should be in the 'shared' state after keyboard shortcut is used");
 
   // Test a second invocation of the shortcut
-  sharePopup.addEventListener("popupshown", function listener() {
-    sharePopup.removeEventListener("popupshown", listener);
+  unsharePopup.addEventListener("popupshown", function listener() {
+    unsharePopup.removeEventListener("popupshown", listener);
     ok(true, "popup was shown after second use of keyboard shortcut");
     executeSoon(checkOKButton);
   });
@@ -139,10 +139,23 @@ function checkShortcutWorked(keyTarget) {
 }
 
 function checkOKButton() {
-  let okButton = document.getElementById("editSharePopupOkButton");
-  let undoButton = document.getElementById("editSharePopupUndoButton");
+  let okButton = document.getElementById("unsharePopupContinueSharingButton");
+  let undoButton = document.getElementById("unsharePopupStopSharingButton");
   is(document.activeElement, okButton, "ok button should be focused by default");
 
+  // the undo button text, label text, access keys, etc  should be as
+  // specified by the provider.
+  function isEltAttr(eltid, attr, expected) {
+    is(document.getElementById(eltid).getAttribute(attr), expected,
+       "element '" + eltid + "' has correct value for attribute '" + attr + "'");
+  }
+  isEltAttr("socialUserRecommendedText", "value", "You have already shared this page");
+  isEltAttr("unsharePopupContinueSharingButton", "label", "Got it!");
+  isEltAttr("unsharePopupContinueSharingButton", "accesskey", "G");
+  isEltAttr("unsharePopupStopSharingButton", "label", "Unshare it!");
+  isEltAttr("unsharePopupStopSharingButton", "accesskey", "U");
+  isEltAttr("socialUserPortrait", "aria-label", "Your pretty face");
+
   // This rest of particular test doesn't really apply on Mac, since buttons
   // aren't focusable by default.
   if (navigator.platform.contains("Mac")) {
@@ -183,10 +196,10 @@ function checkNextInTabOrder(element, next) {
 }
 
 function testCloseBySpace() {
-  let sharePopup = SocialShareButton.sharePopup;
-  is(document.activeElement.id, "editSharePopupOkButton", "testCloseBySpace, the ok button should be focused");
-  sharePopup.addEventListener("popuphidden", function listener() {
-    sharePopup.removeEventListener("popuphidden", listener);
+  let unsharePopup = SocialShareButton.unsharePopup;
+  is(document.activeElement.id, "unsharePopupContinueSharingButton", "testCloseBySpace, the ok button should be focused");
+  unsharePopup.addEventListener("popuphidden", function listener() {
+    unsharePopup.removeEventListener("popuphidden", listener);
     ok(true, "space closed the share popup");
     executeSoon(testStillSharedIn2Tabs);
   });

browser/base/content/test/social_worker.js

@@ -108,6 +108,12 @@ onconnect = function(e) {
               unshareTooltip: "Unshare this page",
               sharedLabel: "This page has been shared",
               unsharedLabel: "This page is no longer shared",
+              unshareLabel: "You have already shared this page",
+              portraitLabel: "Your pretty face",
+              unshareConfirmLabel: "Unshare it!",
+              unshareConfirmAccessKey: "U",
+              unshareCancelLabel: "Got it!",
+              unshareCancelAccessKey: "G"
             }
           }
         });

browser/locales/en-US/chrome/browser/browser.dtd

@@ -648,19 +648,9 @@ toolbar button -->
 <!ENTITY socialToolbar.title        "Social Toolbar Button">
 <!ENTITY social.notLoggedIn.label   "Not logged in">
 
-<!-- LOCALIZATION NOTE (social.ok.label, social.ok.accesskey): this string is
-     used for the "OK" button for two different social panels. One appears when
-     the feature is activated (social.activated.* below), and the other when
-     the user clicks the "Share" button a second time (social.sharePopup.*
-     below). -->
 <!ENTITY social.ok.label       "OK">
 <!ENTITY social.ok.accesskey   "O">
 
-<!ENTITY social.sharePopup.undo.label     "Unshare">
-<!ENTITY social.sharePopup.undo.accesskey "U">
-<!ENTITY social.sharePopup.shared.label   "You shared this page.">
-<!ENTITY social.sharePopup.portrait.arialabel "User profile picture">
-
 <!ENTITY social.toggleSidebar.label "Show sidebar">
 <!ENTITY social.toggleSidebar.accesskey "s">
 

browser/themes/gnomestripe/browser.css

@@ -1408,11 +1408,11 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   text-decoration: underline;
 }
 
-#editSharePopupText {
+#unsharePopupText {
   height: 48px;
 }
 
-#editSharePopupBottomButtons {
+#unsharePopupBottomButtons {
   margin-top: 1em;
 }
 

browser/themes/pinstripe/browser.css

@@ -1280,11 +1280,11 @@ window[tabsontop="false"] richlistitem[type~="action"][actiontype="switchtab"][s
   text-decoration: underline;
 }
 
-#editSharePopupText {
+#unsharePopupText {
   height: 48px;
 }
 
-#editSharePopupBottomButtons {
+#unsharePopupBottomButtons {
   margin-top: 1em;
 }
 

browser/themes/winstripe/browser.css

@@ -1671,11 +1671,11 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   text-decoration: underline;
 }
 
-#editSharePopupText {
+#unsharePopupText {
   height: 48px;
 }
 
-#editSharePopupBottomButtons {
+#unsharePopupBottomButtons {
   margin-top: 1em;
 }