bug 134345 - sidebar button. r=sgehani, sr=jag

themes/classic/communicator/sidebar/sidebar.css

@@ -75,7 +75,7 @@
   color: -moz-FieldText;
 }
 
-.iframe-panel {
+.iframe-panel, .browser-sidebar {
   border-left: 1px solid ThreeDHighlight;
   border-bottom: 1px solid ThreeDShadow;
   border-right: 1px solid ThreeDShadow;

themes/classic/navigator/navigator.css

@@ -355,3 +355,9 @@
 #home-button:hover:active {
   list-style-image: url("chrome://communicator/skin/bookmarks/home-active.gif");
 }
+
+#PersonalToolbar > .toolbar-prefix {
+  border-left: 1px solid ThreeDHighlight;
+  border-top: 1px solid ThreeDHighlight;
+  border-bottom: 1px solid ThreeDShadow;
+}

themes/modern/communicator/sidebar/sidebar.css

@@ -48,15 +48,21 @@
 
 /* ::::: sidebar header ::::: */
 
-.sidebarheader-main {
+.sidebar-header-text {
-  -moz-binding: url("chrome://communicator/skin/sidebar/sidebarBindings.xml#sidebarheader") !important;
-  -moz-box-align: center;
-  border-top: 1px solid #DFE5EF;
-  border-left: 1px solid #DFE5EF;
-  padding: 3px 0px 2px 6px;
-  background-color: #B9C4D0;
   color: #000000;
   font-weight: bold;
+  -moz-box-align: center;
+}
+
+.sidebarheader-main {
+  -moz-binding: url("chrome://communicator/skin/sidebar/sidebarBindings.xml#sidebarheader") !important;
+  background-color: #B9C4D0;
+  background-image: url("chrome://communicator/skin/sidebar/sbar-top.gif");
+  background-repeat: no-repeat;
+}
+
+.sidebarheader-main[prefixhidden="false"] {
+  background-image: url("chrome://communicator/skin/sidebar/sbar-top-tabopen.gif");
 }
 
 /* ..... picker button ..... */
@@ -88,12 +94,10 @@
 #sidebar-close-button {
   margin: 0px 1px;
   -moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-image");
-  padding: 0px 2px 0px 4px;
+  padding: 4px 2px 4px 4px;
   list-style-image: url("chrome://global/skin/icons/closebox.gif");
 }
 
-
-
 /* ::::: loading info ::::: */
 
 .text-panel-loading {
@@ -117,6 +121,12 @@
   -moz-border-bottom-colors: #B9C4D0 #B9C4D0 #B9C4D0 #B9C4D0 #DAE3ED #96A7B8;
 }
 
+.browser-sidebar {
+  border-bottom: 6px solid;
+  -moz-border-bottom-colors: #B9C4D0 #B9C4D0 #B9C4D0 #B9C4D0 #DAE3ED #96A7B8;  
+}
+
+
 /* ::::: sidebar tabs ::::: */
 
 /* ..... normal tabs ..... */

themes/modern/global/toolbar.css

@@ -60,7 +60,6 @@ toolbar > .toolbar-holder {
   border-top: 1px solid #EEF0F3;
   border-right: 1px solid #86929E;
   border-bottom: 1px solid #86929E;
-  border-left: 1px solid #EEF0F3;
 }
 
 /* ::::: menubar ::::: */

themes/modern/jar.mn

@@ -57,6 +57,8 @@ modern.jar:
   skin/modern/communicator/search/search.css                       (communicator/search/search.css)
   skin/modern/communicator/alerts/alert.css                        (communicator/alerts/alert.css)
   skin/modern/communicator/sidebar/sidebarBindings.xml             (communicator/sidebar/sidebarBindings.xml)
+  skin/modern/communicator/sidebar/sbar-top.gif                    (communicator/sidebar/sbar-top.gif)
+  skin/modern/communicator/sidebar/sbar-top-tabopen.gif            (communicator/sidebar/sbar-top-tabopen.gif)
   skin/modern/communicator/sidebar/sbtab-rit-top-act.gif           (communicator/sidebar/sbtab-rit-top-act.gif)
   skin/modern/communicator/sidebar/sbtab-rit-btm-act.gif           (communicator/sidebar/sbtab-rit-btm-act.gif)
   skin/modern/communicator/sidebar/sbtab-rit-top.gif               (communicator/sidebar/sbtab-rit-top.gif)

themes/modern/navigator/navigator.css

@@ -49,6 +49,14 @@
   min-width: 0px;
 }
 
+toolbox {
+  border-bottom: none;
+}
+
+#appcontent {
+  border-top: 1px solid #494F5D;
+}
+
 #back-button {
   -moz-image-region: rect(0 41px 38px 0);
 }
@@ -472,12 +480,16 @@
   background: url("chrome://global/skin/toolbar/tb-mid.gif") #C7D0D9 repeat-x top;
 }
 
+#PersonalToolbar > .toolbar-prefix {
+  border-top: 1px solid #CED6DD;
+  border-left: 1px solid #DAE3ED;
+}
+
 #PersonalToolbar > toolbargrippy,
 #PersonalToolbar > .toolbar-holder {
   border-top: 1px solid #CED6DD;
   border-right: 1px solid #95A0AD;
   border-bottom: 1px solid #95A0AD;
-  border-left: 1px solid #DAE3ED;
 }
 
 #PersonalToolbar > toolbargrippy:hover:active {

xpfe/components/sidebar/resources/locale/en-US/sidebarOverlay.dtd

@@ -45,4 +45,5 @@
 
 <!ENTITY sidebar.pagenotfound.label  "This tab is not available right now.">
 <!ENTITY sidebar.close.tooltip       "Close Sidebar">
+<!ENTITY sidebar.open.tooltip        "Open Sidebar">
 

xpfe/components/sidebar/resources/sidebarOverlay.css

@@ -47,6 +47,11 @@
     overflow: auto;
 }
 
+.browser-sidebar {
+    min-width: 1px;  
+    min-height: 1px;
+}
+
 /*
  *    Sidebar and Panel title buttons
  */

xpfe/components/sidebar/resources/sidebarOverlay.js

@@ -767,17 +767,6 @@ function sidebar_overlay_init() {
         sidebar_panels_splitter.removeAttribute('hidden');
       }
 
-      // Add the user's current panel choices to the template builder,
-      // which will aggregate it with the other datasources that describe
-      // the individual panel's title, customize URL, and content URL.
-      var panels = document.getElementById('sidebar-panels');
-      panels.database.AddDataSource(RDF.GetDataSource(sidebarObj.datasource_uri));
-
-      debug("Adding observer to database.");
-      panels.database.AddObserver(panel_observer);
-
-      // XXX This is a hack to force re-display
-      panels.setAttribute('ref', sidebarObj.resource);
     }
     if (sidebar_is_collapsed()) {
       sidebarObj.collapsed = true;
@@ -795,22 +784,52 @@ function sidebar_overlay_destruct() {
     panels.database.RemoveObserver(panel_observer);
 }
 
+var gBusyOpeningDefault = false;
+
 function sidebar_open_default_panel(wait, tries) {
+  // check for making function reentrant
+  if (gBusyOpeningDefault)
+    return;
+  gBusyOpeningDefault = true;
+
+  var ds = RDF.GetDataSource(sidebarObj.datasource_uri);
+  var currentListRes = RDF.GetResource("urn:sidebar:current-panel-list");
+  var panelListRes = RDF.GetResource("http://home.netscape.com/NC-rdf#panel-list");
+  var container = ds.GetTarget(currentListRes, panelListRes, true);
+  if (container) {
+    // Add the user's current panel choices to the template builder,
+    // which will aggregate it with the other datasources that describe
+    // the individual panel's title, customize URL, and content URL.
     var panels = document.getElementById('sidebar-panels');
     
-  debug("sidebar_open_default_panel("+wait+","+tries+")");
+    var ds = RDF.GetDataSource(sidebarObj.datasource_uri);
+    panels.database.AddDataSource(ds);
 
-  // Make sure the sidebar exists before trying to refresh it.
+    debug("Adding observer to database.");
-  if (panels.childNodes.length <= 2) {
+    panels.database.AddObserver(panel_observer);
+
+    // XXX This is a hack to force re-display
+    panels.builder.rebuild();
+  } else {
     if (tries < 3) {
       // No children yet, try again later
-      setTimeout('sidebar_open_default_panel('+(wait*2)+','+(tries+1)+')',wait);
+      setTimeout('sidebar_open_default_panel(' + (wait*2) + ',' + (tries+1) + ')',wait);
+      gBusyOpeningDefault = false;
       return;
     } else {
       sidebar_fixup_datasource();
     }
   }
+
   sidebarObj.panels.refresh();
+  gBusyOpeningDefault = false;
+}
+
+function SidebarRebuild() {
+  sidebarObj.panels.initialized = false; // reset so panels are brought in view
+  var panels = document.getElementById("sidebar-panels");
+  panels.builder.rebuild();
+  sidebar_open_default_panel(100, 0);
 }
 
 //////////////////////////////////////////////////////////////
@@ -1034,13 +1053,6 @@ function SidebarReload() {
   sidebarObj.panels.refresh();
 }
  
-function SidebarRebuild() {
-  sidebarObj.panels.initialized = false; // reset so panels are brought in view
-  var panels = document.getElementById("sidebar-panels");
-  panels.builder.rebuild();
-  sidebar_open_default_panel(100, 0);
-}
-
 // Set up a lame hack to avoid opening two customize
 // windows on a double click.
 var gDisableCustomize = false;
@@ -1081,8 +1093,6 @@ function SidebarCustomize() {
   }
 }
 
-
-
 function BrowseMorePanels()
 {
   var url = '';
@@ -1117,10 +1127,12 @@ function SidebarExpandCollapse() {
     debug("Expanding the sidebar");
     sidebar_splitter.removeAttribute('state');
     sidebar_box.removeAttribute('collapsed');
+    SidebarSetButtonOpen(true);
   } else {
     debug("Collapsing the sidebar");
     sidebar_splitter.setAttribute('state', 'collapsed');
     sidebar_box.setAttribute('collapsed', 'true');
+    SidebarSetButtonOpen(false);
   }
 }
 
@@ -1165,6 +1177,7 @@ function SidebarShowHide() {
     sidebar_overlay_init();
     sidebar_menu_item.setAttribute('checked', 'true');
     tabs_menu.removeAttribute('hidden');
+    SidebarSetButtonOpen(true);
   } else {
     debug("Hiding the sidebar");
     var hide_everything = sidebar_panels_splitter.getAttribute('hidden') == 'true';
@@ -1179,6 +1192,7 @@ function SidebarShowHide() {
     sidebar_panels_splitter_box.setAttribute('collapsed', 'true');
     sidebar_menu_item.setAttribute('checked', 'false');
     tabs_menu.setAttribute('hidden', 'true');
+    SidebarSetButtonOpen(false);
   }
   // Immediately save persistent values
   document.persist('sidebar-title-box', 'hidden');
@@ -1460,6 +1474,10 @@ function persist_width() {
   // XXX Mini hack. Persist isn't working too well. Force the persist,
   // but wait until the width change has commited.
   setTimeout("document.persist('sidebar-box', 'width');",100);
+
+  var is_collapsed = document.getElementById('sidebar-box').
+                       getAttribute('collapsed') == 'true';
+  SidebarSetButtonOpen(!is_collapsed);
 }
 
 function SidebarFinishClick() {
@@ -1470,7 +1488,7 @@ function SidebarFinishClick() {
   // the sidebar-box gets the newly dragged width.
   setTimeout("persist_width()",100);
 
-  var is_collapsed = document.getElementById('sidebar-box').getAttribute('collapsed') == 'true' ? true : false;
+  var is_collapsed = document.getElementById('sidebar-box').getAttribute('collapsed') == 'true';
   debug("collapsed: " + is_collapsed);
   if (is_collapsed != sidebarObj.collapsed) {
     if (gMustInit)
@@ -1479,6 +1497,19 @@ function SidebarFinishClick() {
   }
 }
 
+function SidebarSetButtonOpen(aSidebarNowOpen)
+{
+  // change state so toolbar icon can be updated
+  var pt = document.getElementById("PersonalToolbar");
+  pt.setAttribute("prefixopen", aSidebarNowOpen);
+  
+  // set tooltip for toolbar icon
+  var header = document.getElementById("sidebar-title-box");
+  var tooltip = header.getAttribute(aSidebarNowOpen ? 
+                "tooltipclose" : "tooltipopen");
+  pt.setAttribute("prefixtooltip", tooltip);
+}
+
 function SidebarInitContextMenu(aMenu, aPopupNode)
 {
   var panel = sidebarObj.panels.get_panel_from_header_node(aPopupNode);

xpfe/components/sidebar/resources/sidebarOverlay.xul

@@ -21,6 +21,7 @@
  
 <?xml-stylesheet href="chrome://communicator/content/sidebar/sidebarOverlay.css" type="text/css"?> 
 <?xml-stylesheet href="chrome://global/skin/button.css" type="text/css"?> 
+<?xul-overlay href="chrome://navigator/content/navExtraOverlay.xul"?>
 
 <!DOCTYPE overlay [
 <!ENTITY % sidebarOverlayDTD SYSTEM "chrome://communicator/locale/sidebar/sidebarOverlay.dtd" >
@@ -63,7 +64,9 @@
       persist="collapsed">
       <sidebarheader id="sidebar-title-box" class="sidebarheader-main"
         label="&sidebar.panels.label;" persist="hidden" type="box"
-        collapse="after" onmouseup="PersistHeight();">
+        collapse="after" onmouseup="PersistHeight();" prefixhidden="true"
+        tooltipopen="&sidebar.open.tooltip;" 
+        tooltipclose="&sidebar.close.tooltip;">
         <toolbarbutton type="menu" id="sidebar-panel-picker" menubuttontype="sidebar-panels"
           onpopupshowing="SidebarBuildPickerPopup();"
           label="&sidebar.picker.label;" >

xpfe/global/resources/content/bindings/toolbar.xml

@@ -142,6 +142,8 @@
       <xul:toolbargrippy xbl:inherits="last-toolbar,hidden=grippyhidden"
                          tbattr="toolbar-grippy"
                          class="toolbar-grippy"/>
+      <xul:hbox class="toolbar-prefix" 
+                xbl:inherits="onclick=prefixonclick,tooltiptext=prefixtooltip,hidden=prefixhidden,prefixopen"/>
       <xul:hbox flex="1" class="toolbar-holder" align="center"
                 xbl:inherits="collapsed,last-toolbar,orient=tborient,align=tbalign,pack=tbpack">
         <children/>