making directory viewer skinnable

xpfe/components/directory/MANIFEST-skin

@@ -1 +1,9 @@
 directory.css
+file-folder-closed.gif
+file-folder-closed-sel.gif
+file-folder-open.gif
+file-folder-open-sel.gif
+file-icon.gif
+file-icon-sel.gif
+
+

xpfe/components/directory/Makefile.in

@@ -45,7 +45,15 @@ CHROME_CONTENT	= \
 		directory.js \
 		$(NULL)
 
-CHROME_SKIN	= directory.css
+CHROME_SKIN	= \
+		directory.css \
+		file-folder-closed.gif \
+		file-folder-closed-sel.gif \
+		file-folder-open.gif \
+		file-folder-open-sel.gif \
+		file-icon.gif \
+		file-icon-sel.gif \
+		$(NULL)
 
 EXPORT_RESOURCE_LOCALE	= ${srcdir}/locale/en-US/directory.dtd
 

xpfe/components/directory/directory.css

@@ -26,61 +26,53 @@
 
 */
 
-@import url(chrome://communicator/skin/);
+/* Hide twisty for files */
+.treecell-indent[type="FILE"] > .tree-cell-twisty 
+  {
+    list-style-image      : none;
+  }
 
-/* Hide the twisty when type != DIRECTORY (XXX is there a '!=' in CSS?) */
-treeitem[type="FILE"] > treerow > treecell > .twisty {
-  list-style-image: none;
-}
+.treecell-filename
+  {
+    list-style-image      : url("chrome://communicator/skin/directory/file-icon.gif");
+  }  
+  
+treeitem[selected="true"] > treerow > .treecell-filename
+  {
+    list-style-image      : url("chrome://communicator/skin/directory/file-icon-sel.gif");
+  }
+  
+treeitem[container="true"] > treerow > .treecell-filename
+  {
+    list-style-image      : url("chrome://communicator/skin/directory/file-folder-closed.gif");
+  }
+treeitem[container="true"][selected="true"] > treerow > .treecell-filename
+  {
+    list-style-image      : url("chrome://communicator/skin/directory/file-folder-closed-sel.gif");
+  }
 
-/* Show an animated icon when a directory is loading */
-treeitem[type="DIRECTORY"][loading="true"] > treerow > treecell > .twisty {
-  list-style-image: url("resource:/res/rdf/loading.gif");
-}
-
-/* Show an animated icon when a symbolic link is loading */
-treeitem[type="SYMBOLIC-LINK"][loading="true"] > treerow > treecell > .twisty {
-  list-style-image: url("resource:/res/rdf/loading.gif");
-}
-
-/* Make a filenames look like links */
-treeitem > treerow > treecell.filename {
-  color: #666699;
-  text-decoration: underline;
-}
-
-treeitem > treerow > treecell.filename:hover {
-  color: #333366;
-  text-decoration: underline;
-}
-
-treeitem > treerow > treecell.filename:active {
-  color: #990000;
-  text-decoration: underline;
-}
+treeitem[container="true"][open="true"] > treerow > .treecell-filename
+  {
+    list-style-image      : url("chrome://communicator/skin/directory/file-folder-open.gif");
+  }
+treeitem[container="true"][open="true"][selected="true"] > treerow > .treecell-filename
+  {
+    list-style-image      : url("chrome://communicator/skin/directory/file-folder-open-sel.gif");
+  }
+  
+  
+/* Show an animated icon when a directory/symlink is loading */
+treeitem[type="SYMBOLIC-LINK"][loading="true"] > treerow > .treecell-filename > .tree-cell-twisty,
+treeitem[type="DIRECTORY"][loading="true"] > treerow > treecell > .tree-cell-twisty
+  {
+    list-style-image      : url("chrome://global/skin/loading.gif");
+  }
 
 /* Italicize a symbolic link and make it look like a link (it can be a dir or link) */
-treeitem[type="SYMBOLIC-LINK"] > treerow > treecell.filename {
-  color: inherit;
-  text-decoration: inherit;
-  font-style: italic;
-}
-
-treeitem[type="SYMBOLIC-LINK"] > treerow > treecell.filename:hover {
-  color: inherit;
-  text-decoration: inherit;
-  font-style: italic;
-}
-
-treeitem[type="SYMBOLIC-LINK"] > treerow > treecell.filename:active {
-  color: inherit;
-  text-decoration: inherit;
-  font-style: italic;
-}
-
-/* Override rule in xul.css that colors the selected row blue */
-treeitem[selected="true"] > treerow {
-  color: inherit;
-  background-color: inherit;
-}
+.treecell-filename[type="SYMBOLIC-LINK"] 
+  {
+    color                 : inherit;
+    text-decoration       : inherit;
+    font-style            : italic;
+  }
 

xpfe/components/directory/directory.js

@@ -54,36 +54,27 @@ function Init()
     	baseURI += "/";
     }
     debug("base URL = " + baseURI + "\n");
+    
     tree.setAttribute("ref", baseURI);
 }
 
 
 function OnClick(event)
 {
-    debug('OnClick()\n');
-
-    // This'll be set to 'twisty' on the twisty icon, and 'filename'
-    // if they're over the filename link.
-    var targetclass = event.target.getAttribute('class');
-    debug('targetclass = ' + targetclass + '\n');
-
-    if (targetclass != 'twisty') {
-        // The click'll have hit a cell, which is nested two below the
-        // treeitem.
-        var treeitem = event.target.parentNode.parentNode;
-
-        // This'll be set to 'FILE' for files and 'DIRECTORY' for
-        // directories.
-        var type = treeitem.getAttribute('type');
-
-        if (targetclass.indexOf('filename') >= 0)
-        {
-            var url = treeitem.getAttribute('id');
-
-            debug('navigating to ' + url + '\n');
-            window.content.location.href = url;
-        }
-    }
+    if( event.type == "click" &&
+        ( event.button != 1 || event.clickCount != 2 ) )
+      return false;
+    if( event.type == "keypress" && event.which != 13 )
+      return false;
+    
+    var tree = document.getElementById("tree");
+    if( tree.selectedItems.length == 1 ) 
+      {
+        var selectedItem = tree.selectedItems[0];
+    
+        //if( selectedItem.getAttribute( "type" ) == "FILE" )
+            window.content.location.href =  selectedItem.getAttribute('id');
+      }
 }
 
 

xpfe/components/directory/directory.xul

@@ -22,6 +22,7 @@
 
 -->
 
+<?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://communicator/skin/directory/directory.css" type="text/css"?>
 
 <!DOCTYPE window SYSTEM "chrome://communicator/locale/directory/directory.dtd">
@@ -31,17 +32,19 @@
   xmlns:html="http://www.w3.org/TR/REC-html40"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-  align="vertical">
+  orient="vertical">
 
-  <html:script src="directory.js" />
+  <script src="chrome://communicator/content/directory/directory.js"></script>
 
   <tree id="tree" datasources="rdf:files rdf:httpindex" flex="1" style="height:0px;" container="true" open="true" >
       <template>
         <treechildren>
-          <treeitem uri="..." type="rdf:http://home.netscape.com/NC-rdf#File-Type" persist="open"
+          <treeitem uri="..." persist="open"
+                    type="rdf:http://home.netscape.com/NC-rdf#File-Type" 
                     loading="rdf:http://home.netscape.com/NC-rdf#loading" >
             <treerow>
-              <treecell class="filename treecell-indent" indent="true"
+              <treecell class="treecell-filename treecell-indent" indent="true" 
+                        type="rdf:http://home.netscape.com/NC-rdf#File-Type"
                         value="rdf:http://home.netscape.com/NC-rdf#Name"/>
               <treecell value="rdf:http://home.netscape.com/NC-rdf#Content-Length" />
               <treecell value="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate" />
@@ -56,7 +59,7 @@
 
       <treehead>
         <treerow>
-          <treecell class="treecell-header sortDirectionIndicator" value="&directoryWindow.filename.label;"
+          <treecell class="treecell-header sortDirectionIndicator" value="&directoryWindow.filename.label;" 
           	onclick="return doSort('FilenameColumn');" observes="FilenameColumn" sortActive="true" sortDirection="ascending" />
           <treecell class="treecell-header sortDirectionIndicator" value="&directoryWindow.contentlength.label;"
           	onclick="return doSort('ContentLengthColumn');" observes="ContentLengthColumn" />
@@ -67,8 +70,7 @@
 
       <!-- Create the treechildren here so we can attach event handlers
            at this level (rather than at the tree level -->
-      <treechildren
-          onclick="OnClick(event);" />
+      <treechildren onclick="OnClick(event);" onkeypress="OnClick(event);"/>
 
   </tree>
 </window>

xpfe/components/directory/makefile.win

@@ -35,6 +35,12 @@ CHROME_CONTENT = \
 
 CHROME_SKIN = \
         .\directory.css \
+        .\file-folder-closed.gif \
+        .\file-folder-closed-sel.gif \
+        .\file-folder-open.gif \
+        .\file-folder-open-sel.gif \
+        .\file-icon.gif \
+        .\file-icon-sel.gif \
         $(NULL)
 
 MODULE=directory