Bug 403140 ? Splitters in the bookmarks organizer should not be collapsable (for mak77@supereva.it, r=mano)

browser/components/places/content/organizer.css

@@ -29,8 +29,8 @@ button.commandButton {
 
 /* Edit Item Panel */
 
-#infoScrollbox[minimal="true"] #editBMPanel_descriptionRow,
-#infoScrollbox[minimal="true"] #editBMPanel_loadInSidebarCheckbox,
-#infoScrollbox[minimal="true"] #editBMPanel_keywordRow {
+#infoBox[minimal="true"] #editBMPanel_descriptionRow,
+#infoBox[minimal="true"] #editBMPanel_loadInSidebarCheckbox,
+#infoBox[minimal="true"] #editBMPanel_keywordRow {
   visibility: collapse;
 }

browser/components/places/content/places.js

@@ -564,27 +564,27 @@ var PlacesOrganizer = {
   function PO__detectAndSetDetailsPaneMinimalState(aNode) {
     /**
      * The details of simple folder-items (as opposed to livemarks) or the
-     * of livemark-children are not likely to fill the scrollbox anyway,
+     * of livemark-children are not likely to fill the infoPane anyway,
      * thus we remove the "More/Less" button and show all details.
      *
      * the wasminimal attribute here is used to persist the "more/less"
      * state in a bookmark->folder->bookmark scenario.
      */
-    var infoScrollbox = document.getElementById("infoScrollbox");
-    var scrollboxExpander = document.getElementById("infoScrollboxExpander");
+    var infoBox = document.getElementById("infoBox");
+    var infoBoxExpander = document.getElementById("infoBoxExpander");
     if ((PlacesUtils.nodeIsFolder(aNode) &&
          !PlacesUtils.nodeIsLivemarkContainer(aNode)) ||
         PlacesUtils.nodeIsLivemarkItem(aNode)) {
-      if (infoScrollbox.getAttribute("minimal") == "true")
-        infoScrollbox.setAttribute("wasminimal", "true");
-      infoScrollbox.removeAttribute("minimal");
-      scrollboxExpander.hidden = true;
+      if (infoBox.getAttribute("minimal") == "true")
+        infoBox.setAttribute("wasminimal", "true");
+      infoBox.removeAttribute("minimal");
+      infoBoxExpander.hidden = true;
     }
     else {
-      if (infoScrollbox.getAttribute("wasminimal") == "true")
-        infoScrollbox.setAttribute("minimal", "true");
-      infoScrollbox.removeAttribute("wasminimal");
-      scrollboxExpander.hidden = false;
+      if (infoBox.getAttribute("wasminimal") == "true")
+        infoBox.setAttribute("minimal", "true");
+      infoBox.removeAttribute("wasminimal");
+      infoBoxExpander.hidden = false;
     }
   },
 
@@ -609,11 +609,12 @@ var PlacesOrganizer = {
         focusedElement.blur();
     }
 
-    var contentTree = document.getElementById("placeContent");
+    var infoBox = document.getElementById("infoBox");
     var detailsDeck = document.getElementById("detailsDeck");
     detailsDeck.selectedIndex = 1;
-    var selectedNode = contentTree.selectedNode;
+    var selectedNode = this._content.selectedNode;
     if (selectedNode) {
+      infoBox.hidden = false;
       if (selectedNode.itemId != -1 &&
           !PlacesUtils.nodeIsSeparator(selectedNode)) {
         if (this._paneDisabled) {
@@ -642,6 +643,9 @@ var PlacesOrganizer = {
     }
     else {
       detailsDeck.selectedIndex = 0;
+      // The details deck has the height of its biggest child, so we hide the
+      // infoBox to allow it shrinking when there is no selection.
+      infoBox.hidden = true;
       var selectItemDesc = document.getElementById("selectItemDescription");
       var itemsCountLabel = document.getElementById("itemsCountText");
       var rowCount = this._content.treeBoxObject.view.rowCount;
@@ -692,17 +696,17 @@ var PlacesOrganizer = {
   },
 
   toggleAdditionalInfoFields: function PO_toggleAdditionalInfoFields() {
-    var infoScrollbox = document.getElementById("infoScrollbox");
-    var scrollboxExpander = document.getElementById("infoScrollboxExpander");
-    if (infoScrollbox.getAttribute("minimal") == "true") {
-      infoScrollbox.removeAttribute("minimal");
-      scrollboxExpander.label = scrollboxExpander.getAttribute("lesslabel");
-      scrollboxExpander.accessKey = scrollboxExpander.getAttribute("lessaccesskey");
+    var infoBox = document.getElementById("infoBox");
+    var infoBoxExpander = document.getElementById("infoBoxExpander");
+    if (infoBox.getAttribute("minimal") == "true") {
+      infoBox.removeAttribute("minimal");
+      infoBoxExpander.label = infoBoxExpander.getAttribute("lesslabel");
+      infoBoxExpander.accessKey = infoBoxExpander.getAttribute("lessaccesskey");
     }
     else {
-      infoScrollbox.setAttribute("minimal", "true");
-      scrollboxExpander.label = scrollboxExpander.getAttribute("morelabel");
-      scrollboxExpander.accessKey = scrollboxExpander.getAttribute("moreaccesskey");
+      infoBox.setAttribute("minimal", "true");
+      infoBoxExpander.label = infoBoxExpander.getAttribute("morelabel");
+      infoBoxExpander.accessKey = infoBoxExpander.getAttribute("moreaccesskey");
     }
   },
 

browser/components/places/content/places.xul

@@ -400,15 +400,15 @@
           onclick="PlacesOrganizer.onTreeClick(event);"
           seltype="single"
           persist="width"
-          width="200">
+          width="200"
+          minwidth="100"
+          maxwidth="400">
       <treecols>
         <treecol anonid="title" flex="1" primary="true" hideheader="true"/>
       </treecols>
       <treechildren flex="1"/>
     </tree>
-    <splitter id="splitter" collapse="before" persist="state">
-      <grippy/>
-    </splitter>
+    <splitter collapse="none" persist="state"></splitter>
     <vbox id="contentView" flex="4">
       <deck id="contentDeck" flex="1">
         <vbox id="defaultView" flex="1">
@@ -487,12 +487,9 @@
               </treecols>
               <treechildren flex="1"/>
             </tree>
-            <splitter id="contentSplitter" collapse="after" persist="state">
-              <grippy/>
-            </splitter>
-            <hbox persist="height" id="infoPane">
+            <hbox id="infoPane">
               <deck flex="1" id="detailsDeck">
-                <vbox align="center">
+                <vbox id="itemsCountBox" align="center">
                   <spacer flex="3"/>
                   <label id="itemsCountText"/>
                   <spacer flex="1"/>
@@ -501,10 +498,10 @@
                   </description>
                   <spacer flex="3"/>
                 </vbox>
-                <scrollbox id="infoScrollbox" minimal="true" orient="vertical" flex="1" style='overflow: auto;'>
+                <vbox id="infoBox" minimal="true">
                   <vbox id="editBookmarkPanelContent"/>
                   <hbox>
-                    <button type="image" id="infoScrollboxExpander"
+                    <button type="image" id="infoBoxExpander"
                             lesslabel="&detailsPane.less.label;"
                             lessaccesskey="&detailsPane.less.accesskey;"
                             morelabel="&detailsPane.more.label;"
@@ -515,7 +512,7 @@
                             observes="paneElementsBroadcaster"/>
                     <spacer flex="1"/>
                   </hbox>
-                </scrollbox>
+                </vbox>
               </deck>
             </hbox>
           </vbox>

browser/themes/gnomestripe/browser/places/organizer.css

@@ -79,6 +79,11 @@
   border: 0px;
 }
 
+#infoPane {
+  border-top: 1px solid ThreeDShadow;
+  padding: 5px;
+}
+
 /* Search Bar */
 #searchbar {
   margin: 6px -4px 0px 2px;

browser/themes/pinstripe/browser/places/organizer.css

@@ -178,26 +178,8 @@
   border: 0px;
 }
 
-#contentSplitter {
-  height: 10px !important;
-  min-height: 10px;
-  border-top: 1px solid #919191;
-  border-bottom: none;
-  background-color: #f0f0f0;
-  background-image: none;
-}
-
-#contentSplitter > grippy {
-  background-image: url('chrome://browser/skin/places/infoPaneGrippy.png');
-  background-position: center center;
-  height: 5px;
-}
-
-#contentSplitter > grippy:hover {
-  background-color: transparent;
-}
-
 #infoPane {
+  border-top: 1px solid #919191;
   background-color: #f0f0f0;
   padding: 10px;
 }
@@ -613,7 +595,7 @@ menulist[open="true"] > .menulist-label-box  .menulist-label {
 
 /* More/Less button */
 
-#infoScrollboxExpander {
+#infoBoxExpander {
   list-style-image: url("chrome://browser/skin/places/twisty-open.gif");
   -moz-appearance: none;
   margin: 0;
@@ -621,7 +603,7 @@ menulist[open="true"] > .menulist-label-box  .menulist-label {
   max-width: 0;
 }
 
-#infoScrollbox[minimal="true"] #infoScrollboxExpander {
+#infoBox[minimal="true"] #infoBoxExpander {
   list-style-image: url("chrome://browser/skin/places/twisty-closed.gif");
 }
 

browser/themes/winstripe/browser/places/organizer.css

@@ -2,29 +2,57 @@
 /* Toolbar */
 #placesToolbar {
   border: none;
+  min-height: 30px;
 }
 
 /* back & forward buttons */
 #back-button, #forward-button {
   list-style-image: url("chrome://browser/skin/Toolbar.png");
+  -moz-appearance: none;
+  padding: 0;
+  border: none;
+}
+
+#placesToolbar > toolbarbutton > image,
+#placesToolbar > toolbarbutton > label {
+  margin: 0;
+  padding: 0;
 }
 
 #back-button,
 #forward-button[chromedir="rtl"] {  
+  -moz-margin-start: 8px;
   -moz-image-region: rect(0px, 24px, 24px, 0px);
 }
+#back-button:not([disabled="true"]):hover,
+#forward-button:not([disabled="true"]):hover[chromedir="rtl"]{
+ -moz-image-region: rect(24px, 24px, 48px, 0px);
+}
 #back-button[disabled="true"],
 #forward-button[chromedir="rtl"][disabled="true"] {
- -moz-image-region: rect(48px, 24px, 72px, 0px);
+ -moz-image-region: rect(48px, 24px, 72px, 0px) !important;
+}
+#back-button:not([disabled="true"]):hover:active,
+#forward-button:not([disabled="true"]):hover:active[chromedir="rtl"]{
+ -moz-image-region: rect(96px, 24px, 120px, 0px);
 }
 
 #forward-button,
 #back-button[chromedir="rtl"] {
+  -moz-margin-end: 8px;
   -moz-image-region: rect(0px, 48px, 24px, 24px);
 }
+#forward-button:not([disabled="true"]):hover,
+#back-button:not([disabled="true"]):hover[chromedir="rtl"]{
+  -moz-image-region: rect(24px, 48px, 48px, 24px);
+}
 #forward-button[disabled="true"],
 #back-button[chromedir="rtl"][disabled="true"] {
- -moz-image-region: rect(48px, 48px, 72px, 24px);
+ -moz-image-region: rect(48px, 48px, 72px, 24px) !important;
+}
+#forward-button:not([disabled="true"]):hover:active,
+#back-button:not([disabled="true"]):hover:active[chromedir="rtl"]{
+  -moz-image-region: rect(96px, 48px, 120px, 24px);
 }
 
 /* Menu */
@@ -70,8 +98,16 @@
 }
 
 #splitter {
-  border: 0px;
+  border: none;
   width: 3px;
+  background-color: transparent;
+}
+
+#placesView > splitter {
+  width: 6px !important;
+  min-width: 6px;
+  border-left: 1px solid ThreeDShadow;
+  border-right: 1px solid ThreeDDarkShadow;
 }
 
 /* Place List, Place Content */
@@ -96,6 +132,11 @@
   margin: 6px -4px 0px 2px;
 }
 
+#infoPane {
+  border-top: 1px solid ThreeDShadow;
+  padding: 5px;
+}
+
 .textbox-input-closebutton {
   -moz-appearance: none;
   margin: 1px 2px 1px 1px;