GUAC-1172: Implement navigation via breadcrumbs - no more tree.

guacamole/src/main/webapp/app/client/controllers/clientController.js

@@ -28,6 +28,7 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
 
     // Required types
     var ManagedClientState = $injector.get('ManagedClientState');
+    var ManagedFilesystem  = $injector.get('ManagedFilesystem');
     var ScrollState        = $injector.get('ScrollState');
 
     // Required services
@@ -595,6 +596,45 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
         return !!$scope.filesystemMenuContents && $scope.menu.shown;
     };
 
+    /**
+     * Returns the full path to the given file as an ordered array of parent
+     * directories.
+     *
+     * @param {ManagedFilesystem.File} file
+     *     The file whose full path should be retrieved.
+     *
+     * @returns {ManagedFilesystem.File[]}
+     *     An array of directories which make up the hierarchy containing the
+     *     given file, in order of increasing depth.
+     */
+    $scope.getPath = function getPath(file) {
+
+        var path = [];
+
+        // Add all files to path in ascending order of depth
+        while (file && file.parent) {
+            path.unshift(file);
+            file = file.parent;
+        }
+
+        return path;
+
+    };
+
+    /**
+     * Changes the current directory of the given filesystem to the given
+     * directory.
+     *
+     * @param {ManagedFilesystem} filesystem
+     *     The filesystem whose current directory should be changed.
+     *
+     * @param {ManagedFilesystem.File} file
+     *     The directory to change to.
+     */
+    $scope.changeDirectory = function changeDirectory(filesystem, file) {
+        ManagedFilesystem.changeDirectory(filesystem, file);
+    };
+
     // Clean up when view destroyed
     $scope.$on('$destroy', function clientViewDestroyed() {
 

guacamole/src/main/webapp/app/client/directives/guacFileBrowser.js

@@ -79,22 +79,14 @@ angular.module('client').directive('guacFileBrowser', [function guacFileBrowser(
             };
 
             /**
-             * Toggles the expanded state of the given file between expanded
+             * Changes the currently-displayed directory to the given
-             * and collapsed, showing or hiding the file's children. This is
+             * directory.
-             * only applicable to directories.
              *
              * @param {ManagedFilesystem.File} file
-             *     The file to expand or collapse.
+             *     The directory to change to.
              */
-            $scope.toggleExpanded = function toggleExpanded(file) {
+            $scope.changeDirectory = function changeDirectory(file) {
-
+                ManagedFilesystem.changeDirectory($scope.filesystem, file);
-                // Toggle expanded state
-                file.expanded = !file.expanded;
-
-                // If now expanded, refresh contents
-                if (file.expanded)
-                    ManagedFilesystem.refresh($scope.filesystem, file);
-
             };
 
             /**

guacamole/src/main/webapp/app/client/styles/file-browser.css

@@ -27,10 +27,8 @@
     display: none;
 }
 
-/* Show directory contents if expanded */
+.file-browser .list-item .caption {
-
+    white-space: nowrap;
-.file-browser .directory.expanded > .children {
-    display: block;
 }
 
 /* Directory / file icons */
@@ -43,6 +41,6 @@
     background-image: url('images/folder-closed.png');
 }
 
-.file-browser .directory.expanded > .caption .icon {
+.file-browser .directory.previous > .caption .icon {
-    background-image: url('images/folder-open.png');
+    background-image: url('images/folder-up.png');
 }

guacamole/src/main/webapp/app/client/styles/filesystem-menu.css

@@ -46,3 +46,26 @@
     -webkit-align-items: center;
     align-items:         center;
 }
+
+#filesystem-menu .menu-body {
+    padding: 0.25em;
+}
+
+#filesystem-menu .header.breadcrumbs {
+    background: rgba(0,0,0,0.0125);
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+    box-shadow: none;
+    margin-top: 0;
+    border-top: none;
+}
+
+#filesystem-menu .header.breadcrumbs .breadcrumb {
+    padding: 0.5em;
+    font-size: 0.8em;
+    font-weight: bold;
+}
+
+#filesystem-menu .header.breadcrumbs .breadcrumb:hover {
+    background-color: #CDA;
+    cursor: pointer;
+}

guacamole/src/main/webapp/app/client/templates/client.html

@@ -174,6 +174,12 @@
                 <button class="back" ng-click="hideFilesystemMenu()">Back</button>
             </div>
 
+            <!-- Breadcrumbs -->
+            <div class="header breadcrumbs" ng-show="getPath(filesystemMenuContents.currentDirectory).length">
+                <div class="breadcrumb" ng-repeat="file in getPath(filesystemMenuContents.currentDirectory)"
+                        ng-click="changeDirectory(filesystemMenuContents, file)">{{file.name}}</div>
+            </div>
+
             <!-- Scrollable body -->
             <div class="menu-body">
                 <guac-file-browser client="client" filesystem="filesystemMenuContents"></guac-file-browser>

guacamole/src/main/webapp/app/client/templates/guacFileBrowser.html

@@ -32,27 +32,32 @@
         </div>
 
         <!-- Directory -->
-        <div class="directory" ng-show="isDirectory(file)" ng-class="{expanded: file.expanded}">
+        <div class="directory" ng-show="isDirectory(file)">
-            <div class="caption" ng-click="toggleExpanded(file)">
+            <div class="caption" ng-click="changeDirectory(file)">
                 <div class="icon"></div>
                 {{file.name}}
             </div>
-
-            <!-- Children of this directory -->
-            <div class="children">
-                <div class="list-item"
-                     ng-repeat="file in file.files | orderBy : 'name'"
-                     ng-include="'file.html'">
-            </div>
         </div>
 
     </script>
 
-    <!-- Root directory contents -->
+    <!-- Current directory contents -->
     <div class="filesystem-root">
+
+        <!-- Parent directory -->
+        <div class="list-item" ng-show="filesystem.currentDirectory.parent">
+            <div class="directory previous">
+                <div class="caption" ng-click="changeDirectory(filesystem.currentDirectory.parent)">
+                    <div class="icon"></div> ..
+                </div>
+            </div>
+        </div>
+
+        <!-- All other files -->
         <div class="list-item"
-             ng-repeat="file in filesystem.root.files | orderBy : 'name'"
+             ng-repeat="file in filesystem.currentDirectory.files | orderBy : 'name'"
              ng-include="'file.html'"></div>
+
     </div>
 
 </div>

guacamole/src/main/webapp/app/client/types/ManagedFilesystem.js

@@ -68,6 +68,14 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
          */
         this.root = template.root;
 
+        /**
+         * The current directory being viewed or manipulated within the
+         * filesystem.
+         *
+         * @type ManagedFilesystem.File
+         */
+        this.currentDirectory = template.currentDirectory || template.root;
+
     };
 
     /**
@@ -140,6 +148,7 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
                             mimetype   : mimetypes[name],
                             streamName : name,
                             type       : type,
+                            parent     : file,
                             name       : filename
                         });
 
@@ -216,6 +225,26 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
 
     };
 
+    /**
+     * Changes the current directory of the given filesystem, automatically
+     * refreshing the contents of that directory.
+     *
+     * @param {ManagedFilesystem} filesystem
+     *     The filesystem whose current directory should be changed.
+     *
+     * @param {ManagedFilesystem.File} file
+     *     The directory to change to.
+     */
+    ManagedFilesystem.changeDirectory = function changeDirectory(filesystem, file) {
+
+        // Refresh contents
+        ManagedFilesystem.refresh(filesystem, file);
+
+        // Set current directory
+        filesystem.currentDirectory = file;
+
+    };
+
     /**
      * A file within a ManagedFilesystem. Each ManagedFilesystem.File provides
      * sufficient information for retrieval or replacement of the file's
@@ -257,6 +286,14 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
          */
         this.name = template.name;
 
+        /**
+         * The parent directory of this file. In the case of the root
+         * directory, this will be null.
+         *
+         * @type ManagedFilesystem.File
+         */
+        this.parent = template.parent;
+
         /**
          * Map of all known files containined within this file by name. This is
          * only applicable to directories.
@@ -265,14 +302,6 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
          */
         this.files = template.files || {};
 
-        /**
-         * Whether this file is currently expanded, exposing any children
-         * within. This is only applicable to directories.
-         *
-         * @type Boolean
-         */
-        this.expanded = template.expanded || false;
-
     };
 
     /**