Add pathname collapse for long path in drive

www/drive/app-drive.less

@@ -861,14 +861,22 @@
             width: auto;
             overflow: hidden;
             white-space: nowrap;
-            display: flex;
-            flex-flow: row-reverse;
             flex-shrink: 1;
             min-width: 50px;
             max-width: 100%;
             text-align: left;
+            display: flex;
+            flex-direction: row;
+            
+            .cp-app-drive-path-inner {
+                display: flex;
+                flex-flow: row-reverse;
+                flex-grow: 1;
+
                 .cp-app-drive-path-element {
                     display: inline-block;
+                    flex-shrink: 0;
+                    max-width: 100%;
                     height: @variables_bar-height;
                     line-height: @variables_bar-height;
                     font-size: @colortheme_app-font-size;
@@ -877,10 +885,22 @@
                     background: darken(@colortheme_drive-bg, 7%);
                     color: @colortheme_drive-color;
                     box-sizing: border-box;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                     transition: all 0.15s;
+                    
+                    &:first-child {
+                        flex-shrink: 1;
+                    }
+                    
                     &.cp-app-drive-path-separator {
                         color: #ccc;
                     }
+                    
+                    &.cp-app-drive-path-collapse {
+                        position: relative;
+                    }
+                    
                     &:hover {
                         &:not(.cp-app-drive-path-separator) {
                             background-color: darken(@colortheme_drive-bg, 15%);
@@ -896,6 +916,7 @@
                     }
                 }
             }
+        }
 
         .cp-app-drive-toolbar-filler {
             flex: 1;

www/drive/inner.js

@@ -1611,6 +1611,60 @@ define([
             return title;
         }; */
         
+        var drivePathOverflowing = function () {
+            var $container = $(".cp-app-drive-path");
+            if ($container.length) {
+                $container.css("overflow", "hidden");
+                var overflown = $container[0].scrollWidth > $container[0].clientWidth;
+                $container.css("overflow", "");
+                return overflown;
+            }
+        };
+
+        var collapseDrivePath = function () {
+            var $container = $(".cp-app-drive-path-inner");
+            var $spanCollapse = $(".cp-app-drive-path-collapse");
+            $spanCollapse.css("display", "none");
+
+            var $pathElements = $container.find(".cp-app-drive-path-element");
+            $pathElements.not($spanCollapse).css("display", "");
+
+            if (drivePathOverflowing()) {
+                var collapseLevel = 0;
+                var removeOverflowElement = function () {
+                    if (drivePathOverflowing()) {
+                        if ($pathElements.length === 3) {
+                            return false;
+                        }
+                        collapseLevel++;
+                        if ($($pathElements.get(-2)).is(".cp-app-drive-path-separator")) {
+                            $($pathElements.get(-2)).css("display", "none");
+                            $pathElements = $pathElements.not($pathElements.get(-2));
+                        }
+                        $($pathElements.get(-2)).css("display", "none");
+                        $pathElements = $pathElements.not($pathElements.get(-2));
+                        return true;
+                    }
+                };
+
+                while (removeOverflowElement()) {}
+                $spanCollapse.css("display", "");
+                removeOverflowElement();
+
+                $spanCollapse.attr("title", getLastOpenedFolder().slice(0, collapseLevel).join(" / ").replace("root", ROOT_NAME));
+                $spanCollapse[0].onclick = function () {
+                    APP.displayDirectory(getLastOpenedFolder().slice(0, collapseLevel));
+                };
+            }
+        };
+
+        window.addEventListener("resize", collapseDrivePath);
+        var treeResizeObserver = new MutationObserver(collapseDrivePath);
+        treeResizeObserver.observe($("#cp-app-drive-tree")[0], {"attributes": true});
+        var toolbarButtonAdditionObserver = new MutationObserver(collapseDrivePath);
+        $(function () { toolbarButtonAdditionObserver.observe($("#cp-app-drive-toolbar")[0], {"childList": true, "subtree": true}); });
+
+
         var getPrettyName = function (name) {
             var pName;
             switch (name) {
@@ -1639,6 +1693,9 @@ define([
             var el = isVirtual ? undefined : manager.find(path);
             path = path[0] === SEARCH ? path.slice(0,1) : path;
 
+            var $inner = $('<div>', {'class': 'cp-app-drive-path-inner'});
+            $container.prepend($inner);
+            
             var skipNext = false; // When encountering a shared folder, skip a key in the path
             path.forEach(function (p, idx) {
                 if (skipNext) { skipNext = false; return; }
@@ -1671,13 +1728,21 @@ define([
                     var $span2 = $('<span>', {
                         'class': 'cp-app-drive-path-element cp-app-drive-path-separator'
                     }).text(' / ');
-                    $container.prepend($span2);
+                    $inner.prepend($span2);
                 }
-
+                $span.text(name).prependTo($inner);
-                $span.text(name).prependTo($container);
             });
+
+            var $spanCollapse = $('<span>', {
+                'class': 'cp-app-drive-path-element cp-app-drive-path-collapse'
+            }).text(' ... ');
+            $inner.append($spanCollapse);
+            
+            collapseDrivePath();
         };
 
+        
+
         var createInfoBox = function (path) {
             var $box = $('<div>', {'class': 'cp-app-drive-content-info-box'});
             var msg;