Add latest changes from gitlab-org/gitlab@master

8 files changed, 307 insertions, 20 deletions

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index c8c3036812e..8af34dcb5cc 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -38,6 +38,7 @@ export default {
       'panelResizing',
       'currentActivityView',
       'renderWhitespaceInCode',
+      'editorTheme',
     ]),
     ...mapGetters([
       'currentMergeRequest',
@@ -85,6 +86,7 @@ export default {
     editorOptions() {
       return {
         renderWhitespace: this.renderWhitespaceInCode ? 'all' : 'none',
+        theme: this.editorTheme,
       };
     },
   },
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index 4c4166e11f5..a3450522697 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -7,6 +7,7 @@ import store from './stores';
 import router from './ide_router';
 import { parseBoolean } from '../lib/utils/common_utils';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
+import { DEFAULT_THEME } from './lib/themes';
 
 Vue.use(Translate);
 
@@ -51,6 +52,7 @@ export function initIde(el, options = {}) {
       this.setInitialData({
         clientsidePreviewEnabled: parseBoolean(el.dataset.clientsidePreviewEnabled),
         renderWhitespaceInCode: parseBoolean(el.dataset.renderWhitespaceInCode),
+        editorTheme: window.gon?.user_color_scheme || DEFAULT_THEME,
       });
     },
     methods: {
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index a0f689065aa..3d729463cb4 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -6,13 +6,14 @@ import DirtyDiffController from './diff/controller';
 import Disposable from './common/disposable';
 import ModelManager from './common/model_manager';
 import editorOptions, { defaultEditorOptions } from './editor_options';
-import gitlabTheme from './themes/gl_theme';
+import { themes } from './themes';
 import keymap from './keymap.json';
 import { clearDomElement } from '~/editor/utils';
 
-function setupMonacoTheme() {
-  monacoEditor.defineTheme(gitlabTheme.themeName, gitlabTheme.monacoTheme);
-  monacoEditor.setTheme('gitlab');
+function setupThemes() {
+  themes.forEach(theme => {
+    monacoEditor.defineTheme(theme.name, theme.data);
+  });
 }
 
 export default class Editor {
@@ -35,7 +36,7 @@ export default class Editor {
       ...options,
     };
 
-    setupMonacoTheme();
+    setupThemes();
 
     this.debouncedUpdate = _.debounce(() => {
       this.updateDimensions();
diff --git a/app/assets/javascripts/ide/lib/themes/dark.js b/app/assets/javascripts/ide/lib/themes/dark.js
new file mode 100644
index 00000000000..96aaa0cbb50
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/themes/dark.js
@@ -0,0 +1,268 @@
+/*
+
+https://github.com/brijeshb42/monaco-themes/blob/master/themes/Tomorrow-Night.json
+
+The MIT License (MIT)
+
+Copyright (c) Brijesh Bittu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+*/
+
+export default {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    {
+      foreground: '969896',
+      token: 'comment',
+    },
+    {
+      foreground: 'ced1cf',
+      token: 'keyword.operator.class',
+    },
+    {
+      foreground: 'ced1cf',
+      token: 'constant.other',
+    },
+    {
+      foreground: 'ced1cf',
+      token: 'source.php.embedded.line',
+    },
+    {
+      foreground: 'cc6666',
+      token: 'variable',
+    },
+    {
+      foreground: 'cc6666',
+      token: 'support.other.variable',
+    },
+    {
+      foreground: 'cc6666',
+      token: 'string.other.link',
+    },
+    {
+      foreground: 'cc6666',
+      token: 'string.regexp',
+    },
+    {
+      foreground: 'cc6666',
+      token: 'entity.name.tag',
+    },
+    {
+      foreground: 'cc6666',
+      token: 'entity.other.attribute-name',
+    },
+    {
+      foreground: 'cc6666',
+      token: 'meta.tag',
+    },
+    {
+      foreground: 'cc6666',
+      token: 'declaration.tag',
+    },
+    {
+      foreground: 'cc6666',
+      token: 'markup.deleted.git_gutter',
+    },
+    {
+      foreground: 'de935f',
+      token: 'constant.numeric',
+    },
+    {
+      foreground: 'de935f',
+      token: 'constant.language',
+    },
+    {
+      foreground: 'de935f',
+      token: 'support.constant',
+    },
+    {
+      foreground: 'de935f',
+      token: 'constant.character',
+    },
+    {
+      foreground: 'de935f',
+      token: 'variable.parameter',
+    },
+    {
+      foreground: 'de935f',
+      token: 'punctuation.section.embedded',
+    },
+    {
+      foreground: 'de935f',
+      token: 'keyword.other.unit',
+    },
+    {
+      foreground: 'f0c674',
+      token: 'entity.name.class',
+    },
+    {
+      foreground: 'f0c674',
+      token: 'entity.name.type.class',
+    },
+    {
+      foreground: 'f0c674',
+      token: 'support.type',
+    },
+    {
+      foreground: 'f0c674',
+      token: 'support.class',
+    },
+    {
+      foreground: 'b5bd68',
+      token: 'string',
+    },
+    {
+      foreground: 'b5bd68',
+      token: 'constant.other.symbol',
+    },
+    {
+      foreground: 'b5bd68',
+      token: 'entity.other.inherited-class',
+    },
+    {
+      foreground: 'b5bd68',
+      token: 'markup.heading',
+    },
+    {
+      foreground: 'b5bd68',
+      token: 'markup.inserted.git_gutter',
+    },
+    {
+      foreground: '8abeb7',
+      token: 'keyword.operator',
+    },
+    {
+      foreground: '8abeb7',
+      token: 'constant.other.color',
+    },
+    {
+      foreground: '81a2be',
+      token: 'entity.name.function',
+    },
+    {
+      foreground: '81a2be',
+      token: 'meta.function-call',
+    },
+    {
+      foreground: '81a2be',
+      token: 'support.function',
+    },
+    {
+      foreground: '81a2be',
+      token: 'keyword.other.special-method',
+    },
+    {
+      foreground: '81a2be',
+      token: 'meta.block-level',
+    },
+    {
+      foreground: '81a2be',
+      token: 'markup.changed.git_gutter',
+    },
+    {
+      foreground: 'b294bb',
+      token: 'keyword',
+    },
+    {
+      foreground: 'b294bb',
+      token: 'storage',
+    },
+    {
+      foreground: 'b294bb',
+      token: 'storage.type',
+    },
+    {
+      foreground: 'b294bb',
+      token: 'entity.name.tag.css',
+    },
+    {
+      foreground: 'ced2cf',
+      background: 'df5f5f',
+      token: 'invalid',
+    },
+    {
+      foreground: 'ced2cf',
+      background: '82a3bf',
+      token: 'meta.separator',
+    },
+    {
+      foreground: 'ced2cf',
+      background: 'b798bf',
+      token: 'invalid.deprecated',
+    },
+    {
+      foreground: 'ffffff',
+      token: 'markup.inserted.diff',
+    },
+    {
+      foreground: 'ffffff',
+      token: 'markup.deleted.diff',
+    },
+    {
+      foreground: 'ffffff',
+      token: 'meta.diff.header.to-file',
+    },
+    {
+      foreground: 'ffffff',
+      token: 'meta.diff.header.from-file',
+    },
+    {
+      foreground: '718c00',
+      token: 'markup.inserted.diff',
+    },
+    {
+      foreground: '718c00',
+      token: 'meta.diff.header.to-file',
+    },
+    {
+      foreground: 'c82829',
+      token: 'markup.deleted.diff',
+    },
+    {
+      foreground: 'c82829',
+      token: 'meta.diff.header.from-file',
+    },
+    {
+      foreground: 'ffffff',
+      background: '4271ae',
+      token: 'meta.diff.header.from-file',
+    },
+    {
+      foreground: 'ffffff',
+      background: '4271ae',
+      token: 'meta.diff.header.to-file',
+    },
+    {
+      foreground: '3e999f',
+      fontStyle: 'italic',
+      token: 'meta.diff.range',
+    },
+  ],
+  colors: {
+    'editor.foreground': '#C5C8C6',
+    'editor.background': '#1D1F21',
+    'editor.selectionBackground': '#373B41',
+    'editor.lineHighlightBackground': '#282A2E',
+    'editorCursor.foreground': '#AEAFAD',
+    'editorWhitespace.foreground': '#4B4E55',
+  },
+};
diff --git a/app/assets/javascripts/ide/lib/themes/gl_theme.js b/app/assets/javascripts/ide/lib/themes/gl_theme.js
deleted file mode 100644
index 439ae50448a..00000000000
--- a/app/assets/javascripts/ide/lib/themes/gl_theme.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-  themeName: 'gitlab',
-  monacoTheme: {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-      'editorLineNumber.foreground': '#CCCCCC',
-      'diffEditor.insertedTextBackground': '#ddfbe6',
-      'diffEditor.removedTextBackground': '#f9d7dc',
-      'editor.selectionBackground': '#aad6f8',
-      'editorIndentGuide.activeBackground': '#cccccc',
-    },
-  },
-};
diff --git a/app/assets/javascripts/ide/lib/themes/index.js b/app/assets/javascripts/ide/lib/themes/index.js
new file mode 100644
index 00000000000..6ed9f6679a4
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/themes/index.js
@@ -0,0 +1,15 @@
+import white from './white';
+import dark from './dark';
+
+export const themes = [
+  {
+    name: 'white',
+    data: white,
+  },
+  {
+    name: 'dark',
+    data: dark,
+  },
+];
+
+export const DEFAULT_THEME = 'white';
diff --git a/app/assets/javascripts/ide/lib/themes/white.js b/app/assets/javascripts/ide/lib/themes/white.js
new file mode 100644
index 00000000000..273bc783fc6
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/themes/white.js
@@ -0,0 +1,12 @@
+export default {
+  base: 'vs',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editorLineNumber.foreground': '#CCCCCC',
+    'diffEditor.insertedTextBackground': '#A0F5B420',
+    'diffEditor.removedTextBackground': '#f9d7dc20',
+    'editor.selectionBackground': '#aad6f8',
+    'editorIndentGuide.activeBackground': '#cccccc',
+  },
+};
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index 6488389977c..828cec3e141 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -1,4 +1,5 @@
 import { activityBarViews, viewerTypes } from '../constants';
+import { DEFAULT_THEME } from '../lib/themes';
 
 export default () => ({
   currentProjectId: '',
@@ -32,4 +33,5 @@ export default () => ({
   },
   clientsidePreviewEnabled: false,
   renderWhitespaceInCode: false,
+  editorTheme: DEFAULT_THEME,
 });