Bug fix: Folder picker panel width not set on Mac and Linux (issue #3)

aecreations · May 19, 2018 · 889e404 · 889e404
1 parent 1039ca5
commit 889e404
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 30 deletions.
diff --git a/src/chrome/content/new.xul b/src/chrome/content/new.xul
@@ -22,18 +22,6 @@
   <stringbundle id="ae-clippings-strings" 
    src="chrome://clippings/locale/clippings.properties"/>
 
-  <popupset>
-    <panel id="folder-picker">
-      <tree id="folder-tree" flex="1" hidecolumnpicker="true" seltype="single"
-       onselect="chooseFolder()">
-        <treecols>
-          <treecol id="all-folders" flex="1" primary="true"
-           hideheader="true" sortActive="true" sortDirection="natural"/>
-        </treecols>
-      </tree>
-    </panel>
-  </popupset>
-
   <label value="&clippingName.label;" accesskey="&clippingName.accesskey;" control="clipping-name"/>
   <textbox id="clipping-name" size="50" maxlength="64"
    onblur="validateClippingName(event)"/>
@@ -55,9 +43,19 @@
 
     <rows>
       <row align="center">
-        <button id="folder-menu-button" class="clippings-root" align="left"
-         label="&clippingsRoot.label;" crop="end" flex="1"
-	 oncommand="toggleFolderPicker()"/>
+        <button id="folder-menu-button" class="clippings-root" type="panel"
+         label="&clippingsRoot.label;" crop="end" flex="1" align="left"
+         oncommand="toggleFolderPicker()">
+	  <panel id="folder-picker">
+	    <tree id="folder-tree" flex="1" hidecolumnpicker="true" seltype="single"
+	     onselect="chooseFolder()">
+	      <treecols>
+		<treecol id="all-folders" flex="1" primary="true"
+		 hideheader="true" sortActive="true" sortDirection="natural"/>
+	      </treecols>
+	    </tree>
+	  </panel>
+        </button>
 
 	<button id="new-folder" tooltiptext="&newFolder.label;"
 	 oncommand="createFolder()"/>

diff --git a/src/chrome/content/newFolder.xul b/src/chrome/content/newFolder.xul
@@ -20,7 +20,17 @@
   <stringbundle id="ae-clippings-strings" 
    src="chrome://clippings/locale/clippings.properties"/>
 
-  <popupset>
+  <label value="&folderName.label;" accesskey="&folderName.accesskey;"
+   control="folder-name"/>
+  <textbox id="folder-name" size="32" onblur="validateFolderName(event)"/>
+
+  <separator class="thin"/>
+
+  <label value="&createAsSubf.label;" accesskey="&createAsSubf.accesskey;"
+   control="folder-menu-button"/>
+  <button id="folder-menu-button" class="clippings-root" type="panel"
+   label="&clippingsRoot.label;" width="128" crop="end" flex="1" align="left"
+   oncommand="toggleFolderPicker()">
     <panel id="folder-picker">
       <tree id="folder-tree" flex="1" hidecolumnpicker="true" seltype="single"
        onselect="chooseFolder()">
@@ -30,19 +40,7 @@
         </treecols>
       </tree>
     </panel>
-  </popupset>
-
-  <label value="&folderName.label;" accesskey="&folderName.accesskey;"
-   control="folder-name"/>
-  <textbox id="folder-name" size="32" onblur="validateFolderName(event)"/>
-
-  <separator class="thin"/>
-
-  <label value="&createAsSubf.label;" accesskey="&createAsSubf.accesskey;"
-   control="folder-menu-button"/>
-  <button id="folder-menu-button" class="clippings-root" align="left"
-   label="&clippingsRoot.label;" width="128" crop="end" flex="1"
-   oncommand="toggleFolderPicker()"/>
+  </button>
 
   <separator class="thin"/>
 

diff --git a/src/chrome/skin/all/new.css b/src/chrome/skin/all/new.css
@@ -40,6 +40,44 @@ menu[open="true"] {
   padding-right: 1px;
 }
 
+#folder-picker {
+  border: none;
+}
+
+#folder-tree {
+  height: 136px;
+  margin-left: 0;
+  margin-right: 0;
+  border: none;
+}
+
+/* Width of folder picker panel */
+#ae-clippings-new #folder-tree {
+  width: 30em;
+}
+
+#ae-clippings-new-folder #folder-tree {
+  width: 24em;
+}
+
+/* Styling for the folder tree */
+treechildren::-moz-tree-image {
+  padding-right: 3px;
+}
+
+treechildren::-moz-tree-image(container, open) {
+  list-style-image: url("chrome://clippings/skin/images/folder-open.svg");
+}
+
+treechildren::-moz-tree-image(container, closed),
+treechildren::-moz-tree-image(leaf) {
+  list-style-image: url("chrome://clippings/skin/images/folder.svg");
+}
+
+treechildren::-moz-tree-image(container, root) {
+  list-style-image: url("chrome://clippings/skin/images/clippings-root.svg");
+}
+
 #new-folder, #clipping-label, #clipping-label-2 {
   min-width: 10px;
   min-height: 16px;

diff --git a/src/chrome/skin/mac/new.css b/src/chrome/skin/mac/new.css
@@ -42,6 +42,44 @@ menu[open="true"] {
   padding-right: 1px;
 }
 
+#folder-picker {
+  border: none;
+}
+
+#folder-tree {
+  height: 136px;
+  margin-left: 0;
+  margin-right: 0;
+  border: none;
+}
+
+/* Width of folder picker panel */
+#ae-clippings-new #folder-tree {
+  width: 30em;
+}
+
+#ae-clippings-new-folder #folder-tree {
+  width: 24em;
+}
+
+/* Styling for the folder tree */
+treechildren::-moz-tree-image {
+  padding-right: 3px;
+}
+
+treechildren::-moz-tree-image(container, open) {
+  list-style-image: url("chrome://clippings/skin/images/folder-open.svg");
+}
+
+treechildren::-moz-tree-image(container, closed),
+treechildren::-moz-tree-image(leaf) {
+  list-style-image: url("chrome://clippings/skin/images/folder.svg");
+}
+
+treechildren::-moz-tree-image(container, root) {
+  list-style-image: url("chrome://clippings/skin/images/clippings-root.svg");
+}
+
 #new-folder, #clipping-label, #clipping-label-2 {
   min-width: 10px;
   min-height: 16px;

diff --git a/src/chrome/skin/win/new.css b/src/chrome/skin/win/new.css
@@ -45,13 +45,21 @@ menu[open="true"] {
 }
 
 #folder-tree {
-  width: 340px;  /* TO DO: Should inherit the width of the menu button */
   height: 136px;
   margin-left: 0;
   margin-right: 0;
   border: none;
 }
 
+/* Width of folder picker panel */
+#ae-clippings-new #folder-tree {
+  width: 30em;
+}
+
+#ae-clippings-new-folder #folder-tree {
+  width: 20em;
+}
+
 /* Styling for the folder tree */
 treechildren::-moz-tree-image {
   padding-right: 3px;