Bug 582615 - Sharing front-end [r=mfinkle]

mobile/chrome/content/browser-ui.js

@@ -1177,6 +1177,16 @@ var PageActions = {
     }
   },
 
+  updateShare: function updateShare() {
+    this.removeItems("share");
+    let label = Elements.browserBundle.getString("pageactions.share.page");
+    let node = this.appendItem("share", label, "");
+    node.onclick = function(event) {
+      let browser = Browser.selectedBrowser;
+      SharingUI.show(browser.currentURI.spec, browser.contentTitle)
+    }
+  },
+
   appendItem: function appendItem(aType, aTitle, aDesc) {
     let container = document.getElementById("pageactions-container");
     let item = document.createElement("pageaction");
@@ -2111,26 +2121,103 @@ var ContextHelper = {
 };
 
 var ContextCommands = {
-  openInNewTab: function cc_openInNewTab(aEvent) {
+  openInNewTab: function cc_openInNewTab() {
     Browser.addTab(ContextHelper.popupState.linkURL, false, Browser.selectedTab);
   },
 
-  saveImage: function cc_saveImage(aEvent) {
+  saveImage: function cc_saveImage() {
     let browser = ContextHelper.popupState.target;
     saveImageURL(ContextHelper.popupState.mediaURL, null, "SaveImageTitle", false, false, browser.documentURI);
   },
 
-  editBookmark: function cc_editBookmark(aEvent) {
+  shareLink: function cc_shareLink() {
+    let state = ContextHelper.popupState;
+    SharingUI.show(state.linkURL, state.linkTitle);
+  },
+
+  shareMedia: function cc_shareMedia() {
+    let state = ContextHelper.popupState;
+    SharingUI.show(state.mediaURL, null);
+  },
+
+  editBookmark: function cc_editBookmark() {
     let target = ContextHelper.popupState.target;
     target.startEditing();
   },
 
-  removeBookmark: function cc_removeBookmark(aEvent) {
+  removeBookmark: function cc_removeBookmark() {
     let target = ContextHelper.popupState.target;
     target.remove();
   }
 }
 
+
+var SharingUI = {
+  _dialog: null,
+
+  show: function show(aURL, aTitle) {
+    this._dialog = importDialog(window, "chrome://browser/content/share.xul", null);
+    document.getElementById("share-title").value = aTitle || aURL;
+
+    BrowserUI.pushPopup(this, this._dialog);
+
+    let bbox = document.getElementById("share-buttons-box");
+    this._handlers.forEach(function(handler) {
+      let button = document.createElement("button");
+      button.setAttribute("label", handler.name);
+      button.addEventListener("command", function() {
+        handler.callback(aURL, aTitle);
+        SharingUI.hide();
+      }, false);
+      bbox.appendChild(button);
+    });
+    this._dialog.waitForClose();
+    BrowserUI.popPopup();
+  },
+
+  hide: function hide() {
+    this._dialog.close();
+    this._dialog = null;
+  },
+
+  _handlers: [
+    {
+      name: "Email",
+      callback: function callback(aURL, aTitle) {
+        let url = "mailto:?subject=" + encodeURIComponent(aTitle || "") +
+                  "&body=" + encodeURIComponent(aURL);
+        let uri = Services.io.newURI(url, null, null);
+        let extProtocolSvc = Cc["@mozilla.org/uriloader/external-protocol-service;1"]
+                             .getService(Ci.nsIExternalProtocolService);
+        extProtocolSvc.loadUrl(uri);
+      }
+    },
+    {
+      name: "Twitter",
+      callback: function callback(aURL, aTitle) {
+        let url = "http://twitter.com/home?status=" + encodeURIComponent((aTitle ? aTitle+": " : "")+aURL);
+        Browser.addTab(url, true, Browser.selectedTab);
+      }
+    },
+    {
+      name: "Google Reader",
+      callback: function callback(aURL, aTitle) {
+        let url = "http://www.google.com/reader/link?url=" + encodeURIComponent(aURL) +
+                  "&title=" + encodeURIComponent(aTitle);
+        Browser.addTab(url, true, Browser.selectedTab);
+      }
+    },
+    {
+      name: "Facebook",
+      callback: function callback(aURL, aTitle) {
+        let url = "http://www.facebook.com/share.php?u=" + encodeURIComponent(aURL);
+        Browser.addTab(url, true, Browser.selectedTab);
+      }
+    }
+  ]
+};
+
+
 function removeBookmarksForURI(aURI) {
   //XXX blargle xpconnect! might not matter, but a method on
   // nsINavBookmarksService that takes an array of items to

mobile/chrome/content/browser.js

@@ -1833,16 +1833,12 @@ IdentityHandler.prototype = {
     this._identityPopupContentSupp.textContent = supplemental;
     this._identityPopupContentVerif.textContent = verifier;
 
-    // Update the find in page in-site menu
+    // Update the site menu
     FindHelperUI.updateFindInPage();
-
-    // Update the search engines results
     BrowserSearch.updatePageSearchEngines();
-
-    // Update the per site permissions results
     PageActions.updatePagePermissions();
-
     PageActions.updatePageSaveAs();
+    PageActions.updateShare();
   },
 
   show: function ih_show() {

mobile/chrome/content/browser.xul

@@ -515,16 +515,22 @@
           <label id="context-hint" crop="center" flex="1"/>
         </hbox>
         <richlistbox id="context-commands" onclick="ContextHelper.hide();">
-          <richlistitem id="context-openinnewtab" type="link-saveable" onclick="ContextCommands.openInNewTab(event);">
+          <richlistitem id="context-openinnewtab" type="link-saveable" onclick="ContextCommands.openInNewTab();">
             <label value="&contextOpenInNewTab.label;"/>
           </richlistitem>
-          <richlistitem id="context-saveimage" type="image-loaded" onclick="ContextCommands.saveImage(event);">
+          <richlistitem id="context-saveimage" type="image-loaded" onclick="ContextCommands.saveImage();">
             <label value="&contextSaveImage.label;"/>
           </richlistitem>
-          <richlistitem id="context-editbookmark" type="edit-bookmark" onclick="ContextCommands.editBookmark(event);">
+          <richlistitem id="context-share-link" type="link" onclick="ContextCommands.shareLink();">
+            <label value="&contextShareLink.label;"/>
+          </richlistitem>
+          <richlistitem id="context-share-image" type="image" onclick="ContextCommands.shareMedia();">
+            <label value="&contextShareImage.label;"/>
+          </richlistitem>
+          <richlistitem id="context-editbookmark" type="edit-bookmark" onclick="ContextCommands.editBookmark();">
             <label value="&contextEditBookmark.label;"/>
           </richlistitem>
-          <richlistitem id="context-removebookmark" type="edit-bookmark" onclick="ContextCommands.removeBookmark(event);">
+          <richlistitem id="context-removebookmark" type="edit-bookmark" onclick="ContextCommands.removeBookmark();">
             <label value="&contextRemoveBookmark.label;"/>
           </richlistitem>
         </richlistbox>

mobile/chrome/content/content.js

@@ -756,6 +756,7 @@ var ContextHandler = {
       types: [],
       label: "",
       linkURL: "",
+      linkTitle: "",
       linkProtocol: null,
       mediaURL: ""
     };
@@ -784,6 +785,7 @@ var ContextHandler = {
           // Target is a link or a descendant of a link.
           state.types.push("link");
           state.label = state.linkURL = this._getLinkURL(elem);
+          state.linkTitle = popupNode.textContent || popupNode.title;
           state.linkProtocol = this._getProtocol(this._getURI(state.linkURL));
           break;
         }

mobile/chrome/content/prompt/alert.xul

@@ -19,7 +19,7 @@
   </commandset>
 
   <vbox class="prompt-header" flex="1">
-    <label id="prompt-alert-title" class="prompt-title" crop="center"/>
+    <label id="prompt-alert-title" class="prompt-title" crop="center" flex="1"/>
 
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-alert-message"/>

mobile/chrome/content/prompt/confirm.xul

@@ -19,7 +19,7 @@
   </commandset>
 
   <vbox class="prompt-header" flex="1">
-    <label id="prompt-confirm-title" class="prompt-title" crop="center"/>
+    <label id="prompt-confirm-title" class="prompt-title" crop="center" flex="1"/>
 
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-confirm-message"/>

mobile/chrome/content/prompt/prompt.xul

@@ -19,7 +19,7 @@
   </commandset>
 
   <vbox class="prompt-header" flex="1">
-    <label id="prompt-prompt-title" class="prompt-title" crop="center"/>
+    <label id="prompt-prompt-title" class="prompt-title" crop="center" flex="1"/>
 
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-prompt-message"/>

mobile/chrome/content/prompt/promptPassword.xul

@@ -24,7 +24,7 @@
   </commandset>
 
   <vbox class="prompt-header" flex="1">
-    <label id="prompt-password-title" class="prompt-title" crop="center"/>
+    <label id="prompt-password-title" class="prompt-title" crop="center" flex="1"/>
 
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-password-message"/>

mobile/chrome/content/prompt/select.xul

@@ -19,7 +19,7 @@
   </commandset>
 
   <vbox class="prompt-header" flex="1">
-    <label id="prompt-select-title" class="prompt-title" crop="center"/>
+    <label id="prompt-select-title" class="prompt-title" crop="center" flex="1"/>
 
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-select-message"/>

mobile/chrome/content/share.xul

@@ -0,0 +1,21 @@
+<?xml version="1.0"?>
+
+<!DOCTYPE prompt SYSTEM "chrome://browser/locale/prompt.dtd">
+
+<dialog id="share-dialog"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <keyset>
+    <key keycode="VK_ESCAPE" command="cmd_cancel"/>
+  </keyset>
+
+  <commandset>
+    <command id="cmd_cancel" oncommand="SharingUI.hide();"/>
+  </commandset>
+
+  <hbox class="prompt-header">
+    <label id="share-title" class="prompt-title" crop="center" flex="1"/>
+  </hbox>
+
+  <hbox id="share-buttons-box" class="prompt-buttons"/>
+</dialog>

mobile/chrome/jar.mn

@@ -57,6 +57,7 @@ chrome.jar:
   content/prompt/promptPassword.xul    (content/prompt/promptPassword.xul)
   content/prompt/select.xul            (content/prompt/select.xul)
   content/prompt/prompt.js             (content/prompt/prompt.js)
+  content/share.xul                    (content/share.xul)
   content/AnimatedZoom.js              (content/AnimatedZoom.js)
   content/sync.js                      (content/sync.js)
 

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

@@ -86,5 +86,7 @@
 
 <!ENTITY contextOpenInNewTab.label    "Open Link in New Tab">
 <!ENTITY contextSaveImage.label       "Save Image">
+<!ENTITY contextShareLink.label       "Share Link">
+<!ENTITY contextShareImage.label      "Share Image">
 <!ENTITY contextEditBookmark.label    "Edit">
 <!ENTITY contextRemoveBookmark.label  "Remove">

mobile/locales/en-US/chrome/browser.properties

@@ -143,6 +143,7 @@ homepage.custom2=Custom Page
 # Page Actions
 pageactions.saveas.pdf=Save As PDF
 pageactions.search.addNew=Add Search Engine
+pageactions.share.page=Share Page
 pageactions.password.forget=Forget Password
 pageactions.reset=Clear Site Preferences
 pageactions.geo=Location

mobile/themes/core/platform.css

@@ -630,7 +630,6 @@ progressmeter {
   -moz-border-radius: 8px;
 }
 
-.progress-bar
-{
+.progress-bar {
   background-color: #8db8d8;
 }