Merge branch 'rs-remove-user-color-scheme-class' into 'master'

Apply syntax highlighting to fenced code blocks client-side

Instead of applying the syntax highlighting scheme class to these blocks
server-side, we use Javascript and Gon to apply the user's color scheme
(or the default) client-side.

This will make it easier to cache these blocks in the future because
they're no longer state-dependent.

See merge request !1203

15 files changed, 53 insertions, 41 deletions

diff --git a/app/assets/javascripts/syntax_highlight.coffee b/app/assets/javascripts/syntax_highlight.coffee
new file mode 100644
index 00000000000..510f15d1b49
--- /dev/null
+++ b/app/assets/javascripts/syntax_highlight.coffee
@@ -0,0 +1,9 @@
+# Applies a syntax highlighting color scheme CSS class to any element with the
+# `js-syntax-highlight` class
+#
+# ### Example Markup
+#
+#   <div class="js-syntax-highlight"></div>
+#
+$(document).on 'ready page:load', ->
+  $('.js-syntax-highlight').addClass(gon.user_color_scheme)
diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index 2674fde41ae..e5902597c4d 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -132,10 +132,6 @@ p.time {
   text-shadow: none;
 }
 
-.highlight_word {
-  background: #fafe3d;
-}
-
 .thin_area{
   height: 150px;
 }
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index c8cb18ec35f..8323a8598ec 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -21,6 +21,12 @@ pre.code.highlight.dark,
     background-color: #557 !important;
   }
 
+  // Search result highlight
+  span.highlight_word {
+    background: #ffe792;
+    color: #000000;
+  }
+
   .hll { background-color: #373b41 }
   .c { color: #969896 } /* Comment */
   .err { color: #cc6666 } /* Error */
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index 001e8b31020..e8381674336 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -21,6 +21,12 @@ pre.code.monokai,
     background-color: #49483e !important;
   }
 
+  // Search result highlight
+  span.highlight_word {
+    background: #ffe792;
+    color: #000000;
+  }
+
   .hll { background-color: #49483e }
   .c { color: #75715e } /* Comment */
   .err { color: #960050; background-color: #1e0010 } /* Error */
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index f5b827e7c02..bd41480aefb 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -21,6 +21,11 @@ pre.code.highlight.solarized-dark,
     background-color: #174652 !important;
   }
 
+  // Search result highlight
+  span.highlight_word {
+    background: #094554;
+  }
+
   /* Solarized Dark
 
   For use with Jekyll and Pygments
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index 6b44c00c305..4cc62863870 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -21,6 +21,11 @@ pre.code.highlight.solarized-light,
     background-color: #ddd8c5 !important;
   }
 
+  // Search result highlight
+  span.highlight_word {
+    background: #eee8d5;
+  }
+
   /* Solarized Light
 
   For use with Jekyll and Pygments
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index a52ffc971d1..e0edfb80b42 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -21,6 +21,11 @@ pre.code.highlight.white,
     background-color: #f8eec7 !important;
   }
 
+  // Search result highlight
+  span.highlight_word {
+    background: #fafe3d;
+  }
+
   .hll { background-color: #f8f8f8 }
   .c { color: #999988; font-style: italic; }
   .err { color: #a61717; background-color: #e3d2d2; }
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index ef1170e16da..cb1cf13d34d 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -192,11 +192,12 @@ class ApplicationController < ActionController::Base
   end
 
   def add_gon_variables
+    gon.api_version            = API::API.version
+    gon.default_avatar_url     = URI::join(Gitlab.config.gitlab.url, ActionController::Base.helpers.image_path('no_avatar.png')).to_s
     gon.default_issues_tracker = Project.new.default_issue_tracker.to_param
-    gon.api_version = API::API.version
-    gon.relative_url_root = Gitlab.config.gitlab.relative_url_root
-    gon.default_avatar_url = URI::join(Gitlab.config.gitlab.url, ActionController::Base.helpers.image_path('no_avatar.png')).to_s
-    gon.max_file_size = current_application_settings.max_attachment_size;
+    gon.max_file_size          = current_application_settings.max_attachment_size
+    gon.relative_url_root      = Gitlab.config.gitlab.relative_url_root
+    gon.user_color_scheme      = Gitlab::ColorSchemes.for_user(current_user).css_class
 
     if current_user
       gon.current_user_id = current_user.id
diff --git a/app/helpers/gitlab_markdown_helper.rb b/app/helpers/gitlab_markdown_helper.rb
index eb3f72a307d..114730eb948 100644
--- a/app/helpers/gitlab_markdown_helper.rb
+++ b/app/helpers/gitlab_markdown_helper.rb
@@ -58,7 +58,7 @@ module GitlabMarkdownHelper
       @options = options
 
       # see https://github.com/vmg/redcarpet#darling-i-packed-you-a-couple-renderers-for-lunch
-      rend = Redcarpet::Render::GitlabHTML.new(self, user_color_scheme_class, options)
+      rend = Redcarpet::Render::GitlabHTML.new(self, options)
 
       # see https://github.com/vmg/redcarpet#and-its-like-really-simple-to-use
       @markdown = Redcarpet::Markdown.new(rend, MARKDOWN_OPTIONS)
diff --git a/app/helpers/preferences_helper.rb b/app/helpers/preferences_helper.rb
index ea774e28ecf..7f1b6a69926 100644
--- a/app/helpers/preferences_helper.rb
+++ b/app/helpers/preferences_helper.rb
@@ -1,25 +1,5 @@
 # Helper methods for per-User preferences
 module PreferencesHelper
-  COLOR_SCHEMES = {
-    1 => 'white',
-    2 => 'dark',
-    3 => 'solarized-light',
-    4 => 'solarized-dark',
-    5 => 'monokai',
-  }
-  COLOR_SCHEMES.default = 'white'
-
-  # Helper method to access the COLOR_SCHEMES
-  #
-  # The keys are the `color_scheme_ids`
-  # The values are the `name` of the scheme.
-  #
-  # The preview images are `name-scheme-preview.png`
-  # The stylesheets should use the css class `.name`
-  def color_schemes
-    COLOR_SCHEMES.freeze
-  end
-
   # Maps `dashboard` values to more user-friendly option text
   DASHBOARD_CHOICES = {
     projects: 'Your Projects (default)',
@@ -50,12 +30,11 @@ module PreferencesHelper
   end
 
   def user_application_theme
-    theme = Gitlab::Themes.by_id(current_user.try(:theme_id))
-    theme.css_class
+    Gitlab::Themes.for_user(current_user).css_class
   end
 
-  def user_color_scheme_class
-    COLOR_SCHEMES[current_user.try(:color_scheme_id)] if defined?(current_user)
+  def user_color_scheme
+    Gitlab::ColorSchemes.for_user(current_user).css_class
   end
 
   def prefer_readme?
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 1134317ee06..aa0361a0a1b 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -22,11 +22,11 @@
     .panel-heading
       Syntax highlighting theme
     .panel-body
-      - color_schemes.each do |color_scheme_id, color_scheme|
+      - Gitlab::ColorSchemes.each do |scheme|
         = label_tag do
-          .preview= image_tag "#{color_scheme}-scheme-preview.png"
-          = f.radio_button :color_scheme_id, color_scheme_id
-          = color_scheme.tr('-_', ' ').titleize
+          .preview= image_tag "#{scheme.css_class}-scheme-preview.png"
+          = f.radio_button :color_scheme_id, scheme.id
+          = scheme.name
 
   .panel.panel-default
     .panel-heading
diff --git a/app/views/search/results/_blob.html.haml b/app/views/search/results/_blob.html.haml
index 58f58eff54d..0fe8a3b490a 100644
--- a/app/views/search/results/_blob.html.haml
+++ b/app/views/search/results/_blob.html.haml
@@ -7,4 +7,4 @@
         %strong
           = blob.filename
     .file-content.code.term
-      = render 'shared/file_highlight', blob: blob, first_line_number: blob.startline, user_color_scheme_class: 'white'
+      = render 'shared/file_highlight', blob: blob, first_line_number: blob.startline
diff --git a/app/views/search/results/_snippet_blob.html.haml b/app/views/search/results/_snippet_blob.html.haml
index 95099853918..9a4f9fb9485 100644
--- a/app/views/search/results/_snippet_blob.html.haml
+++ b/app/views/search/results/_snippet_blob.html.haml
@@ -23,7 +23,7 @@
                 .nothing-here-block Empty file
       - else
         .file-content.code
-          %div.highlighted-data{class: user_color_scheme_class}
+          %div.highlighted-data{ class: user_color_scheme }
             .line-numbers
               - snippet_blob[:snippet_chunks].each do |snippet|
                 - unless snippet[:data].empty?
diff --git a/app/views/search/results/_wiki_blob.html.haml b/app/views/search/results/_wiki_blob.html.haml
index c03438eb952..f5859481d46 100644
--- a/app/views/search/results/_wiki_blob.html.haml
+++ b/app/views/search/results/_wiki_blob.html.haml
@@ -7,4 +7,4 @@
         %strong
           = wiki_blob.filename
     .file-content.code.term
-      = render 'shared/file_highlight', blob: wiki_blob, first_line_number: wiki_blob.startline, user_color_scheme_class: 'white'
+      = render 'shared/file_highlight', blob: wiki_blob, first_line_number: wiki_blob.startline
diff --git a/app/views/shared/_file_highlight.html.haml b/app/views/shared/_file_highlight.html.haml
index d6a2e177da1..57c3aff3e18 100644
--- a/app/views/shared/_file_highlight.html.haml
+++ b/app/views/shared/_file_highlight.html.haml
@@ -1,4 +1,4 @@
-.file-content.code{class: user_color_scheme_class}
+.file-content.code.js-syntax-highlight{ class: user_color_scheme }
   .line-numbers
     - if blob.data.present?
       - blob.data.lines.each_index do |index|