Permalink
Browse files

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

…OM sorting.
  • Loading branch information...
chromakode committed Sep 22, 2009
1 parent 5886ae0 commit 8efa7db10567c438780e490d2771c56c440d5a29
View
Binary file not shown.
View
Binary file not shown.
@@ -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");
@@ -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>
@@ -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>
View
@@ -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>
View
@@ -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);
View
@@ -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));
}
},
View
@@ -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) {
@@ -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(); }
Oops, something went wrong.

0 comments on commit 8efa7db

Please sign in to comment.