get tooltip to show up on adding a new account, revert extension to not use a getter, did not work when linkdrop.system = dev pref was set, if needed then probably needs a setter too, but need to figure out how that operates with linkdrop.system.

extensions/firefox-share/src/chrome/content/overlay.js

@@ -272,9 +272,7 @@ var ffshare;
     frameAnimationTime: 300,
 
     system: Application.prefs.getValue("linkdrop.system", "prod"),
-    get shareUrl() {
-      return Application.prefs.getValue("linkdrop.share_url", "")
-    },
+    shareUrl: Application.prefs.getValue("linkdrop.share_url", ""),
     useBookmarking: Application.prefs.getValue("linkdrop.bookmarking", true),
 
     shareFrame: null,

tasks.txt

@@ -22,8 +22,6 @@ Tasks:
 
 * First experience clicking on the share button
 
-* Create a neutral UI for the sharing dropdown - Andy
-
 * Make sure name next to tab is not hyperlinked
 
 * If navigate away, first time, shrink the bar, tell them they can click on the
@@ -49,10 +47,8 @@ Tasks:
       in the background?
   * If user clicks add then does deny on oauth window, need to capture the failure and
     tell the user about it.
-  * Add accounts, then keep them in settings, put a tooltip to the tab after account is set up.
   * If user clicks remove link, then add, always use OAuth forceLogin, but only for
     the remove/add case, not for first adds.
-  * Add a "What is this?" link to the settings page that pops the main share/install page in a new browser.
 
 * Bugs
   * Twitter: if api send gets 403 duplicate, then we show need to authenticate instead of duplicate.

web/share/index.html

@@ -28,7 +28,7 @@
   <button id="shareHistoryButton" class="statusButton">View Share History</button>
 </div>
 
-<div class="toolTip">
+<div id="tabToolTip">
   Try me!<span class="arrow"></span>
 </div>
 

web/share/index.js

@@ -41,31 +41,34 @@ function (require,   $,    fn,     rdapi,   oauth,   jig,     url,
       'twitter.com': {
         medium: 'twitter',
         name: 'Twitter',
+        tabName: 'twitterTab',
         icon: 'i/twitterIcon.png',
         revokeUrl: 'http://twitter.com/settings/connections',
         signOutUrl: 'http://twitter.com/logout',
         accountLink: function (account) {
-            return 'http://twitter.com/' + account.username
+          return 'http://twitter.com/' + account.username;
         }
       },
       'facebook.com': {
         medium: 'facebook',
         name: 'Facebook',
+        tabName: 'facebookTab',
         icon: 'i/facebookIcon.png',
         revokeUrl: 'http://www.facebook.com/editapps.php?v=allowed',
         signOutUrl: 'http://facebook.com',
         accountLink: function (account) {
-            return 'http://www.facebook.com/profile.php?id=' + account.userid;
+          return 'http://www.facebook.com/profile.php?id=' + account.userid;
         }
       },
       'google.com': {
         medium: 'google',
         name: 'Gmail',
+        tabName: 'gmailTab',
         icon: 'i/gmailIcon.png',
         revokeUrl: 'https://www.google.com/accounts/IssuedAuthSubTokens',
         signOutUrl: 'http://google.com/preferences',
         accountLink: function (account) {
-            return 'http://google.com/profiles/' + account.username;
+          return 'http://google.com/profiles/' + account.username;
         }
       }
     },
@@ -84,7 +87,7 @@ function (require,   $,    fn,     rdapi,   oauth,   jig,     url,
       //TODO: check for a thumbnail picture, hopefully one that is square.
       return photos && photos[0] && photos[0].value || 'i/face2.png';
     },
-    serviceName: function(domain) {
+    serviceName: function (domain) {
       return actions[domain].name;
     }
   });
@@ -162,6 +165,26 @@ function (require,   $,    fn,     rdapi,   oauth,   jig,     url,
     }
   }
 
+  function showTabToolTip(domain) {
+    var tabClass = actions[domain].tabName,
+        tabNode = $('.' + tabClass)[0],
+        rect = tabNode.getBoundingClientRect(),
+        top = rect.top + 3,
+        left = rect.left + rect.width + 7,
+        tipDom = $('#tabToolTip');
+
+    setTimeout(function () {
+      tipDom.css({
+        top: top,
+        left: left
+      }).fadeIn(3500, function () {
+        setTimeout(function () {
+          tipDom.fadeOut(2000);
+        }, 2000);
+      });
+    }, 1000);
+  }
+
   function getServiceUserName(serviceName) {
     var service = options.services && options.services[serviceName];
     return (service && service.usernames && service.usernames[0]) || null;
@@ -354,7 +377,32 @@ function (require,   $,    fn,     rdapi,   oauth,   jig,     url,
 
     getAccounts(function () {
       //Compare the old accounts with new accounts to see if one was added.
-      console.log("here");
+      var oldMap = {}, newMap = {}, domains = [], domain;
+      oldAccounts.forEach(function (account) {
+        oldMap[account.accounts[0].domain] = true;
+        
+      });
+      accounts.forEach(function (account) {
+        domain = account.accounts[0].domain;
+        if (!newMap[domain]) {
+          newMap[domain] = true;
+          domains.push(domain);
+        }
+      });
+
+      //Find the missing domain from the old map.
+      domain = null;
+      domains.some(function (d) {
+        if (!oldMap[d]) {
+          domain = d;
+          return true;
+        }
+        return false;
+      });
+
+      if (domain) {
+        showTabToolTip(domain);
+      }
     });
   }
 
@@ -366,6 +414,11 @@ function (require,   $,    fn,     rdapi,   oauth,   jig,     url,
     if (!options.title) {
       options.title = options.url;
     }
+    //For now disable guessing on accounts, since it is not reliable.
+    //TODO: remove the services stuff completely later, both here and
+    //in the extension if cannot get reliable account signed in detection in
+    //the browser via the browser cookies.
+    options.services = {};
   }
 
   getAccounts();

web/share/share.css

@@ -70,6 +70,8 @@ ul.nav li.hidden {
 ul.nav {
   display: block;
   width: 100%;
+  /* min-height for when all tabs are hidden on first config. */
+  min-height: 32px;
 }
 
 ul.nav li {
@@ -138,7 +140,7 @@ ul.nav li a.icon.settings {
   background-image: url("i/settingsIcon.png");
 }
 
-.toolTip {
+#tabToolTip {
   position: absolute;
   background-color: rgba(0,0,0,0.8);
   color: #fff;
@@ -151,7 +153,7 @@ ul.nav li a.icon.settings {
   line-height: 20px;
 }
 
-.toolTip span.arrow {
+#tabToolTip span.arrow {
   border-color:transparent rgba(0,0,0,0.8) transparent transparent;
   border-style: solid;
   border-width: 10px;