more changes in UI. added notification-on-error feature

git-svn-id: file:///tmp/snv/trunk@14 12951d8a-c33d-4b7c-b961-822215c816e1

chrome/content/diggsidebar.js

@@ -25,17 +25,19 @@ var DiggSidebar = {
         topic: null,
         category: "all"
     },
-    updateInterval: 10,
+    updateInterval: 1000,
     updateIntervalDecay: 0,
+    lastUpdateAt: new Date().getTime(),
     shownStoriesCount: 30,
     categories: ['All', 'Popular', 'Upcoming', 'Hot', 'Top'],
     timerId: null,
     storyIds: [],
-    playing: true,
+    refreshing: false,
     stories: [],
+    expandedStory: null,
 
     fetchData: function(url, handler) {
-        DiggSidebar.UI.indicator.style.display = '';
+        DiggSidebar.indicateActivity();
 
         var request = new XMLHttpRequest();
         request.onerror = DiggSidebar.errorHandler;
@@ -45,7 +47,17 @@ var DiggSidebar = {
     },
 
     errorHandler: function(e) {
-        window.alert("Error in accessing data from Digg");
+        /*if (DiggSidebar.UI.notificationBox.allNotifications.length > 0)
+            DiggSidebar.UI.notificationBox.removeAllNotifications(true);*/
+        DiggSidebar.UI.notificationBox.appendNotification(
+            "Unable to access Digg",
+            "dsAccessFailNotification",
+            null,
+            "PRIORITY_CRITICAL_HIGH",
+            [{callback:DiggSidebar.getStories, label: "Retry", accessKey: "R"}]
+        );
+        DiggSidebar.refreshing = false;
+        DiggSidebar.indicateInactivity();
     },
 
     populateMenu: function(e) {
@@ -117,11 +129,10 @@ var DiggSidebar = {
             menu.appendChild(menupopup);
             DiggSidebar.UI.containerPopup.appendChild(menu);
         }
-        DiggSidebar.UI.indicator.style.display = 'none';
+        //DiggSidebar.indicateInactivity();
     },
 
     populateStoryList: function() {
-        DiggSidebar.Utils.removeAllChildren(DiggSidebar.UI.storyListBox);
         var newStoryIds = new Array();
 
         var jp = new JPath(DiggSidebar.stories);
@@ -138,6 +149,9 @@ var DiggSidebar = {
                 return story.$("container/short_name").json == DiggSidebar.endpoint.container;
             }).json;
 
+        if (filteredStories.length > 0)
+            DiggSidebar.Utils.removeAllChildren(DiggSidebar.UI.storyListBox);
+
         filteredStories.forEach(function (story, index) {
             if (index < DiggSidebar.shownStoriesCount) {
                 var now = new Date();
@@ -173,27 +187,23 @@ var DiggSidebar = {
                     link: story.link,
                     href:  story.href
                 }
-                for (attr in attributes)
+                for (var attr in attributes)
                     li.setAttribute(attr, attributes[attr]);
 
                 li.read = story.read;
+                if (story.id == DiggSidebar.expandedStory)
+                    li.showDescription();
             }
             if (DiggSidebar.storyIds.indexOf(story.id) == -1) newStoryIds.push(story.id);
         });
         DiggSidebar.storyIds = DiggSidebar.storyIds.concat(newStoryIds);
-        DiggSidebar.setUpdateInterval(DiggSidebar.stories.slice(0,5));
-
-        window.clearTimeout(DiggSidebar.timerId);
-        var timeout = Math.round(DiggSidebar.updateInterval*(Math.pow(1.5, DiggSidebar.updateIntervalDecay)));
-        DiggSidebar.timerId = window.setTimeout(DiggSidebar.getStories, timeout);
-
-        DiggSidebar.UI.indicator.style.display = 'none';
     },
 
     showDescription: function(storyId) {
         var jp = new JPath(DiggSidebar.stories);
         var story = jp.query('//[id == ' + storyId + ']')[0];
         story.read = true;
+        DiggSidebar.expandedStory = parseInt(storyId);
 
         var listitems = DiggSidebar.UI.storyListBox.children;
         for (var i=0; i<listitems.length; i++)
@@ -203,26 +213,42 @@ var DiggSidebar = {
     },
 
     getStories: function() {
-        var ep = DiggSidebar.prefs.get("endpoint").value || '';
+        if (!DiggSidebar.refreshing) {
-        DiggSidebar.UI.endPointDesc.value = "digg" + ep;
+            DiggSidebar.refreshing = true;
+            var ep = DiggSidebar.prefs.get("endpoint").value || '';
 
-        DiggSidebar.fetchData("http://services.digg.com/stories" + ep.replace(/\/all/g, '') +
+            DiggSidebar.fetchData("http://services.digg.com/stories" + ep.replace(/\/all/g, '') +
-            "?count=30" + "&type=json" +
+                "?count=30" + "&type=json" +
-            "&appkey=" + encodeURIComponent("http://diggsidebar.googlepages.com"),
+                "&appkey=" + encodeURIComponent("http://diggsidebar.googlepages.com"),
-            function(e) {
+                function(e) {
-                var newStories = DiggSidebar.Utils.decodeJson(e.target.responseText).stories.filter(
+                    DiggSidebar.UI.endPointDesc.value = "digg" + ep;
-                    function(story) {
+
-                        return !(DiggSidebar.storyIds.indexOf(story.id) != -1);
+                    var stories = DiggSidebar.Utils.decodeJson(e.target.responseText).stories;
+                    var newStories = stories.filter(
+                        function(story) {
+                            return !(DiggSidebar.storyIds.indexOf(story.id) != -1);
+                        });
+                    newStories.forEach(function(story) {
+                        story.category = DiggSidebar.endpoint.category;
+                        story.read = false;
                     });
-                newStories.forEach(function(story) {
+                    DiggSidebar.stories = newStories.concat(DiggSidebar.stories);
-                    story.category = DiggSidebar.endpoint.category;
+                    var observerService = Components.classes["@mozilla.org/observer-service;1"]
-                    story.read = false;
+                        .getService(Components.interfaces.nsIObserverService);
+                    observerService.notifyObservers(null, DiggSidebar.storyListRefreshEventTopic, null);
+
+                    DiggSidebar.refreshing = false;
+                    DiggSidebar.setUpdateInterval(stories);
+
+                    window.clearTimeout(DiggSidebar.timerId);
+                    var timeout = DiggSidebar.calculateTimeout();
+                    DiggSidebar.timerId = window.setTimeout(DiggSidebar.getStories, timeout);
+
+                    DiggSidebar.indicateInactivity();
                 });
-                DiggSidebar.stories = newStories.concat(DiggSidebar.stories);
+        } else {
-                var observerService = Components.classes["@mozilla.org/observer-service;1"]
+            window.setTimeout(DiggSidebar.getStories, 1000);
-                    .getService(Components.interfaces.nsIObserverService);
+        }
-                observerService.notifyObservers(null, DiggSidebar.storyListRefreshEventTopic, null);
-            });
     },
 
     createMenu: function() {
@@ -264,6 +290,10 @@ var DiggSidebar = {
         //Adaptive update interval code END
     },
 
+    calculateTimeout: function() {
+        return Math.round(DiggSidebar.updateInterval*(Math.pow(1.5, DiggSidebar.updateIntervalDecay)))
+    },
+
     setEndPoint: function(ep) {
         DiggSidebar.prefs.get("endpoint").value = ep;
         DiggSidebar.endpoint = DiggSidebar.getEndpointParts(ep);
@@ -287,32 +317,46 @@ var DiggSidebar = {
         return tmp;
     },
 
-    togglePlayPause: function() {
+    indicateActivity: function() {
-        if (DiggSidebar.playing) {
+        DiggSidebar.UI.indicator.src = "chrome://global/skin/icons/loading_16.png";
-            window.clearTimeout(DiggSidebar.timerId);
+        with (DiggSidebar.UI.indicator.parentNode) {
-            DiggSidebar.UI.playPauseButton.image = "chrome://diggsidebar/content/image/Play.png";
+            disabled = true;
-            DiggSidebar.UI.playPauseButton.setAttribute("tooltiptext", "Click to Start autoupdate");
+            setAttribute('tooltiptext', "Refreshing");
-            DiggSidebar.playing = false;
+            onmouseover = null;
-        } else {
-            var timeout = Math.round(DiggSidebar.updateInterval*(Math.pow(1.5, DiggSidebar.updateIntervalDecay)));
-            DiggSidebar.timerId = window.setTimeout(DiggSidebar.getStories, timeout);
-            DiggSidebar.UI.playPauseButton.image = "chrome://diggsidebar/content/image/Pause.png";
-            DiggSidebar.UI.playPauseButton.setAttribute("tooltiptext", "Click to Pause autoupdate");
-            DiggSidebar.playing = true;
         }
     },
 
+    indicateInactivity: function() {
+        DiggSidebar.UI.indicator.src = "chrome://global/skin/icons/notloading_16.png";
+        with (DiggSidebar.UI.indicator.parentNode) {
+            disabled = false;
+            onmouseover = function() {
+                var autoRefreshTime = Math.round(
+                    (DiggSidebar.lastUpdateAt + DiggSidebar.calculateTimeout() - new Date().getTime())/1000
+                );
+                autoRefreshTime = (autoRefreshTime > 3600) ?
+                                        Math.round(autoRefreshTime/3600) + " hours":
+                                        (autoRefreshTime > 60) ?
+                                            Math.round(autoRefreshTime/60) + " minutes":
+                                            autoRefreshTime + " seconds";
+                setAttribute('tooltiptext', "Click to refresh now.\n" +
+                    "Autorefreshing in " + autoRefreshTime);
+            }
+        }
+        DiggSidebar.lastUpdateAt = new Date().getTime();
+    },
+
     initialize: function(){
         DiggSidebar.endpoint = DiggSidebar.getEndpointParts(DiggSidebar.prefs.get("endpoint").value);
         var $ = function(id) {return document.getElementById(id)};
 
         DiggSidebar.UI = {};
+        DiggSidebar.UI.notificationBox = $('dsNotificationBox');
         DiggSidebar.UI.indicator = $('dsBusyIndicator');
         DiggSidebar.UI.topicPopup = $('dsTopicPopup');
         DiggSidebar.UI.containerPopup = $('dsContainerPopup');
         DiggSidebar.UI.storyListBox = $('dsStoryListBox');
         DiggSidebar.UI.endPointDesc = $('dsEndPointDesc');
-        DiggSidebar.UI.playPauseButton = $('dsPlayPauseButton');
 
         DiggSidebar.storyListObserver = new DiggSidebar.StoryListObserver();
         DiggSidebar.createMenu();

chrome/content/diggsidebar.xul

@@ -41,22 +41,19 @@
                     </menu>
                 </menubar>
             </toolbaritem>
-            <toolbarbutton id="dsPlayPauseButton"
-                           image="chrome://diggsidebar/content/image/Pause.png"
-                           tooltiptext="Click to Pause autoupdate"
-                           oncommand="DiggSidebar.togglePlayPause()" />
             <toolbarspacer flex="5" />
             <toolbaritem>
-                <progressmeter flex="1"
+                <toolbarbutton tooltiptext="Click to refresh" oncommand="DiggSidebar.getStories()">
-                               width="5"
+                    <image id="dsBusyIndicator"/>
-                               mode="undetermined"
+                </toolbarbutton>
-                               id="dsBusyIndicator"
-                               style="height: 85% !important; width: 30% !important" />
             </toolbaritem>
         </toolbar>
     </hbox>
-    <description id="dsEndPointDesc">digg</description>
+    <notificationbox id="dsNotificationBox" dir="reverse">
-    <richlistbox flex="1"
+        <description id="dsEndPointDesc">digg</description>
+    </notificationbox>
+        <richlistbox flex="1"
                  id="dsStoryListBox"
+                 seltype="single"
                  onselect="DiggSidebar.showDescription(this.selectedItem.id.substr(6))" />
 </page>

chrome/content/diggstory.xml

@@ -11,7 +11,7 @@
         <content>
             <xul:vbox flex="1">
             <xul:vbox class="storyHeader" flex="1">
-                <xul:label xbl:inherits="xbl:text=title" class="storyTitle"/>
+                <xul:description xbl:inherits="xbl:text=title" class="storyTitle"/>
             </xul:vbox>
             <xul:vbox class="storyDetails" flex="1">
                 <html:div class="storyCategory">
@@ -34,7 +34,7 @@
                 </html:div>
                 <html:div>
                     <html:span class="storyPopularity">
-                        <html:img src="chrome://diggsidebar/content/image/digg.png" width="15px" />
+                        <html:img src="chrome://diggsidebar/content/image/digg.gif" width="15px" />
                         <html:span xbl:inherits="xbl:text=diggs" class="storyDiggs"></html:span>
                         <html:img src="chrome://diggsidebar/content/image/comments.png" width="15px" />
                         <html:span xbl:inherits="xbl:text=comments" class="storyComments"></html:span>
@@ -53,15 +53,11 @@
                 <![CDATA[
                 this.d = {};
                 this.d.read = false;
-                this.d.collapsed = true;
                 ]]>
             </constructor>
             <property name="read"
                 onget="return this.d.read;"
                 onset="this.d.read = val; if(val==true) this.markAsRead();"/>
-            <property name="collapsed"
-                onget="return this.d.collapsed;"
-                onset="this.d.collapsed = val;"/>
             <method name="markAsRead">
                 <body>
                 <![CDATA[
@@ -76,7 +72,7 @@
                 <![CDATA[
                     document.getAnonymousElementByAttribute(this, "class", "storyDetails").style.display = 'block';
                     this.read = true;
-                    this.collapsed = false;
+                    this.selected = true;
                 ]]>
                 </body>
             </method>
@@ -84,7 +80,7 @@
                 <body>
                 <![CDATA[
                     document.getAnonymousElementByAttribute(this, "class", "storyDetails").style.display = 'none';
-                    this.collapsed = true;
+                    this.selected = false;
                 ]]>
                 </body>
             </method>

chrome/skin/diggsidebar.css

@@ -47,7 +47,9 @@ a img {
     color: white;
     background-color: blue;
 }
-
+.storyDiggs, .storyComments {
+    font-size: xx-small;
+}
 #dsStoryListBox richlistitem{
     border: 2px solid #E5ECF3;
     border-top: none;