Add info tooltips to url bar icons, refactoring reddit API code and D…

…OM sorting.

content/reddit/redditBar.xml

@@ -5,7 +5,7 @@
 
   <binding id="reddit-content-ui" extends="chrome://socialite/content/socialiteBar.xml#socialite-site-content-ui">
     <content>
-      <xul:hbox anonid="reddit-content-ui-container" flex="1" align="center">
+      <xul:hbox anonid="reddit-content-ui-container" class="socialite-login-state" xbl:inherits="isloggedin" flex="1" align="center">
         <xul:box tooltip="_child">
           <!-- A parent box element seems to be necessary to make tooltips work.-->
           <xul:tooltip anonid="tooltipScore" class="reddit-score-tooltip"/>
@@ -15,18 +15,18 @@
         <xul:label anonid="labelSubreddit" class="reddit-subreddit"/>
         <xul:spacer flex="9999"/>
         <xul:hbox anonid="boxButtons" class="buttonbox" align="stretch">
-          <xul:button anonid="buttonLike" class="socialite-notification-button reddit-logged-in" type="checkbox" label="&like.label;" accesskey="&like.accesskey;" autoCheck="false"/>
-          <xul:button anonid="buttonDislike" class="socialite-notification-button reddit-logged-in" type="checkbox" label="&dislike.label;" accesskey="&dislike.accesskey;" autoCheck="false"/>
+          <xul:button anonid="buttonLike" class="socialite-notification-button socialite-logged-in" type="checkbox" label="&like.label;" accesskey="&like.accesskey;" autoCheck="false"/>
+          <xul:button anonid="buttonDislike" class="socialite-notification-button socialite-logged-in" type="checkbox" label="&dislike.label;" accesskey="&dislike.accesskey;" autoCheck="false"/>
           <xul:button anonid="buttonComments" class="socialite-notification-button" accesskey="&comments.accesskey;">
             <xul:image anonid="imageComments" class="button-icon" src="chrome://socialite/content/reddit/comments.png" hidden="true" style="margin-right: 4px"/>
             <xul:label anonid="labelCommentsNum" class="button-text" value="?"/>
             <xul:label anonid="labelCommentsWord" class="button-text" value=" &comments-plural.label;" accesskey="&comments.accesskey;"/>
           </xul:button> 
-          <xul:button anonid="buttonSave" class="socialite-notification-button reddit-logged-in" label="&save.label;" accesskey="&save.accesskey;"/>
-          <xul:button anonid="buttonHide" class="socialite-notification-button reddit-logged-in" label="&hide.label;" accesskey="&hide.accesskey;"/>
+          <xul:button anonid="buttonSave" class="socialite-notification-button socialite-logged-in" label="&save.label;" accesskey="&save.accesskey;"/>
+          <xul:button anonid="buttonHide" class="socialite-notification-button socialite-logged-in" label="&hide.label;" accesskey="&hide.accesskey;"/>
           <xul:button anonid="buttonRandom" class="socialite-notification-button" label="&random.label;" accesskey="&random.accesskey;"/>
-          <xul:button anonid="buttonProfile" class="socialite-notification-button reddit-logged-in" label="&profile.label;" accesskey="&profile.accesskey;"/>
-          <xul:button anonid="buttonLogin" class="socialite-notification-button reddit-not-logged-in" label="&login.label;" accesskey="&login.accesskey;" image="chrome://socialite/content/reddit/login.png"/>
+          <xul:button anonid="buttonProfile" class="socialite-notification-button socialite-logged-in" label="&profile.label;" accesskey="&profile.accesskey;"/>
+          <xul:button anonid="buttonLogin" class="socialite-notification-button socialite-not-logged-in" label="&login.label;" accesskey="&login.accesskey;" image="chrome://socialite/content/reddit/login.png"/>
           <children/>
         </xul:hbox>
       </xul:hbox>
@@ -46,8 +46,6 @@
                 onget="return this.getAttribute('isloggedin') == 'true';"/>
 
       <constructor>
-        this.className += " reddit-content-ui";
-
         // Public members for easy access
         this.labelScore = document.getAnonymousElementByAttribute(this, "anonid", "labelScore");
         this.buttonLike = document.getAnonymousElementByAttribute(this, "anonid", "buttonLike");

content/reddit/redditSiteInfo.xml

@@ -0,0 +1,84 @@
+<?xml version="1.0"?>
+<!DOCTYPE reddit SYSTEM "chrome://socialite/locale/reddit.dtd">
+<bindings
+  xmlns="http://www.mozilla.org/xbl"
+  xmlns:xbl="http://www.mozilla.org/xbl"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <binding id="reddit-site-info">
+    <content>
+      <xul:vbox class="socialite-login-state" xbl:inherits="isloggedin">
+        <xul:grid class="socialite-logged-in">
+          <xul:columns>
+            <xul:column/>
+            <xul:column/>
+            <xul:column/>
+          </xul:columns>
+          <xul:rows>
+            <xul:row>
+              <xul:label anonid="labelUsername" class="socialite-site-info-username">&siteInfo.loadingtext;</xul:label>
+              <xul:spacer flex="1"/>
+              <xul:hbox align="center" pack="end">
+                <xul:image anonid="imageMailIcon" src="chrome://socialite/content/reddit/mailgray.png" class="mail-icon"/>
+                <xul:label anonid="labelMailCount" class="reddit-mail-count">?</xul:label>
+              </xul:hbox>
+            </xul:row>
+            <xul:row>
+              <xul:label>&linkKarma.label;</xul:label>
+              <xul:spacer flex="1"/>
+              <xul:label anonid="labelLinkKarma" class="socialite-site-info-data reddit-link-karma">...</xul:label>
+            </xul:row>
+            <xul:row>
+              <xul:label>&commentKarma.label;</xul:label>
+              <xul:spacer flex="1"/>
+              <xul:label anonid="labelCommentKarma" class="socialite-site-info-data reddit-comment-karma">...</xul:label>
+            </xul:row>
+          </xul:rows>
+        </xul:grid>
+        <xul:vbox class="socialite-not-logged-in">
+          <xul:label class="socialite-site-info-username">&siteInfo.loggedout.title;</xul:label>
+        	<xul:label>&siteInfo.loggedout.label;</xul:label>
+        </xul:vbox>
+      </xul:vbox>
+    </content>
+
+    <resources>
+      <stylesheet src="chrome://socialite/skin/socialite.css"/>
+      <stylesheet src="chrome://socialite/skin/socialite_platform.css"/>
+      <stylesheet src="chrome://socialite/skin/reddit.css"/>
+    </resources>
+
+    <implementation>
+      <method name="refresh">
+        <body>
+          var self = this;
+          function setLabel(anonid, value) {
+            var label = document.getAnonymousElementByAttribute(self, "anonid", anonid);
+            label.value = value;
+          }
+
+          this.site.API.auth.getAuthInfo(function(authInfo) {
+            self.setAttribute("isloggedin", authInfo.isLoggedIn);
+            setLabel("labelUsername", authInfo.username);
+          }).perform();
+
+          var messageCount = this.site.newMessages.length;
+          setLabel("labelMailCount", messageCount);
+          var imageMailIcon = document.getAnonymousElementByAttribute(this, "anonid", "imageMailIcon");
+          if (messageCount > 0) {
+            imageMailIcon.src = "chrome://socialite/content/reddit/mail.png";
+          } else {
+            imageMailIcon.src = "chrome://socialite/content/reddit/mailgray.png";
+          }
+
+          this.site.cached.myuserinfo(
+            function success(r, json) {
+              setLabel("labelLinkKarma",    json.data.link_karma);
+              setLabel("labelCommentKarma", json.data.comment_karma);
+            }
+          ).perform();
+        </body>
+      </method>
+    </implementation>
+  </binding>
+</bindings>

content/reddit/scoreTooltip.xml

@@ -6,7 +6,6 @@
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <binding id="scoretooltip" extends="chrome://global/content/bindings/popup.xml#tooltip">
-
     <content>
       <xul:grid>
         <xul:columns>
@@ -66,6 +65,5 @@
         this.dislikeCount = linkInfo.localState.dislikeCount;
       </handler>
     </handlers>
-
   </binding>
 </bindings>

content/siteInfoBox.xml

@@ -0,0 +1,144 @@
+<?xml version="1.0"?>
+<!DOCTYPE reddit SYSTEM "chrome://socialite/locale/socialite.dtd">
+<bindings
+  xmlns="http://www.mozilla.org/xbl"
+  xmlns:xbl="http://www.mozilla.org/xbl"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <binding id="site-info-box" extends="chrome://global/content/bindings/general.xml#basecontrol">
+    <content>
+      <xul:groupbox>
+        <xul:caption align="center" xbl:inherits="image,label=name" flex="1"/>
+        <children/>
+      </xul:groupbox>
+    </content>
+
+    <resources>
+      <stylesheet src="chrome://socialite/skin/socialite.css"/>
+      <stylesheet src="chrome://socialite/skin/socialite_platform.css"/>
+    </resources>
+
+    <implementation>
+      <!--
+        Commented out as per urlBarIcon.xml 
+        <field name="site"/>
+      -->
+      <property name="siteInfo" onget="return this.childNodes[0];"/>
+
+      <property name="name"
+                onget="return this.getAttribute('name');"
+                onset="this.setAttribute('name', val); return val;"/>
+
+      <constructor>
+        if (!this._constructed) {
+          this.updateSiteName();
+
+          var faviconWatch = Components.utils.import("resource://socialite/utils/faviconWatch.jsm", null);
+          this._removeFaviconWatch = faviconWatch.useFaviconAsAttribute(this, "image", this.site.siteURL);
+          this._constructed = true;
+        }
+      </constructor>
+
+      <destructor>
+        this.destroySiteInfoBox();
+      </destructor>
+
+      <method name="destroySiteInfoBox">
+        <body>
+          if (this._removeFaviconWatch) { this._removeFaviconWatch(); }
+        </body>
+      </method>
+
+      <method name="updateSiteName">
+        <body>
+          this.name = this.site.siteName;
+        </body>
+      </method>
+
+      <method name="refresh">
+        <body>
+          this.siteInfo.refresh();
+        </body>
+      </method>      
+    </implementation>
+  </binding>
+
+  <binding id="site-info-tooltip" extends="chrome://global/content/bindings/popup.xml#tooltip">
+    <content noautohide="true">
+      <xul:vbox>
+        <children/>
+      </xul:vbox>
+    </content>
+
+    <implementation>      
+      <constructor>
+        if (!this._constructed) {
+          this.afterBound();
+          this._constructed = true;
+        }
+      </constructor>
+
+      <destructor>
+        this.destroySiteInfoTooltip();
+      </destructor>
+
+      <method name="destroySiteInfoTooltip">
+        <body>
+          Array.forEach(this.childNodes, function(siteInfoBox) {
+            siteInfoBox.destroySiteInfoBox();
+          });
+        </body>
+      </method>
+
+      <method name="addSite">
+        <parameter name="site"/>
+        <body>
+          var siteInfoBox = document.createElement("box");
+          siteInfoBox.className = "socialite-site-info-box";
+          siteInfoBox.site = site;
+          siteInfoBox.setAttribute("name", site.siteName);
+          siteInfoBox.appendChild(site.createInfoUI(document));
+          this.appendChild(siteInfoBox);
+        </body>
+      </method>
+
+      <method name="removeSite">
+        <parameter name="site"/>
+        <body>
+           <![CDATA[
+            for (var i=0; i<this.childNodes.length; i++) {
+              if (this.childNodes[i].site.siteID == site.siteID) {
+                this.childNodes[i].destroySiteInfoBox();
+                this.removeChild(this.childNodes[i]);
+              }
+            }
+          ]]>
+        </body>
+      </method>
+
+      <method name="updateSiteNames">
+        <body>
+          Array.forEach(this.childNodes, function(siteInfoBox) {
+            siteInfoBox.updateSiteName();
+          });
+        </body>
+      </method>
+
+      <method name="refresh">
+        <body>
+          Array.forEach(this.childNodes, function(siteInfoBox) {
+            siteInfoBox.refresh();
+          });
+        </body>
+      </method>      
+    </implementation>
+
+    <handlers>
+      <handler event="popupshown">
+        // We must refresh site names on this event, because the XBL doesn't seem to bind until the popup is showing.
+        this.updateSiteNames();
+        this.refresh();
+      </handler>
+    </handlers>
+  </binding>
+</bindings>

content/siteMenuItem.js

@@ -56,11 +56,7 @@ SocialiteWindow.SiteMenuItem = (function() {
         if (menuItems.length == 0) {
           fileMenuPopup.insertBefore(menuItem, sendMenuItem.nextSibling);
         } else {
-          domUtils.insertSorted(menuItem, menuItems, function(item1, item2) {
-            let label1 = item1.getAttribute("label"); 
-            let label2 = item2.getAttribute("label"); 
-            return label1.localeCompare(label2);
-          });
+          domUtils.insertSorted(menuItem, menuItems, domUtils.compareBy(function(e) e.getAttribute("label")));
         }
       }
       menuItem.updateSiteName(site.siteName);

content/siteUrlBarIcon.js

@@ -41,6 +41,12 @@ SocialiteWindow.SiteUrlBarIcon = (function() {
         Socialite.utils.openUILink(site.inboxURL, e);
       }, false);
 
+      let infoTooltip = document.createElement("tooltip");
+      infoTooltip.className = "socialite-site-info-tooltip";
+      infoTooltip.afterBound = function() {
+        infoTooltip.addSite(site);
+      }
+      urlBarIcon.appendChild(infoTooltip);
       // Hide the icon before we add and position it.
       urlBarIcon.setAttribute("hidden", true);
 
@@ -104,18 +110,14 @@ SocialiteWindow.SiteUrlBarIcon = (function() {
       let urlBarIcon = this.get(site);
       let feedButton = document.getElementById("feed-button");
       let urlBarIconParent = document.getElementById("urlbar-icons");
-
+      
       urlBarIcon.name = newSiteName;
 
       let urlBarIcons = SiteUrlBarIcon.getAll();
       if (urlBarIcons.length == 0) {
         urlBarIconParent.insertBefore(urlBarIcon, feedButton);
       } else {
-        domUtils.insertSorted(urlBarIcon, urlBarIcons, function compare(urlBarIcon1, urlBarIcon2) {
-          let name1 = urlBarIcon1.name;
-          let name2 = urlBarIcon2.name;
-          return name1.localeCompare(name2);
-        });
+        domUtils.insertSorted(urlBarIcon, urlBarIcons, domUtils.compareBy(function(e) e.name));
       }
     },
 

content/socialiteBar.xml

@@ -424,8 +424,8 @@
                 }
                 
                 if (self.selectedSite.siteID == siteID) {
-                  let siteName = document.getAnonymousElementByAttribute(self, "anonid", "labelSite");
-                  siteName.value = newSiteName;
+                  let labelSiteName = document.getAnonymousElementByAttribute(self, "anonid", "labelSite");
+                  labelSiteName.value = newSiteName;
                 }
               }
             }
@@ -481,11 +481,7 @@
             menuItem.updateSiteName = function(newName) {
               var domUtils = Components.utils.import("resource://socialite/utils/domUtils.jsm", null);
               menuItem.setAttribute("label", newName);
-              domUtils.addSorted(menuItem, self.menuSites, function(item1, item2) {
-                let label1 = item1.getAttribute("label"); 
-                let label2 = item2.getAttribute("label"); 
-                return label1.localeCompare(label2);
-              });
+              domUtils.addSorted(menuItem, self.menuSites, domUtils.compareBy(function(e) e.getAttribute("label")));
             }
             menuItem.updateSiteIcon = function() {
               var faviconWatch = Components.utils.import("resource://socialite/utils/faviconWatch.jsm", null);
@@ -582,7 +578,6 @@
         let observerService = Components.classes["@mozilla.org/observer-service;1"]
                               .getService(Components.interfaces.nsIObserverService);
 
-        // Site name change observer
         let self = this;
         this.loadedSiteObserver = {
           observe: function(subject, topic, data) {

content/socialitePreferences.js

@@ -31,11 +31,7 @@ var SocialiteSitePreferences = (function() {
 
           if (siteCell.getAttribute("label") != site.siteName) {
             siteCell.setAttribute("label", site.siteName);
-            domUtils.insertListboxSorted(newItem, SSPrefs.siteListbox, function(item1, item2) {
-              let label1 = item1.firstChild.getAttribute("label"); 
-              let label2 = item2.firstChild.getAttribute("label"); 
-              return label1.localeCompare(label2);
-            });
+            domUtils.insertListboxSorted(newItem, SSPrefs.siteListbox, domUtils.compareBy(function(e) e.firstChild.getAttribute("label")));
           }
 
           if (newItem.removeFaviconWatch) { newItem.removeFaviconWatch(); }