Git diff list uses the perfect scroll bar now.

Signed-off-by: Jan Bicker <jan.bicker@typefox.io>

packages/git/src/browser/diff/git-diff-widget.tsx

@@ -16,15 +16,16 @@
 
 import { inject, injectable, postConstruct } from 'inversify';
 import URI from '@theia/core/lib/common/uri';
-import { StatefulWidget, SELECTED_CLASS, DiffUris } from '@theia/core/lib/browser';
+import { StatefulWidget, SELECTED_CLASS, DiffUris, Message } from '@theia/core/lib/browser';
 import { EditorManager, EditorOpenerOptions, EditorWidget, DiffNavigatorProvider, DiffNavigator } from '@theia/editor/lib/browser';
 import { GitFileChange, GitFileStatus, Git, WorkingDirectoryStatus } from '../../common';
 import { GitWatcher } from '../../common';
 import { GIT_RESOURCE_SCHEME } from '../git-resource';
 import { GitNavigableListWidget } from '../git-navigable-list-widget';
 import { GitFileChangeNode } from '../git-file-change-node';
-import { Message } from '@phosphor/messaging';
+import { Deferred } from '@theia/core/lib/common/promise-util';
 import * as React from 'react';
+import { MaybePromise } from '@theia/core/lib/common/types';
 
 // tslint:disable:no-null-keyword
 
@@ -41,6 +42,8 @@ export class GitDiffWidget extends GitNavigableListWidget<GitFileChangeNode> imp
 
     protected listView?: GitDiffListContainer;
 
+    protected deferredListContainer = new Deferred<HTMLElement>();
+
     @inject(Git) protected readonly git: Git;
     @inject(DiffNavigatorProvider) protected readonly diffNavigatorProvider: DiffNavigatorProvider;
     @inject(EditorManager) protected readonly editorManager: EditorManager;
@@ -67,6 +70,10 @@ export class GitDiffWidget extends GitNavigableListWidget<GitFileChangeNode> imp
         }));
     }
 
+    protected getScrollContainer(): MaybePromise<HTMLElement> {
+        return this.deferredListContainer.promise;
+    }
+
     protected get toRevision(): string | undefined {
         return this.options.range && this.options.range.toRevision;
     }
@@ -232,9 +239,12 @@ export class GitDiffWidget extends GitNavigableListWidget<GitFileChangeNode> imp
             ref={ref => this.listView = ref || undefined}
             id={this.scrollContainer}
             files={files}
-            addDiffListKeyListeners={this.addGitDiffListKeyListeners} />;
+            addDiffListKeyListeners={this.addGitDiffListKeyListeners}
+            setListContainer={this.setListContainer} />;
     }
 
+    protected setListContainer = (listContainerElement: HTMLDivElement) => this.deferredListContainer.resolve(listContainerElement);
+
     protected addGitDiffListKeyListeners = (id: string) => this.doAddGitDiffListKeyListeners(id);
     protected doAddGitDiffListKeyListeners(id: string): void {
         const container = document.getElementById(id);
@@ -400,6 +410,7 @@ export namespace GitDiffListContainer {
         id: string
         files: React.ReactNode[]
         addDiffListKeyListeners: (id: string) => void
+        setListContainer: (listContainer: HTMLDivElement) => void
     }
 }
 
@@ -413,6 +424,9 @@ export class GitDiffListContainer extends React.Component<GitDiffListContainer.P
 
     componentDidMount(): void {
         this.props.addDiffListKeyListeners(this.props.id);
+        if (this.listContainer) {
+            this.props.setListContainer(this.listContainer);
+        }
     }
 
     focus(): void {

packages/git/src/browser/git-navigable-list-widget.tsx

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { SELECTED_CLASS, Key } from '@theia/core/lib/browser';
+import { SELECTED_CLASS, Key, Widget } from '@theia/core/lib/browser';
 import { GitFileStatus, Repository, GitFileChange } from '../common';
 import URI from '@theia/core/lib/common/uri';
 import { GitRepositoryProvider } from './git-repository-provider';
@@ -61,11 +61,19 @@ export abstract class GitNavigableListWidget<T extends { selected?: boolean }> e
         (async () => {
             const selected = this.node.getElementsByClassName(SELECTED_CLASS)[0];
             if (selected) {
-                ElementExt.scrollIntoViewIfNeeded(this.node, selected);
+                const container = document.getElementById(this.scrollContainer);
+                if (container) {
+                    ElementExt.scrollIntoViewIfNeeded(container, selected);
+                }
             }
         })();
     }
 
+    protected onResize(msg: Widget.ResizeMessage): void {
+        super.onResize(msg);
+        this.update();
+    }
+
     protected getStatusCaption(status: GitFileStatus, staged?: boolean): string {
         return GitFileStatus.toString(status, staged);
     }

packages/git/src/browser/style/history.css

@@ -100,6 +100,7 @@
 
 .theia-git .git-diff-container .listContainer {
     flex: 1;
+    position: relative;
 }
 
 .theia-git .git-diff-container .listContainer .commitList {