Bug 804068 - Set social sharebutton image via .src, plus css tweaks to ensure it is sized correctly. r=jaws, a=gavin

browser/base/content/browser-social.js

@@ -617,7 +617,7 @@ let SocialShareButton = {
       shareButton.setAttribute("tooltiptext", this.promptMessages['shareTooltip']);
       imageURL = this.promptImages["share"]
     }
-    shareButton.style.backgroundImage = 'url("' + encodeURI(imageURL) + '")';
+    shareButton.src = imageURL;
   }
 };
 

browser/base/content/test/browser_social_shareButton.js

@@ -68,7 +68,7 @@ function testInitial(finishcb) {
     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() {
@@ -77,10 +77,10 @@ function testInitial(finishcb) {
       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");
 }
 
@@ -91,7 +91,7 @@ function testSecondClick(nextTest) {
     ok(true, "popup was shown after second click");
     executeSoon(nextTest);
   });
-  EventUtils.synthesizeMouseAtCenter(shareButton, {});
+  shareButton.click();
 }
 
 function testPopupOKButton() {
@@ -102,7 +102,7 @@ function testPopupOKButton() {
     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() {
@@ -113,7 +113,7 @@ function testPopupUndoButton() {
     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() {
@@ -225,7 +225,7 @@ function testStillSharedIn2Tabs() {
       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;

browser/themes/gnomestripe/browser.css

@@ -1379,8 +1379,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 /* social recommending panel */
 
 #share-button {
-  width: 16px;
-  height: 16px;
+  -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 #socialUserPortrait {

browser/themes/pinstripe/browser.css

@@ -1637,8 +1637,7 @@ window[tabsontop="false"] richlistitem[type~="action"][actiontype="switchtab"][s
 /* social recommending panel */
 
 #share-button {
-  width: 16px;
-  height: 16px;
+  -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 #socialUserPortrait {

browser/themes/winstripe/browser.css

@@ -1641,8 +1641,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 /* social recommending panel */
 
 #share-button {
-  width: 16px;
-  height: 16px;
+  -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 #socialUserPortrait {