Bug 413053 - Bookmark Dialogs: Align treeview and listview, r=dao r=dietrich ui-r=faaborg

2009-01-13 11:48:26 +01:00 · 2009-01-13 11:48:26 +01:00 · bfad8159aa
--- a/browser/components/places/content/bookmarkProperties.js
+++ b/browser/components/places/content/bookmarkProperties.js
@ -372,13 +372,11 @@ var BookmarkPropertiesPanel = {
    };

    if (!this._element("tagsRow").collapsed) {
-      this._element("tagsSelector")
+      this._element("tagsSelectorRow")
          .addEventListener("DOMAttrModified", this._resizeListener, false);
    }
    if (!this._element("folderRow").collapsed) {
-      this._element("folderTree")
-          .addEventListener("DOMAttrModified", this._resizeListener, false);
-      this._element("newFolderBox")
+      this._element("folderTreeRow")
          .addEventListener("DOMAttrModified", this._resizeListener, false);
    }

@ -464,11 +462,9 @@ var BookmarkPropertiesPanel = {
    // gEditItemOverlay does not exist anymore here, so don't rely on it.
    // Calling removeEventListener with arguments which do not identify any
    // currently registered EventListener on the EventTarget has no effect.
-    this._element("tagsSelector")
+    this._element("tagsSelectorRow")
        .removeEventListener("DOMAttrModified", this._resizeListener, false);
-    this._element("folderTree")
-        .removeEventListener("DOMAttrModified", this._resizeListener, false);
-    this._element("newFolderBox")
+    this._element("folderTreeRow")
        .removeEventListener("DOMAttrModified", this._resizeListener, false);
    this._element("locationField")
        .removeEventListener("input", this._inputListener, false);
--- a/browser/components/places/content/editBookmarkOverlay.js
+++ b/browser/components/places/content/editBookmarkOverlay.js
@ -88,7 +88,7 @@ var gEditItemOverlay = {
    this._element("tagsRow").collapsed = !this._uri ||
      this._hiddenRows.indexOf("tags") != -1 || isQuery;
    // Collapse the tag selector if the item does not accept tags.
-    if (!this._element("tagsSelector").collapsed &&
+    if (!this._element("tagsSelectorRow").collapsed &&
        this._element("tagsRow").collapsed)
      this.toggleTagsSelector();
    this._element("descriptionRow").collapsed =
@ -514,12 +514,13 @@ var gEditItemOverlay = {
  uninitPanel: function EIO_uninitPanel(aHideCollapsibleElements) {
    if (aHideCollapsibleElements) {
      // hide the folder tree if it was previously visible
-      if (!this._folderTree.collapsed)
+      var folderTreeRow = this._element("folderTreeRow");
+      if (!folderTreeRow.collapsed)
        this.toggleFolderTreeVisibility();

      // hide the tag selector if it was previously visible
-      var tagsSelector = this._element("tagsSelector");
-      if (!tagsSelector.collapsed)
+      var tagsSelectorRow = this._element("tagsSelectorRow");
+      if (!tagsSelectorRow.collapsed)
        this.toggleTagsSelector();
    }

@ -748,12 +749,12 @@ var gEditItemOverlay = {

  toggleFolderTreeVisibility: function EIO_toggleFolderTreeVisibility() {
    var expander = this._element("foldersExpander");
-    if (!this._folderTree.collapsed) {
+    var folderTreeRow = this._element("folderTreeRow");
+    if (!folderTreeRow.collapsed) {
      expander.className = "expander-down";
      expander.setAttribute("tooltiptext",
                            expander.getAttribute("tooltiptextdown"));
-      this._folderTree.collapsed =
-        this._element("newFolderBox").collapsed = true;
+      folderTreeRow.collapsed = true;
      this._element("chooseFolderSeparator").hidden =
        this._element("chooseFolderMenuItem").hidden = false;
    }
@ -761,8 +762,7 @@ var gEditItemOverlay = {
      expander.className = "expander-up"
      expander.setAttribute("tooltiptext",
                            expander.getAttribute("tooltiptextup"));
-      this._folderTree.collapsed =
-        this._element("newFolderBox").collapsed = false;
+      folderTreeRow.collapsed = false;

      // XXXmano: Ideally we would only do this once, but for some odd reason,
      // the editable mode set on this tree, together with its collapsed state
@ -844,7 +844,8 @@ var gEditItemOverlay = {
    }

    // Update folder-tree selection
-    if (!this._folderTree.collapsed) {
+    var folderTreeRow = this._element("folderTreeRow");
+    if (!folderTreeRow.collapsed) {
      var selectedNode = this._folderTree.selectedNode;
      if (!selectedNode ||
          PlacesUtils.getConcreteItemId(selectedNode) != container)
@ -907,7 +908,8 @@ var gEditItemOverlay = {

  _rebuildTagsSelectorList: function EIO__rebuildTagsSelectorList() {
    var tagsSelector = this._element("tagsSelector");
-    if (tagsSelector.collapsed)
+    var tagsSelectorRow = this._element("tagsSelectorRow");
+    if (tagsSelectorRow.collapsed)
      return;

    while (tagsSelector.hasChildNodes())
@ -929,12 +931,13 @@ var gEditItemOverlay = {

  toggleTagsSelector: function EIO_toggleTagsSelector() {
    var tagsSelector = this._element("tagsSelector");
+    var tagsSelectorRow = this._element("tagsSelectorRow");
    var expander = this._element("tagsSelectorExpander");
-    if (tagsSelector.collapsed) {
+    if (tagsSelectorRow.collapsed) {
      expander.className = "expander-up";
      expander.setAttribute("tooltiptext",
                            expander.getAttribute("tooltiptextup"));
-      tagsSelector.collapsed = false;
+      tagsSelectorRow.collapsed = false;
      this._rebuildTagsSelectorList();

      // This is a no-op if we've added the listener.
@ -944,7 +947,7 @@ var gEditItemOverlay = {
      expander.className = "expander-down";
      expander.setAttribute("tooltiptext",
                            expander.getAttribute("tooltiptextdown"));
-      tagsSelector.collapsed = true;
+      tagsSelectorRow.collapsed = true;
    }
  },

--- a/browser/components/places/content/editBookmarkOverlay.xul
+++ b/browser/components/places/content/editBookmarkOverlay.xul
@ -49,6 +49,10 @@
  <vbox id="editBookmarkPanelContent">
    <broadcaster id="paneElementsBroadcaster"/>

+    <hbox id="editBMPanel_selectionCount" hidden="true" pack="center">
+      <label id="editBMPanel_itemsCountText"/>
+    </hbox>
+
    <grid id="editBookmarkPanelGrid" flex="1">
      <columns>
        <column/>
@ -112,63 +116,61 @@
          <label value="&editBookmarkOverlay.folder.label;"
                 control="editBMPanel_folderMenuList"
                 observes="paneElementsBroadcaster"/>
-          <menulist id="editBMPanel_folderMenuList"
-                    class="folder-icon"
-                    oncommand="gEditItemOverlay.onFolderMenuListCommand(event);"
-                    observes="paneElementsBroadcaster">
-            <menupopup>
-              <!-- Static item for special folders -->
-              <menuitem id="editBMPanel_toolbarFolderItem"
-                        class="menuitem-iconic folder-icon"/>
-              <menuitem id="editBMPanel_bmRootItem"
-                        class="menuitem-iconic folder-icon"/>
-              <menuitem id="editBMPanel_unfiledRootItem"
-                        class="menuitem-iconic folder-icon"/>
-              <menuseparator id="editBMPanel_chooseFolderSeparator"/>
-              <menuitem id="editBMPanel_chooseFolderMenuItem"
-                        label="&editBookmarkOverlay.choose.label;"
-                        class="menuitem-iconic folder-icon"/>
-              <menuseparator id="editBMPanel_foldersSeparator" hidden="true"/>
-            </menupopup>
-          </menulist>
-          <button id="editBMPanel_foldersExpander"
-                  class="expander-down"
-                  tooltiptext="&editBookmarkOverlay.foldersExpanderDown.tooltip;"
-                  tooltiptextdown="&editBookmarkOverlay.foldersExpanderDown.tooltip;"
-                  tooltiptextup="&editBookmarkOverlay.expanderUp.tooltip;"
-                  oncommand="gEditItemOverlay.toggleFolderTreeVisibility();"
-                  observes="paneElementsBroadcaster"/>
+          <hbox flex="1" align="center">
+            <menulist id="editBMPanel_folderMenuList"
+                      class="folder-icon"
+                      flex="1"
+                      oncommand="gEditItemOverlay.onFolderMenuListCommand(event);"
+                      observes="paneElementsBroadcaster">
+              <menupopup>
+                <!-- Static item for special folders -->
+                <menuitem id="editBMPanel_toolbarFolderItem"
+                          class="menuitem-iconic folder-icon"/>
+                <menuitem id="editBMPanel_bmRootItem"
+                          class="menuitem-iconic folder-icon"/>
+                <menuitem id="editBMPanel_unfiledRootItem"
+                          class="menuitem-iconic folder-icon"/>
+                <menuseparator id="editBMPanel_chooseFolderSeparator"/>
+                <menuitem id="editBMPanel_chooseFolderMenuItem"
+                          label="&editBookmarkOverlay.choose.label;"
+                          class="menuitem-iconic folder-icon"/>
+                <menuseparator id="editBMPanel_foldersSeparator" hidden="true"/>
+              </menupopup>
+            </menulist>
+            <button id="editBMPanel_foldersExpander"
+                    class="expander-down"
+                    tooltiptext="&editBookmarkOverlay.foldersExpanderDown.tooltip;"
+                    tooltiptextdown="&editBookmarkOverlay.foldersExpanderDown.tooltip;"
+                    tooltiptextup="&editBookmarkOverlay.expanderUp.tooltip;"
+                    oncommand="gEditItemOverlay.toggleFolderTreeVisibility();"
+                    observes="paneElementsBroadcaster"/>
+          </hbox>
        </row>

-        <tree id="editBMPanel_folderTree"
-              class="placesTree"
-              type="places"
-              height="150"
-              collapsed="true"
-              editable="true"
-              onselect="gEditItemOverlay.onFolderTreeSelect();"
-              hidecolumnpicker="true"
-              observes="paneElementsBroadcaster">
-          <treecols>
-            <treecol anonid="title" flex="1" primary="true" hideheader="true"/>
-          </treecols>
-          <treechildren flex="1"/>
-        </tree>
+        <row align="center" id="editBMPanel_folderTreeRow" collapsed="true">
+          <spacer/>
+          <vbox flex="1">
+            <tree id="editBMPanel_folderTree"
+                  class="placesTree"
+                  type="places"
+                  height="150"
+                  editable="true"
+                  onselect="gEditItemOverlay.onFolderTreeSelect();"
+                  hidecolumnpicker="true"
+                  observes="paneElementsBroadcaster">
+              <treecols>
+                <treecol anonid="title" flex="1" primary="true" hideheader="true"/>
+              </treecols>
+              <treechildren flex="1"/>
+            </tree>

-        <hbox id="editBMPanel_newFolderBox" collapsed="true">
-          <button label="&editBookmarkOverlay.newFolderButton.label;"
-                  id="editBMPanel_newFolderButton"
-                  accesskey="&editBookmarkOverlay.newFolderButton.accesskey;"
-                  oncommand="gEditItemOverlay.newFolder();"/>
-          <spacer flex="1"/>
-        </hbox>
-
-        <row align="center" id="editBMPanel_selectionCount" hidden="true">
-          <spacer flex="3"/>
-          <vbox id="editBMPanel_itemsCountBox" align="center">
-            <label id="editBMPanel_itemsCountText"/>
+            <hbox id="editBMPanel_newFolderBox">
+              <button label="&editBookmarkOverlay.newFolderButton.label;"
+                      id="editBMPanel_newFolderButton"
+                      accesskey="&editBookmarkOverlay.newFolderButton.accesskey;"
+                      oncommand="gEditItemOverlay.newFolder();"/>
+            </hbox>
          </vbox>
-          <spacer flex="3"/>
        </row>

        <row align="center" id="editBMPanel_tagsRow">
@ -176,30 +178,38 @@
                 accesskey="&editBookmarkOverlay.tags.accesskey;"
                 control="editBMPanel_tagsField"
                 observes="paneElementsBroadcaster"/>
-          <textbox id="editBMPanel_tagsField"
-                   type="autocomplete"
-                   class="padded"
-                   autocompletesearch="places-tag-autocomplete" 
-                   completedefaultindex="true"
-                   tabscrolling="true"
-                   showcommentcolumn="true"
-                   onblur="gEditItemOverlay.onTagsFieldBlur();"
-                   observes="paneElementsBroadcaster"
-                   emptytext="&editBookmarkOverlay.tagsEmptyDesc.label;"/>
-          <button id="editBMPanel_tagsSelectorExpander"
-                  class="expander-down"
-                  tooltiptext="&editBookmarkOverlay.tagsExpanderDown.tooltip;"
-                  tooltiptextdown="&editBookmarkOverlay.tagsExpanderDown.tooltip;"
-                  tooltiptextup="&editBookmarkOverlay.expanderUp.tooltip;"
-                  oncommand="gEditItemOverlay.toggleTagsSelector();"
-                  observes="paneElementsBroadcaster"/>
+          <hbox flex="1" align="center">
+            <textbox id="editBMPanel_tagsField"
+                     type="autocomplete"
+                     class="padded"
+                     flex="1"
+                     autocompletesearch="places-tag-autocomplete" 
+                     completedefaultindex="true"
+                     tabscrolling="true"
+                     showcommentcolumn="true"
+                     onblur="gEditItemOverlay.onTagsFieldBlur();"
+                     observes="paneElementsBroadcaster"
+                     emptytext="&editBookmarkOverlay.tagsEmptyDesc.label;"/>
+            <button id="editBMPanel_tagsSelectorExpander"
+                    class="expander-down"
+                    tooltiptext="&editBookmarkOverlay.tagsExpanderDown.tooltip;"
+                    tooltiptextdown="&editBookmarkOverlay.tagsExpanderDown.tooltip;"
+                    tooltiptextup="&editBookmarkOverlay.expanderUp.tooltip;"
+                    oncommand="gEditItemOverlay.toggleTagsSelector();"
+                    observes="paneElementsBroadcaster"/>
+          </hbox>
        </row>

-        <listbox id="editBMPanel_tagsSelector"
-                 height="150" collapsed="true"
-                 observes="paneElementsBroadcaster"/>
+        <row id="editBMPanel_tagsSelectorRow"
+             align="center"
+             collapsed="true">
+          <spacer/>
+          <listbox id="editBMPanel_tagsSelector"
+                   height="150"
+                   observes="paneElementsBroadcaster"/>
+        </row>

-        <row id="editBMPanel_keywordRow">
+        <row align="center" id="editBMPanel_keywordRow">
          <label value="&editBookmarkOverlay.keyword.label;"
                 accesskey="&editBookmarkOverlay.keyword.accesskey;"
                 control="editBMPanel_keywordField"
@ -219,12 +229,14 @@
                   onblur="gEditItemOverlay.onDescriptionFieldBlur();"
                   observes="paneElementsBroadcaster"/>
        </row>
-        <checkbox id="editBMPanel_loadInSidebarCheckbox"
-                  label="&editBookmarkOverlay.loadInSidebar.label;"
-                  accesskey="&editBookmarkOverlay.loadInSidebar.accesskey;"
-                  oncommand="gEditItemOverlay.onLoadInSidebarCheckboxCommand();"
-                  observes="paneElementsBroadcaster"/>
      </rows>
    </grid>
+
+    <checkbox id="editBMPanel_loadInSidebarCheckbox"
+              label="&editBookmarkOverlay.loadInSidebar.label;"
+              accesskey="&editBookmarkOverlay.loadInSidebar.accesskey;"
+              oncommand="gEditItemOverlay.onLoadInSidebarCheckboxCommand();"
+              observes="paneElementsBroadcaster"/>
+
  </vbox>
 </overlay>
--- a/browser/themes/gnomestripe/browser/browser.css
+++ b/browser/themes/gnomestripe/browser/browser.css
@ -1088,6 +1088,11 @@ toolbar[iconsize="small"] #paste-button[disabled="true"] {
  font-size: 130%;
 }

+/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+#editBMPanel_folderTree {
+  min-width: 300px;
+}
+
 /* Content area */
 #sidebar {
  background-color: Window;
--- a/browser/themes/gnomestripe/browser/places/editBookmarkOverlay.css
+++ b/browser/themes/gnomestripe/browser/places/editBookmarkOverlay.css
@ -76,9 +76,13 @@
 	list-style-image: url("chrome://global/skin/arrow/arrow-up-hov.gif");
 }

-#editBMPanel_tagsSelector[collapsed="true"],
-#editBMPanel_folderTree[collapsed="true"] {
-  display: none;
+#editBookmarkPanelContent {
+  min-width: 260px;
+}
+
+#editBMPanel_folderTree {
+  margin-top: 2px;
+  margin-bottom: 2px;
 }

 /**** name picker ****/
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@ -1088,9 +1088,8 @@ richlistitem[selected="true"][current="true"] > hbox > .ac-result-type-bookmark,
  border-top-color: #212121;
  border-bottom-color: #212121;
  padding: 0;
-  margin: 0;
-  -moz-margin-start: -8px;
-  -moz-margin-end: -8px;
+  margin-left: 4px;
+  margin-right: 4px;
  margin-bottom: 8px !important;
  height:  20px;
 }
@ -1174,10 +1173,9 @@ richlistitem[selected="true"][current="true"] > hbox > .ac-result-type-bookmark,
  border-bottom: 0 !important;
  border-left: 0 !important;
  -moz-border-top-colors: rgba(0,0,0,0.35) rgba(255,255,255,0.15);
-  margin: 0px;
-  -moz-margin-start: -8px;
-  -moz-margin-end: -8px;
  color: #ffffff !important;
+  /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+  min-width: 300px;
 }

 #editBookmarkPanel #editBMPanel_folderTree:focus {
@ -1218,7 +1216,6 @@ richlistitem[selected="true"][current="true"] > hbox > .ac-result-type-bookmark,
  border-left: 0 !important;
  -moz-border-top-colors: rgba(0,0,0,0.35) rgba(255,255,255,0.15);
  -moz-border-bottom-colors: rgba(255,255,255,0.30) rgba(0,0,0,0.35) ;
-  margin: 6px -8px !important;
  color: #ffffff !important;
 }

--- a/browser/themes/pinstripe/browser/places/editBookmarkOverlay.css
+++ b/browser/themes/pinstripe/browser/places/editBookmarkOverlay.css
@ -57,17 +57,12 @@
 	margin: 0 !important;
 }

-/**** folder tree ****/
-
-#editBMPanel_folderTree {
-   margin: 6px 0;
-}
-
 /**** expanders ****/

 .expander-up,
 .expander-down {
  -moz-appearance: none;
+  margin: 0;
  margin-left: 8px;
  padding: 0;
  min-width: 0;
@ -89,6 +84,14 @@
 	list-style-image: url("chrome://browser/skin/places/expander-open-active.png") !important;
 }

+#editBookmarkPanelContent {
+  min-width: 260px;
+}
+
+#editBMPanel_folderTree {
+  margin: 6px 4px 0 4px;
+}
+
 /**** name picker ****/

 /* Make the microsummary picker look like a regular textbox instead of 
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@ -1227,6 +1227,11 @@ statusbarpanel#statusbar-display {
  font-size: 130%;
 }

+/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+#editBMPanel_folderTree {
+  min-width: 300px;
+}
+
 /* ::::: content area ::::: */

 #sidebar {
--- a/browser/themes/winstripe/browser/places/editBookmarkOverlay.css
+++ b/browser/themes/winstripe/browser/places/editBookmarkOverlay.css
@ -57,6 +57,7 @@
 .expander-down {
  min-width: 0;
  margin: 0;
+  -moz-margin-end: 4px;
 }

 .expander-up > hbox,
@ -72,9 +73,13 @@
  list-style-image: url("chrome://global/skin/icons/expand.png");
 }

-#editBMPanel_tagsSelector[collapsed="true"],
-#editBMPanel_folderTree[collapsed="true"] {
-  display: none;
+#editBookmarkPanelContent {
+  min-width: 260px;
+}
+
+#editBMPanel_folderTree {
+  margin-top: 2px;
+  margin-bottom: 2px;
 }

 /**** name picker ****/