View container layout changes

package.json

@@ -18,6 +18,7 @@
     "@types/sinon": "^2.3.5",
     "@types/temp": "^0.8.29",
     "@types/webdriverio": "^4.7.0",
+    "@types/uuid": "^3.4.3",
     "chai": "^4.1.0",
     "chai-string": "^1.4.0",
     "concurrently": "^3.5.0",
@@ -38,7 +39,7 @@
     "typedoc": "^0.15.0-0",
     "typedoc-plugin-external-module-map": "^1.0.0",
     "typescript": "^3.1.3",
-    "uuid": "^3.1.0",
+    "uuid": "^3.2.1",
     "wdio-mocha-framework": "0.6.4",
     "wdio-selenium-standalone-service": "0.0.12",
     "wdio-spec-reporter": "0.1.5",

packages/core/src/browser/frontend-application-module.ts

@@ -74,6 +74,8 @@ import { ResourceContextKey } from './resource-context-key';
 import { KeyboardLayoutService } from './keyboard/keyboard-layout-service';
 import { MimeService } from './mime-service';
 import { ApplicationShellMouseTracker } from './shell/application-shell-mouse-tracker';
+import { ViewContainer } from './view-container';
+import { Widget } from './widgets';
 
 export const frontendApplicationModule = new ContainerModule((bind, unbind, isBound, rebind) => {
     const themeService = ThemeService.get();
@@ -167,7 +169,7 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo
         bind(serviceIdentifier).toService(QuickCommandFrontendContribution)
     );
 
-    bind(QuickPickService).to(QuickPickServiceImpl).inSingletonScope().onActivation(({ container }, quickPickService) => {
+    bind(QuickPickService).to(QuickPickServiceImpl).inSingletonScope().onActivation(({ container }, quickPickService: QuickPickService) => {
         WebSocketConnectionProvider.createProxy(container, quickPickServicePath, quickPickService);
         return quickPickService;
     });
@@ -239,6 +241,22 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo
 
     bind(ApplicationShellMouseTracker).toSelf().inSingletonScope();
     bind(FrontendApplicationContribution).toService(ApplicationShellMouseTracker);
+
+    bind(ViewContainer.Services).toSelf();
+    bind(ViewContainer.Factory).toFactory(context => (...descriptors: ViewContainer.Factory.WidgetDescriptor[]) => {
+        const { container } = context;
+        const services = container.get(ViewContainer.Services);
+        const inputs: Array<{ widget: Widget, options?: ViewContainer.Factory.WidgetOptions }> = [];
+        for (const descriptor of descriptors) {
+            const { widget, options } = descriptor;
+            if (widget instanceof Widget) {
+                inputs.push({ widget, options });
+            } else {
+                inputs.push({ widget: container.get(widget), options });
+            }
+        }
+        return new ViewContainer(services, ...inputs);
+    });
 });
 
 export function bindMessageService(bind: interfaces.Bind): interfaces.BindingWhenOnSyntax<MessageService> {

packages/core/src/browser/index.ts

@@ -38,3 +38,4 @@ export * from './widget-open-handler';
 export * from './navigatable';
 export * from './diff-uris';
 export * from './core-preferences';
+export * from './view-container';

packages/core/src/browser/shell/side-panel-toolbar.ts

@@ -72,6 +72,7 @@ export class SidePanelToolbar extends Widget {
         this.titleContainer = document.createElement('div');
         this.titleContainer.classList.add('theia-sidepanel-title');
         this.titleContainer.classList.add('noWrapInfo');
+        this.titleContainer.classList.add('noselect');
         this.node.appendChild(this.titleContainer);
         this.node.classList.add('theia-sidepanel-toolbar');
         this.node.classList.add(`theia-${this.side}-side-panel`);

packages/core/src/browser/shell/split-panels.ts

@@ -19,7 +19,7 @@ import { SplitPanel, SplitLayout, Widget } from '@phosphor/widgets';
 
 export interface SplitPositionOptions {
     /** The side of the side panel that shall be resized. */
-    side: 'left' | 'right' | 'top' | 'bottom';
+    side?: 'left' | 'right' | 'top' | 'bottom';
     /** The duration in milliseconds, or 0 for no animation. */
     duration: number;
     /** When this widget is hidden, the animation is canceled. */
@@ -31,7 +31,7 @@ export interface MoveEntry extends SplitPositionOptions {
     index: number;
     started: boolean;
     ended: boolean;
-    targetSize: number;
+    targetSize?: number;
     targetPosition?: number;
     startPosition?: number;
     startTime?: number
@@ -45,6 +45,21 @@ export class SplitPositionHandler {
     private readonly splitMoves: MoveEntry[] = [];
     private currentMoveIndex: number = 0;
 
+    /**
+     * Set the position of a split handle asynchronously. This function makes sure that such movements
+     * are performed one after another in order to prevent the movements from overriding each other.
+     * When resolved, the returned promise yields the final position of the split handle.
+     */
+    setSplitHandlePosition(parent: SplitPanel, index: number, targetPosition: number, options: SplitPositionOptions): Promise<number> {
+        const move: MoveEntry = {
+            ...options,
+            parent, targetPosition, index,
+            started: false,
+            ended: false
+        };
+        return this.moveSplitPos(move);
+    }
+
     /**
      * Resize a side panel asynchronously. This function makes sure that such movements are performed
      * one after another in order to prevent the movements from overriding each other.
@@ -123,7 +138,7 @@ export class SplitPositionHandler {
     }
 
     protected startMove(move: MoveEntry, time: number): void {
-        if (move.targetPosition === undefined) {
+        if (move.targetPosition === undefined && move.targetSize !== undefined) {
             const { clientWidth, clientHeight } = move.parent.node;
             if (clientWidth && clientHeight) {
                 switch (move.side) {

packages/core/src/browser/source-tree/source-tree-widget.tsx

@@ -74,7 +74,7 @@ export class SourceTreeWidget extends TreeWidget {
         if (TreeSourceNode.is(model.root) && model.root.children.length === 0) {
             const { placeholder } = model.root.source;
             if (placeholder) {
-                return <div className='theia-tree-source-node-placeholder'>{placeholder}</div>;
+                return <div className='theia-tree-source-node-placeholder noselect'>{placeholder}</div>;
             }
         }
         return super.renderTree(model);

packages/core/src/browser/style/index.css

@@ -84,8 +84,7 @@ body {
 .theia-header {
   text-transform: uppercase;
   font-size: var(--theia-ui-font-size0);
-  font-weight: 800;
-  margin: 10px 0 5px 0;
+  font-weight: 450;
 }
 
 .p-Widget {

packages/core/src/browser/style/view-container.css

@@ -18,31 +18,102 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding-left: var(--theia-ui-padding);
 }
 
-.theia-view-container-part {
-    display: block;
+.theia-view-container > .p-SplitPanel {
+    height: 100%;
+    width: 100%;
+}
+
+.theia-view-container > .p-SplitPanel > .p-SplitPanel-child {
+    min-width: 50px;
+    min-height: 22px;
+}
+
+.theia-view-container > .p-SplitPanel > .p-SplitPanel-handle:after {
+    background-color: var(--theia-menu-color0);
+    min-height: 2px;
+    min-width: 2px
+}
+
+.theia-view-container > .p-SplitPanel > .p-SplitPanel-handle {
+    background-color: var(--theia-menu-color0);
+}
+
+.theia-view-container .part {
+    height: 100%;
 }
 
-.theia-view-container-part-head {
+.theia-view-container .part > .header {
     cursor: pointer;
     display: flex;
     align-items: center;
+    background: var(--theia-menu-color0);
+    line-height: 22px;
+    z-index: 10;
+}
+
+.theia-view-container .part > .header .theia-ExpansionToggle {
+    padding-left: 4px;
+}
+
+.theia-view-container > .p-SplitPanel[data-orientation='horizontal'] .part > .header .theia-ExpansionToggle::before {
+    display: none;
+    padding-left: 0px;
 }
 
-.theia-view-container-part-head .label {
+.theia-view-container > .p-SplitPanel[data-orientation='horizontal'] .part > .header .theia-ExpansionToggle {
+    padding-left: 0px;
+}
+
+.theia-view-container .part > .header .label {
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.theia-view-container-part-head .element {
+
+.theia-view-container .part > .header .element {
     min-width: 16px;
     min-height: 16px;
-    padding-left: calc(var(--theia-ui-padding)*2)
+    padding-left: calc(var(--theia-ui-padding)*2);
+    display: none;
+}
+
+.theia-view-container .part:hover > .header .element {
+    display: block;
+}
+
+.theia-view-container .part > .body {
+    height: 100%;
+    min-width: 50px;
+    min-height: 50px;
+}
+
+.theia-view-container .part > .body .theia-tree-source-node-placeholder {
+    padding-top: 4px;
+    height: 100%;
 }
 
-.theia-view-container-part-body {
+.theia-view-container .part:hover > .body {
     display: block;
 }
+
+.theia-view-container .part.drop-target {
+    background: rgba(33, 150, 243, 0.1);
+    border: var(--theia-border-width) dashed var(--theia-brand-color1);
+    transition-property: top, left, right, bottom;
+    transition-duration: 150ms;
+    transition-timing-function: ease;
+}
+
+.theia-view-container-drag-image {
+    background: var(--theia-menu-color0);
+    line-height: 22px;
+    position: absolute;
+    color: var(--theia-ui-font-color1);
+    text-transform: uppercase;
+    font-size: var(--theia-ui-font-size0);
+    font-weight: 500;
+    padding: 0 var(--theia-ui-padding) 0 var(--theia-ui-padding);
+}