Merge pull request +7734 from c9/git-ui

[WIP] Git ui first iteration

configs/client-default.js

@@ -700,6 +700,13 @@ module.exports = function(options) {
             staticPrefix: staticPrefix + "/plugins/c9.ide.collab/notifications"
         },
     ];
+
+    if (options.standalone || options.local) {
+        plugins.push(
+            "plugins/c9.ide.scm/status",
+            "plugins/c9.ide.scm/editor"
+        );
+    }
     
     if (packaging || !devel) {
         plugins.push({

node_modules/ace/lib/ace/layer/marker.js

@@ -56,9 +56,7 @@ var Marker = function(parentEl) {
     };
 
     this.update = function(config) {
-        var config = config || this.config;
+        if (!config) return;
-        if (!config)
-            return;
 
         this.config = config;
 

node_modules/ace/lib/ace/lib/dom.js

@@ -46,7 +46,7 @@ exports.createElement = function(tag, ns) {
 };
 
 exports.hasCssClass = function(el, name) {
-    var classes = (el.className || "").split(/\s+/g);
+    var classes = (el.className + "").split(/\s+/g);
     return classes.indexOf(name) !== -1;
 };
 
@@ -84,7 +84,7 @@ exports.toggleCssClass = function(el, name) {
         add = false;
         classes.splice(index, 1);
     }
-    if(add)
+    if (add)
         classes.push(name);
 
     el.className = classes.join(" ");

node_modules/ace_tree/lib/ace_tree/mouse/default_handlers.js

@@ -76,7 +76,7 @@ function DefaultHandlers(mouseHandler) {
             title = provider.getTooltipText ? provider.getTooltipText(node) : provider.getText(node);
         }
         
-        if (editor.container.title != title)
+        if (!editor.tooltip && editor.container.title != title)
             editor.container.title = title;
         this.updateHoverState(node);
     };

node_modules/ace_tree/lib/ace_tree/tooltip.js

@@ -2,6 +2,7 @@ define(function(require, exports, module) {
 "use strict";
 var dom = require("ace/lib/dom");
 var lang = require("ace/lib/lang");
+var MouseEvent = require("./mouse/mouse_event").MouseEvent;
 dom.importCssString(".no-events * {pointer-events:none!important}");
 function Tooltip(tree) {
     this.tree = tree;
@@ -9,7 +10,8 @@ function Tooltip(tree) {
     this.tree.on("mousewheel", this.onMouseMove.bind(this, null));
     this.tree.renderer.scroller.addEventListener("mouseout", this.onMouseOut.bind(this));
     this.setUp();
- //   this.tree.renderer.on("afterRender", this.updateNodeClass.bind(this));
+    this.update = this.update.bind(this);
+    this.tree.renderer.on("afterRender", this.updateNodeClass.bind(this));
     this.clearDelayed = lang.delayedCall(this.onMouseMove.bind(this), 50);
 }
 
@@ -20,7 +22,7 @@ function Tooltip(tree) {
         this.root.className = container.className + " no-events";
         this.root.style.cssText = "border: 0px;margin: 0px;"
             + "position: absolute; bottom: initial; right: initial; width: auto; height: auto;"
-            + "overflow: visible;z-index: 1000000; white-space: pre;"
+            + "overflow: visible;z-index: 190000; white-space: pre;"
             + "pointer-events: none";
         // var color = dom.computedStyle(container).backgroundColor;
         // if (!color)
@@ -28,20 +30,24 @@ function Tooltip(tree) {
         document.body.appendChild(this.root);
         
     };
-    this.updateNode = function(treeNode) {
+    this.updateNode = function(treeDomNode) {
         if (this.node) {
             this.node.parentNode.removeChild(this.node);
             this.node = null;
         }
-        this.treeNode = treeNode;
+        this.treeDomNode = treeDomNode;
-        if (!treeNode) {
+        var rect = treeDomNode && treeDomNode.getBoundingClientRect();
+        var maxW = this.tree.renderer.layerConfig.width;
+        if (!rect || treeDomNode.lastChild.getBoundingClientRect().right <= maxW) {
             this.root.style.display = "none";
             return;
         }
+        // if (rect.width )
+        
         this.root.className = this.tree.container.className + " no-events";
         this.root.style.display = "";
-        var rect = treeNode.getBoundingClientRect();
+            
-        this.node = treeNode.cloneNode(true);
+        this.node = treeDomNode.cloneNode(true);
         this.node.style.margin = "0px";
         
         this.root.appendChild(this.node);
@@ -50,10 +56,11 @@ function Tooltip(tree) {
     };
     
     this.updateNodeClass = function() {
-        if (this.node && this.treeNode) {
+        if (this.node && this.treeDomNode) {
-            if (this.treeNode.parentNode == this.tree.renderer.$cellLayer.element)
+            if (this.treeDomNode.parentNode == this.tree.renderer.$cellLayer.element) {
-                this.node.className = this.treeNode.className;
+                this.node.className = this.treeDomNode.className;
-            else
+                this.root.className = this.tree.container.className + " no-events";
+            } else
                 this.updateNode(null);
         }
     };
@@ -67,20 +74,25 @@ function Tooltip(tree) {
     };
     
     this.onMouseMove = function(ev) {
-        var target = ev && ev.domEvent.target;
+        var node = ev && ev.getNode && ev.getNode();
-        while (target && !dom.hasCssClass(target, "tree-row")) {
+        if (node == this.treeNode)
-            target = target.parentElement;
-        }
-        if (target == this.treeNode)
             return;
-        this.updateNode(target);
+        this.treeNode = node;
-        if (target)
+        if (node)
             this.clearDelayed.cancel();
+        this.tree.renderer.on("afterRender", this.update);
     };
     
+    this.update = function() {
+        var renderer = this.tree.renderer;
+        renderer.off("afterRender", this.update);
+        var i = renderer.layerConfig.vRange.indexOf(this.treeNode);
+        var domNode = renderer.$cellLayer.getDomNodeAtIndex(i + renderer.layerConfig.firstRow);
+        this.updateNode(domNode, this.treeNode);
+    };
     
     this.onMouseOut = function(e) {
-        this.onMouseMove({domEvent: e})
+        this.onMouseMove();
     };
     this.onMouseOver = function(ev) {
         this.clearDelayed.schedule();

node_modules/ace_tree/lib/ace_tree/tree.js

@@ -105,6 +105,7 @@ var Tree = function(element, cellWidth, cellHeight) {
         }
 
         this.provider = provider;
+        this.model = provider; // TODO remove provider in favor of model
         if (provider) {
             this.renderer.setDataProvider(provider);
     

node_modules/ace_tree/lib/ace_tree/virtual_renderer.js

@@ -110,6 +110,7 @@ var VirtualRenderer = function(container, cellWidth, cellHeight) {
         h: 0
     };
     
+    this.$scrollIntoView = null;
 
     this.$loop = new RenderLoop(
         this.$renderChanges.bind(this),
@@ -142,6 +143,7 @@ var VirtualRenderer = function(container, cellWidth, cellHeight) {
      **/
     this.setDataProvider = function(provider) {
         this.provider = provider;
+        this.model = provider;
         
         if (this.scrollMargin.top && provider && provider.getScrollTop() <= 0)
             provider.setScrollTop(-this.scrollMargin.top);
@@ -300,6 +302,12 @@ var VirtualRenderer = function(container, cellWidth, cellHeight) {
                 // provider.setScrollTop(this.getScrollTop());
                 changes |= this.CHANGE_SCROLL;
             }
+            
+            if (this.$scrollIntoView)
+            if (this.$scrollIntoView.model == this.model) {
+                this.scrollCaretIntoView(this.$scrollIntoView.caret, this.$scrollIntoView.offset);
+                this.$scrollIntoView = null;
+            }
         }
 
         if (width && (force || size.width != width)) {
@@ -517,6 +525,9 @@ var VirtualRenderer = function(container, cellWidth, cellHeight) {
             this.$updateScrollBar();
 
         this._signal("afterRender");
+        
+        if (this.$scrollIntoView)
+            this.$scrollIntoView = null;
     };
 
     
@@ -688,6 +699,14 @@ var VirtualRenderer = function(container, cellWidth, cellHeight) {
      * Scrolls the Caret into the first visible area of the editor
      **/
     this.scrollCaretIntoView = function(caret, offset) {
+        this.$scrollIntoView = {
+            caret: caret,
+            offset: offset,
+            scrollTop: this.scrollTop,
+            model: this.model,
+            height: this.$size.scrollerHeight
+        };
+        
         // the editor is not visible
         if (this.$size.scrollerHeight === 0)
             return;
@@ -703,8 +722,7 @@ var VirtualRenderer = function(container, cellWidth, cellHeight) {
         var height = nodePos.height;
         var left = 0;
         var width = 0;
-            
+        
-
         if (this.scrollTop > top) {
             if (offset)
                 top -= offset * this.$size.scrollerHeight;
@@ -726,6 +744,8 @@ var VirtualRenderer = function(container, cellWidth, cellHeight) {
         } else if (scrollLeft + this.$size.scrollerWidth < left + width) {
             this.provider.setScrollLeft(Math.round(left + width - this.$size.scrollerWidth));
         }
+        
+        this.$scrollIntoView.scrollTop = this.scrollTop;
     };
 
     /**

package.json

@@ -106,7 +106,7 @@
         "c9.ide.run.build": "#ad45874c88",
         "c9.ide.run.debug.xdebug": "#3b1520f83d",
         "c9.ide.save": "#cc613b6ead",
-        "c9.ide.scm": "#undefined",
+        "c9.ide.scm": "#f3847917b8",
         "c9.ide.terminal.monitor": "#b52a3f2144",
         "c9.ide.theme.flat": "#2de8414db7",
         "c9.ide.threewaymerge": "#229382aa0b",

plugins/c9.ide.ace/ace.js

@@ -1672,6 +1672,11 @@ define(function(require, exports, module) {
              */
             defineSyntax: defineSyntax,
             
+            /**
+             * @ignore
+             */
+            getSyntaxForPath: getSyntaxForPath,
+            
             /**
              * @ignore this is used by statusbar
              */

plugins/c9.ide.layout.classic/less/c9-toolbarbutton-glossy.less

@@ -12,7 +12,7 @@
     .box-shadow(~"inset 1px 1px @{button-glossy-hover-shadow-color}, inset -1px -1px @{button-glossy-hover-shadow-color}");
     text-shadow: @button-glossy-hover-text-shadow;
 }
-.c9-toolbarbutton-glossyDown {
+.c9-toolbarbutton-glossyDown, .c9-toolbarbutton-glossyActive {
     border: 1px solid @button-glossy-active-border-color;
     .gradient(~"linear-gradient(top, @{button-glossy-active-background-1} 0%, @{button-glossy-active-background-2} 55%, @{button-glossy-active-background-3} 55%, @{button-glossy-active-background-4} 100%)");
     .box-shadow(~"inset 1px 1px @{button-glossy-active-shadow-color}, inset -1px -1px @{button-glossy-active-shadow-color}");

plugins/c9.ide.tree/tree.js

@@ -30,6 +30,7 @@ define(function(require, exports, module) {
         var showError = imports["dialog.error"].show;
         
         var Tree = require("ace_tree/tree");
+        var Tooltip = require("ace_tree/tooltip");
         var TreeEditor = require("ace_tree/edit");
         var markup = require("text!./tree.xml");
         
@@ -237,6 +238,8 @@ define(function(require, exports, module) {
             tree.setDataProvider(fsCache.model);
             tree.setOption("enableDragDrop", true);
             
+            // tree.tooltip = new Tooltip(tree);
+            
             fsCache.model.$indentSize = 12;
             fsCache.model.getIconHTML = function(node) {
                 var icon = node.isFolder ? "folder" : util.getFileIcon(node.label);

plugins/c9.ide.ui/lib/flexbox.js

@@ -203,7 +203,8 @@ apf.vbox = function(struct, tagName) {
                 
                 var nodes = this.childNodes;
                 for (var i = 0, l = nodes.length; i < l; i++) {
-                    if ((node = nodes[i]).nodeFunc != apf.NODE_VISIBLE || !node.$amlLoaded) //|| node.visible === false 
+                    var node = nodes[i];
+                    if (node.nodeFunc != apf.NODE_VISIBLE || !node.$amlLoaded) //|| node.visible === false 
                         continue;
 
                     node.$ext.style.textAlign = apf.getStyle(node.$ext, "textAlign") || "left";

plugins/c9.vfs.standalone/www/places.html

@@ -22,7 +22,8 @@ var places = {
     Ace: {
         kitchen_sink: ["/static/lib/ace/kitchen-sink.html", "/../lib/ace/test/tests.html"],
         tree: "/static/lib/ace_tree/demo.html",
-        list: "/static/lib/ace_tree/list_demo.html"
+        list: "/static/lib/ace_tree/list_demo.html",
+        diff: "/static/plugins/c9.ide.scm/diff/index.html"
     },
     Treehugger: {
         test: "/static/lib/treehugger/test.html"