Add loading text/image to tabs. Clean-up some names. Fix styles for the first panel and the first panel after the selected one. Support only hiding the sidebar panels (as is needed for mailnews and addressbook).

xpfe/components/sidebar/resources/sidebarOverlay.js

@@ -102,9 +102,9 @@ function sidebar_overlay_init() {
   debug("sidebarObj.component is " + sidebarObj.component);
 
   // Initialize the display
-  var sidebar_element  = document.getElementById('sidebar-box');
+  var sidebar_element = document.getElementById('sidebar-box');
-  var sidebar_menuitem = document.getElementById('menu_sidebar');
+  var sidebar_menuitem = document.getElementById('sidebar-menu');
-  if (sidebar_element.getAttribute('hidden') == 'true') {
+  if (sidebar_is_hidden()) {
     if (sidebar_menuitem) {
       sidebar_menuitem.setAttribute('checked', 'false');
     }
@@ -122,13 +122,11 @@ function sidebar_overlay_init() {
 
       // Show the header for the panels area. Use a splitter if there
       // is stuff over the panels area.
-      var title_box = document.getElementById('title-box');
+      var sidebar_title = document.getElementById('sidebar-title-box');
-      if (sidebar_element.firstChild == title_box) {
+      if (sidebar_element.firstChild == sidebar_title) {
-        //title_box.removeAttribute('hidden');
+        sidebar_title.setAttribute('type','box');
-        title_box.setAttribute('type','box');
       } else {
-        //document.getElementById('title-splitter').removeAttribute('hidden');
+        sidebar_title.setAttribute('type','splitter');
-        title_box.setAttribute('type','splitter');
       }
       
       // Add the user's current panel choices to the template builder,
@@ -209,7 +207,7 @@ function sidebar_refresh() {
   var last_selected_panel = panels.getAttribute('last-selected-panel');
   if (is_selected(last_selected_panel)) {
     // A panel is already selected
-    update_iframes();
+    update_panels();
   } else {
     // This is either the first refresh after creating the sidebar,
     // or a panel has been added or removed.
@@ -255,7 +253,7 @@ function select_panel(target) {
   if (panels.getAttribute('last-selected-panel') != target) {
     panels.setAttribute('last-selected-panel', target);
   }
-  update_iframes();
+  update_panels();
 }
 
 function find_panel(panels, target) {
@@ -296,13 +294,35 @@ function is_excluded(item) {
            exclude.indexOf(sidebarObj.component) != -1 );
 }
 
-function update_iframes() {
+function panel_loader() {
+  debug("---------- panel_loader");
+  dump_tree(this);
+  this.removeEventListener("load", panel_loader, true);
+  this.removeAttribute('collapsed');
+  this.parentNode.firstChild.setAttribute('hidden','true');
+}
+
+function get_iframe(content) {
+  debug("---------- get_iframe");
+  dump_tree(content);
+  var unsandboxed_iframe = content.childNodes.item(1);
+  var sandboxed_iframe = content.childNodes.item(2);
+  if (unsandboxed_iframe.getAttribute('src').match(/^chrome:/)) {
+    return unsandboxed_iframe;
+  } else {
+    return sandboxed_iframe;
+  }
+}
+
+function update_panels() {
   // This function requires that the attributre 'last-selected-panel'
   // holds the id of a non-excluded panel. If it doesn't, no panel will
   // be selected.
   var panels = document.getElementById('sidebar-panels');
   var selected_id = panels.getAttribute('last-selected-panel');
-
+  var have_set_top = 0
+  var have_set_after_selected = 0
+  var is_after_selected = 0
   for (var ii=1; ii < panels.childNodes.length; ii += 2) {
     var header = panels.childNodes.item(ii);
     var content = panels.childNodes.item(ii+1);
@@ -311,31 +331,38 @@ function update_iframes() {
       debug("item("+ii+") excluded");
       header.setAttribute('hidden','true');
       content.setAttribute('hidden','true');
-    } else if (selected_id == id) {
+    } else {
-      debug("item("+ii+") selected");
+      if (!have_set_top) {
-      header.setAttribute('selected','true');
+        header.setAttribute('top-panel','true');
-      header.removeAttribute('hidden');
+        have_set_top = 1
-      var previously_shown = content.getAttribute('have-shown');
+      } else {
-      content.setAttribute('have-shown','true');
+        header.removeAttribute('top-panel');
-      content.removeAttribute('hidden');
+      }
-      content.removeAttribute('collapsed');
+      if (!have_set_after_selected && is_after_selected) {
-      if (!previously_shown) {
+        header.setAttribute('first-panel-after-selected','true');
-        // Pick sandboxed, or unsandboxed iframe
+        have_set_after_selected = 1
-        if (content.firstChild.getAttribute('src').match(/^chrome:/)) {
+      } else {
-          content.firstChild.removeAttribute('hidden');
+        header.removeAttribute('first-panel-after-selected');
-        } else {
-          content.lastChild.removeAttribute('hidden');
-        }
       }
-    } else { 
-      debug("item("+ii+") unselected");
-      header.removeAttribute('selected');
       header.removeAttribute('hidden');
-      
+
-      // After an iframe is show the first time, hide it instead of
+      if (selected_id == id) {
-      // destroying it.
+        is_after_selected = 1
-      var built_attribute = content.getAttribute('hidden')
+        debug("item("+ii+") selected");
-      if (!built_attribute || built_attribute != 'true') {
+        header.setAttribute('selected', 'true');
+        content.removeAttribute('hidden');
+        content.removeAttribute('collapsed');
+        var previously_shown = content.getAttribute('have-shown');
+        content.setAttribute('have-shown','true');
+        if (!previously_shown) {
+          // Pick sandboxed, or unsandboxed iframe
+          var iframe = get_iframe(content);
+          iframe.removeAttribute('hidden');
+          iframe.addEventListener("load", panel_loader, true);
+        }
+      } else { 
+        debug("item("+ii+") unselected");
+        header.removeAttribute('selected');
         content.setAttribute('collapsed','true');
       }
     }
@@ -401,25 +428,41 @@ function SidebarCustomize() {
   }
 }
 
+function sidebar_is_hidden() {
+  var sidebar_title = document.getElementById('sidebar-title-box');
+  var sidebar_box = document.getElementById('sidebar-box');
+  return sidebar_box.getAttribute('hidden') == 'true'
+         || sidebar_title.getAttribute('hidden') == 'true';
+}
+
 // Show/Hide the entire sidebar.
 // Envoked by the "View / Sidebar" menu option.
 function SidebarShowHide() {
   var sidebar_box = document.getElementById('sidebar-box');
+  var sidebar_title = document.getElementById('sidebar-title-box');
+  var sidebar_panels = document.getElementById('sidebar-panels');
   var sidebar_splitter = document.getElementById('sidebar-splitter');
-  var is_hidden = sidebar_box.getAttribute('hidden');
+  var hide_everything = sidebar_title.getAttribute('type') == 'box';
 
-  if (is_hidden && is_hidden == "true") {
+  var elem1, elem2, elem1_name;
+  if (sidebar_is_hidden()) {
     debug("Showing the sidebar");
     sidebar_box.removeAttribute('hidden');
+    sidebar_title.removeAttribute('hidden');
+    sidebar_panels.removeAttribute('hidden');
     sidebar_splitter.removeAttribute('hidden');
     sidebar_overlay_init();
   } else {
     debug("Hiding the sidebar");
-    sidebar_box.setAttribute('hidden','true');
+    if (hide_everything) {
-    sidebar_splitter.setAttribute('hidden','true');
+      sidebar_box.setAttribute('hidden', 'true');
+      sidebar_splitter.setAttribute('hidden', 'true');
+    }
+    sidebar_title.setAttribute('hidden', 'true');
+    sidebar_panels.setAttribute('hidden', 'true');
   }
   // Immediately save persistent values
-  document.persist('sidebar-box', 'hidden');
+  document.persist('sidebar-title-box', 'hidden');
   persist_width();
 }
 
@@ -435,8 +478,8 @@ function PersistHeight() {
   // but wait until the last drag has been committed.
   // May want to do something smarter here like only force it if the 
   // width has really changed.
-  var title_box = document.getElementById('title-box');
+  var sidebar_title = document.getElementById('sidebar-title-box');
-  if (title_box && title_box.getAttribute('type') == "splitter") {
+  if (sidebar_title && sidebar_title.getAttribute('type') == "splitter") {
     setTimeout("document.persist('sidebar-panels','height');",100);
   }
 }
@@ -446,8 +489,9 @@ function persist_width() {
   var sidebar_box = document.getElementById('sidebar-box');
 
   var width = sidebar_box.getAttribute('width');
-  if (width && (width > 410 || width < 15)) {
+  if (width && (width > 410 || width < 100)) {
     sidebar_box.setAttribute('width',168);
+    debug("Forcing sidebar width to 168. It was too narror or too wide)");
   }
 
   // XXX Mini hack. Persist isn't working too well. Force the persist,
@@ -465,7 +509,7 @@ function SidebarFinishDrag() {
 }
 
 function SidebarBuildPickerPopup() {
-  var menu = document.getElementById('panel-picker-popup');
+  var menu = document.getElementById('sidebar-panel-picker-popup');
   menu.database.AddDataSource(RDF.GetDataSource(sidebarObj.datasource_uri));
   menu.setAttribute('ref', sidebarObj.resource);
 

xpfe/components/sidebar/resources/sidebarOverlay.xul

@@ -29,13 +29,13 @@
   <!-- Overlay the sidebar panels -->
   <box id="sidebar-box" align="vertical"
     persist="hidden width collapsed">
-    <sidebarheader id="title-box" class="sidebar-main-header" 
+    <sidebarheader id="sidebar-title-box" class="sidebar-main-header"
-      value="&sidebar.panels.label;"
+      value="&sidebar.panels.label;" persist="hidden state"
-      collapse="after" persist="state" onmouseup="PersistHeight();">
+      collapse="after" onmouseup="PersistHeight();">
-      <menu id="panel-picker" class="standard" 
+      <menu id="sidebar-panel-picker" class="standard" crop="right"
-        oncreate="SidebarBuildPickerPopup();" 
+        oncreate="SidebarBuildPickerPopup();"
         value="&sidebar.picker.label;" >
-        <menupopup id="panel-picker-popup" popupanchor="topright"
+        <menupopup id="sidebar-panel-picker-popup" popupanchor="topright"
           datasources="rdf:null"
           ref="urn:sidebar:current-panel-list">
           <template>
@@ -56,18 +56,24 @@
     <box id="sidebar-panels" align="vertical"
       datasources="rdf:null"
       ref="urn:sidebar:current-panel-list" 
-      persist='last-selected-panel height collapsed' flex="1*">
+      persist='last-selected-panel height collapsed hidden' flex="1*">
-      <template>
+      <template id="sidebar-template">
         <rule>
-          <box uri="rdf:*" class="texttab" align="left" 
+          <box uri="rdf:*" class="texttab sidebar-tab" align="left" 
             value="rdf:http://home.netscape.com/NC-rdf#title"
             onclick="SidebarSelectPanel(this)"
             exclude="rdf:http://home.netscape.com/NC-rdf#exclude"
             hidden="true"/>
-          <box uri="rdf:*" flex='1*' hidden="true">
+          <box uri="rdf:*" flex='1*' hidden="true" orient="vertical">
-            <iframe class="panel-frame" flex='1*' hidden="true"
+            <box flex='1'>
+              <image class="loading-image"/>
+              <text class="loading-image" value="&sidebar.loading.label;"/>
+            </box>
+            <iframe class="panel-frame" flex='1*'
+              hidden="true" collapsed="true"
               src="rdf:http://home.netscape.com/NC-rdf#content" />
-            <iframe class="panel-frame" flex='1*' hidden="true"
+            <iframe class="panel-frame" flex='1*'
+              hidden="true" collapsed="true"
               src="rdf:http://home.netscape.com/NC-rdf#content"
               type="content" />
           </box>
@@ -77,29 +83,35 @@
   </box>
 
   <!-- Splitter on the right of sidebar -->
-  <splitter id="sidebar-splitter" collapse="before" persist="state hidden" 
+  <splitter id="sidebar-splitter" collapse="before" persist="state hidden"
-    class="chromeclass-extrachrome"
+    class="chromeclass-extrachrome sidebar-splitter">
     onmouseup="SidebarFinishDrag();">
-    <box id="topright-cap" align="vertical">
+    <box id="sidebar-topright-cap" align="vertical">
       <spring flex="100%"/>
     </box>
     <spring flex="100%"/>
     <grippy onclick="SidebarExpandCollapse();"/>
     <spring flex="100%"/>
-    <box id="bottomright-cap" align="vertical">
+    <box id="sidebar-bottomright-cap" align="vertical">
     <spring flex="100%"/>
     </box>
   </splitter>
 
   <!-- View->Sidebar toggle -->
   <menupopup id="menu_View_Popup">
-      <menuitem id="menu_sidebar" type="checkbox" value="&sidebarCmd.label;"
+    <menuitem id="sidebar-menu" type="checkbox" value="&sidebarCmd.label;"
-                oncommand="SidebarShowHide();" position="2"/>
+      oncommand="SidebarShowHide();" position="2"/>
   </menupopup>
 
+  <!-- open/close grippy for status (not yet)
+  <box id="status-bar">
+    <image id="sidebar-status-grippy" position="1"/>
+  </box>  
+  -->
+
   <!-- Scripts go last, because they peek at state to tweak menus -->
   <html:script language="JavaScript"
-               src="chrome://communicator/content/sidebar/sidebarOverlay.js"/>
+    src="chrome://communicator/content/sidebar/sidebarOverlay.js"/>
 
 </overlay>