Add pathname collapse for long path in drive

www/drive/app-drive.less

@@ -861,37 +861,58 @@
             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;
-            .cp-app-drive-path-element {
-                display: inline-block;
-                height: @variables_bar-height;
-                line-height: @variables_bar-height;
-                font-size: @colortheme_app-font-size;
-                padding: 0 5px;
-                border: 0;
-                background: darken(@colortheme_drive-bg, 7%);
-                color: @colortheme_drive-color;
-                box-sizing: border-box;
-                transition: all 0.15s;
-                &.cp-app-drive-path-separator {
-                    color: #ccc;
-                }
-                &:hover {
-                    &:not(.cp-app-drive-path-separator) {
-                        background-color: darken(@colortheme_drive-bg, 15%);
-                        text-decoration: underline;
-                        cursor: pointer;
+            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;
+                    padding: 0 5px;
+                    border: 0;
+                    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-element {
-                        background-color: darken(@colortheme_drive-bg, 15%);
+                    
+                    &.cp-app-drive-path-collapse {
+                        position: relative;
                     }
-                    & ~ .cp-app-drive-path-element:not(.cp-app-drive-path-separator) {
-                        text-decoration: underline;
+                    
+                    &:hover {
+                        &:not(.cp-app-drive-path-separator) {
+                            background-color: darken(@colortheme_drive-bg, 15%);
+                            text-decoration: underline;
+                            cursor: pointer;
+                        }
+                        & ~ .cp-app-drive-path-element {
+                            background-color: darken(@colortheme_drive-bg, 15%);
+                        }
+                        & ~ .cp-app-drive-path-element:not(.cp-app-drive-path-separator) {
+                            text-decoration: underline;
+                        }
                     }
                 }
             }

www/drive/inner.js

@@ -1610,6 +1610,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;
@@ -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($container);
+                $span.text(name).prependTo($inner);
             });
+
+            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;