Bug 804068 - set social sharebutton image via .src, plus css tweaks to ensure it is sized correctly. r=jaws
authorAlfred Kayser <alfredkayser@gmail.com>
Wed, 24 Oct 2012 13:46:05 +1100
changeset 111616 dd4d9137c1a5af3365433046a7c5c0ed62799e52
parent 111615 c229f8853f4d4b035cd4c22bf06e17266d3400e6
child 111617 b9102f7a79c0dc6038954876ce59f5967d662779
push id93
push usernmatsakis@mozilla.com
push dateWed, 31 Oct 2012 21:26:57 +0000
reviewersjaws
bugs804068
milestone19.0a1
Bug 804068 - set social sharebutton image via .src, plus css tweaks to ensure it is sized correctly. r=jaws
browser/base/content/browser-social.js
browser/base/content/test/browser_social_shareButton.js
browser/themes/gnomestripe/browser.css
browser/themes/pinstripe/browser.css
browser/themes/winstripe/browser.css
--- a/browser/base/content/browser-social.js
+++ b/browser/base/content/browser-social.js
@@ -607,17 +607,17 @@ let SocialShareButton = {
       shareButton.setAttribute("shared", "true");
       shareButton.setAttribute("tooltiptext", this.promptMessages['unshareTooltip']);
       imageURL = this.promptImages["unshare"]
     } else {
       shareButton.removeAttribute("shared");
       shareButton.setAttribute("tooltiptext", this.promptMessages['shareTooltip']);
       imageURL = this.promptImages["share"]
     }
-    shareButton.style.backgroundImage = 'url("' + encodeURI(imageURL) + '")';
+    shareButton.src = imageURL;
   }
 };
 
 var SocialMenu = {
   populate: function SocialMenu_populate() {
     // This menu is only accessible through keyboard navigation.
     let submenu = document.getElementById("menu_socialAmbientMenuPopup");
     let ambientMenuItems = submenu.getElementsByClassName("ambient-menuitem");
--- a/browser/base/content/test/browser_social_shareButton.js
+++ b/browser/base/content/test/browser_social_shareButton.js
@@ -63,62 +63,62 @@ function testInitial(finishcb) {
     let displayName = document.getElementById("socialUserDisplayName");
     is(displayName.label, profile.displayName, "display name is set");
     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");
     // Check the relative URL was resolved correctly (note this image has offsets of zero...)
-    is(shareButton.style.backgroundImage, 'url("https://example.com/browser/browser/base/content/test/social_share_image.png")', "check image url is correct");
+    is(shareButton.src, 'https://example.com/browser/browser/base/content/test/social_share_image.png', "check image url is correct");
 
     // Test clicking the share button
     shareButton.addEventListener("click", function listener() {
       shareButton.removeEventListener("click", listener);
       is(shareButton.hasAttribute("shared"), true, "Share button should have 'shared' attribute after share button is clicked");
       is(shareButton.getAttribute("tooltiptext"), "Unshare this page", "check tooltip text is correct");
       is(shareStatusLabel.getAttribute("value"), "This page has been shared", "check status label text is correct");
       // Check the URL and offsets were applied correctly
-      is(shareButton.style.backgroundImage, 'url("https://example.com/browser/browser/base/content/test/social_share_image.png")', "check image url is correct");
+      is(shareButton.src, 'https://example.com/browser/browser/base/content/test/social_share_image.png', "check image url is correct");
       executeSoon(testSecondClick.bind(window, testPopupOKButton));
     });
-    EventUtils.synthesizeMouseAtCenter(shareButton, {});
+    shareButton.click();
   }, "provider didn't provide user-recommend-prompt response");
 }
 
 function testSecondClick(nextTest) {
   let {shareButton, unsharePopup} = SocialShareButton;
   unsharePopup.addEventListener("popupshown", function listener() {
     unsharePopup.removeEventListener("popupshown", listener);
     ok(true, "popup was shown after second click");
     executeSoon(nextTest);
   });
-  EventUtils.synthesizeMouseAtCenter(shareButton, {});
+  shareButton.click();
 }
 
 function testPopupOKButton() {
   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));
   });
-  EventUtils.synthesizeMouseAtCenter(okButton, {});
+  okButton.click();
 }
 
 function testPopupUndoButton() {
   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);
   });
-  EventUtils.synthesizeMouseAtCenter(undoButton, {});
+  undoButton.click();
 }
 
 function testShortcut() {
   let keyTarget = window;
   keyTarget.addEventListener("keyup", function listener() {
     keyTarget.removeEventListener("keyup", listener);
     executeSoon(checkShortcutWorked.bind(window, keyTarget));
   });
@@ -220,17 +220,17 @@ function testStillSharedIn2Tabs() {
   tab1b.addEventListener("load", function tabLoad(event) {
     tab1b.removeEventListener("load", tabLoad, true);
     let tab2 = gBrowser.selectedTab = gBrowser.addTab(toShare);
     let tab2b = gBrowser.getBrowserForTab(tab2);
     tab2b.addEventListener("load", function tabLoad(event) {
       tab2b.removeEventListener("load", tabLoad, true);
       // should start without either page being shared.
       is(shareButton.hasAttribute("shared"), false, "Share button should not have 'shared' before we've done anything");
-      EventUtils.synthesizeMouseAtCenter(shareButton, {});
+      shareButton.click();
       is(shareButton.hasAttribute("shared"), true, "Share button should reflect the share");
       // and switching to the first tab (with the same URL) should still reflect shared.
       gBrowser.selectedTab = tab1;
       is(shareButton.hasAttribute("shared"), true, "Share button should reflect the share");
       // but switching back the initial one should reflect not shared.
       gBrowser.selectedTab = initialTab;
       is(shareButton.hasAttribute("shared"), false, "Initial tab should not reflect shared");
 
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -1374,18 +1374,17 @@ richlistitem[type~="action"][actiontype=
 /* Popup blocker button */
 #page-report-button {
   list-style-image: url("chrome://browser/skin/Info.png");
 }
 
 /* social recommending panel */
 
 #share-button {
-  width: 16px;
-  height: 16px;
+  -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 #socialUserPortrait {
   width: 48px;
   height: 48px;
 }
 
 #socialUserDisplayName,
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -1632,18 +1632,17 @@ window[tabsontop="false"] richlistitem[t
   #page-report-button[open="true"] {
     -moz-image-region: rect(0, 64px, 32px, 32px);
   }
 }
 
 /* social recommending panel */
 
 #share-button {
-  width: 16px;
-  height: 16px;
+  -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 #socialUserPortrait {
   width: 48px;
   height: 48px;
 }
 
 #socialUserDisplayName,
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -1636,18 +1636,17 @@ richlistitem[type~="action"][actiontype=
 #page-report-button:hover:active,
 #page-report-button[open="true"] {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
 
 /* social recommending panel */
 
 #share-button {
-  width: 16px;
-  height: 16px;
+  -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 #socialUserPortrait {
   width: 48px;
   height: 48px;
 }
 
 #socialUserDisplayName,