From b4e95d0e4050ff5f4b84fd7b65fec7ae4b6d4991 Mon Sep 17 00:00:00 2001
From: wangqianliang <wangqianliang@live.com>
Date: Thu, 4 Apr 2019 13:34:28 +0800
Subject: [PATCH] fix(code/frontend): make blame view scrollable

---
 .../code/public/components/editor/editor.tsx  | 27 +++++++++++++------
 .../code/public/components/main/main.scss     |  5 ++++
 .../code/public/monaco/blame/blame_widget.ts  |  4 +--
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/code/public/components/editor/editor.tsx b/x-pack/plugins/code/public/components/editor/editor.tsx
index 8491aefbb0991..df209effb1420 100644
--- a/x-pack/plugins/code/public/components/editor/editor.tsx
+++ b/x-pack/plugins/code/public/components/editor/editor.tsx
@@ -48,6 +48,7 @@ export class EditorComponent extends React.Component<IProps> {
   private container: HTMLElement | undefined;
   private monaco: MonacoHelper | undefined;
   private editor: editorInterfaces.IStandaloneCodeEditor | undefined;
+  private lineDecorations: string[] | null = null;
 
   constructor(props: IProps, context: any) {
     super(props, context);
@@ -104,11 +105,11 @@ export class EditorComponent extends React.Component<IProps> {
         this.monaco.editor.updateOptions({ lineHeight: 38 });
       } else if (!this.props.showBlame) {
         this.destroyBlameWidgets();
-        this.monaco.editor.updateOptions({ lineHeight: 18 });
+        this.monaco.editor.updateOptions({ lineHeight: 18, lineDecorationsWidth: 16 });
       }
       if (prevProps.blames !== this.props.blames && this.props.showBlame) {
         this.loadBlame(this.props.blames);
-        this.monaco.editor.updateOptions({ lineHeight: 38 });
+        this.monaco.editor.updateOptions({ lineHeight: 38, lineDecorationsWidth: 316 });
       }
     }
   }
@@ -126,12 +127,7 @@ export class EditorComponent extends React.Component<IProps> {
           macModifier={[Modifier.meta]}
           winModifier={[Modifier.ctrl]}
         />
-        <div
-          tabIndex={0}
-          className="code-editor-container"
-          id="mainEditor"
-          style={{ paddingLeft: this.props.showBlame ? 300 : 0 }}
-        />
+        <div tabIndex={0} className="code-editor-container" id="mainEditor" />
         {this.renderReferences()}
       </EuiFlexItem>
     );
@@ -144,12 +140,27 @@ export class EditorComponent extends React.Component<IProps> {
     this.blameWidgets = blames.map((b, index) => {
       return new BlameWidget(b, index === 0, this.monaco!.editor!);
     });
+    if (!this.lineDecorations) {
+      this.lineDecorations = this.monaco!.editor!.deltaDecorations(
+        [],
+        [
+          {
+            range: new monaco.Range(1, 1, Infinity, 1),
+            options: { isWholeLine: true, linesDecorationsClassName: 'code-line-decoration' },
+          },
+        ]
+      );
+    }
   }
 
   public destroyBlameWidgets() {
     if (this.blameWidgets) {
       this.blameWidgets.forEach((bw: BlameWidget) => bw.destroy());
     }
+    if (this.lineDecorations) {
+      this.monaco!.editor!.deltaDecorations(this.lineDecorations!, []);
+      this.lineDecorations = null;
+    }
     this.blameWidgets = null;
   }
 
diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss
index bb9f844b581d6..e196f7ea786e9 100644
--- a/x-pack/plugins/code/public/components/main/main.scss
+++ b/x-pack/plugins/code/public/components/main/main.scss
@@ -279,3 +279,8 @@
   text-align: center;
   flex-shrink: 0;
 }
+
+.code-line-decoration {
+  border-right: $euiBorderThick;
+  width: 316px !important;
+}
diff --git a/x-pack/plugins/code/public/monaco/blame/blame_widget.ts b/x-pack/plugins/code/public/monaco/blame/blame_widget.ts
index df72e456f86d4..cf3b5993f21e3 100644
--- a/x-pack/plugins/code/public/monaco/blame/blame_widget.ts
+++ b/x-pack/plugins/code/public/monaco/blame/blame_widget.ts
@@ -58,8 +58,8 @@ export class BlameWidget implements Editor.IContentWidget {
   private update() {
     const { fontSize, lineHeight } = this.editor.getConfiguration().fontInfo;
     this.domNode.style.position = 'relative';
-    this.domNode.style.left = '-362px';
-    this.domNode.style.width = '300px';
+    this.domNode.style.left = '-332px';
+    this.domNode.style.width = '316px';
     this.domNode.style.fontSize = `${fontSize}px`;
     this.domNode.style.lineHeight = `${lineHeight}px`;
     const element = React.createElement(