Merge branch 'ace-ventura' into 'master'

Ace ventura

## What does this MR do?

Makes Ace only load when it's actually necessary. The only two places it seems to be used is for Snippets and the File (Blob) Editor.

Before minification or compression, this takes the application.js down from 2.2MB to 1.6MB, and also removes two inline scripts :D

Compressed/Minified: master: 317KB/1.1MB, ace-ventura: 220KB/771KB

## Are there points in the code the reviewer needs to double check?

That this doesn't just completely break anything.

## Why was this MR needed?

Ace is a big library, this allows us to only load it when necessary.

## What are the relevant issue numbers?

#14372

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- Tests
  - [x] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !4914

app/assets/javascripts/application.js

@@ -26,8 +26,6 @@
 /*= require bootstrap/tooltip */
 /*= require bootstrap/popover */
 /*= require select2 */
-/*= require ace-rails-ap */
-/*= require ace/ext-searchbox */
 /*= require underscore */
 /*= require dropzone */
 /*= require mousetrap */

app/assets/javascripts/blob_edit/blob_edit_bundle.js

+/*= require_tree . */
+
+(function() {
+  $(function() {
+    var url = $(".js-edit-blob-form").data("relative-url-root");
+    url += $(".js-edit-blob-form").data("assets-prefix");
+
+    var blob = new EditBlob(url, $('.js-edit-blob-form').data('blob-language'));
+    new NewCommitForm($('.js-edit-blob-form'));
+  });
+
+}).call(this);

app/assets/javascripts/lib/ace.js

+/*= require ace-rails-ap */
+/*= require ace/ext-searchbox */

app/assets/javascripts/snippet/snippet_bundle.js

+/*= require_tree . */
+
+(function() {
+  $(function() {
+    var editor = ace.edit("editor")
+
+    $(".snippet-form-holder form").on('submit', function() {
+      $(".snippet-file-content").val(editor.getValue());
+    });
+  });
+
+}).call(this);

app/helpers/blob_helper.rb

@@ -217,4 +217,12 @@ module BlobHelper
   def gitlab_ci_ymls
     @gitlab_ci_ymls ||= Gitlab::Template::GitlabCiYmlTemplate.dropdown_names
   end
+
+  def blob_editor_paths
+    {
+      'relative-url-root' => Rails.application.config.relative_url_root,
+      'assets-prefix' => Gitlab::Application.config.assets.prefix,
+      'blob-language' => @blob && @blob.language.try(:ace_mode)
+    }
+  end
 end

app/views/projects/blob/edit.html.haml

 - page_title "Edit", @blob.path, @ref
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/ace.js')
+  = page_specific_javascript_tag('blob_edit/blob_edit_bundle.js')
 
 - if @conflict
   .alert.alert-danger
@@ -16,14 +19,10 @@
       = link_to '#preview', 'data-preview-url' => namespace_project_preview_blob_path(@project.namespace, @project, @id) do
         = editing_preview_title(@blob.name)
 
-  = form_tag(namespace_project_update_blob_path(@project.namespace, @project, @id), method: :put, class: 'form-horizontal js-quick-submit js-requires-input js-edit-blob-form') do
+  = form_tag(namespace_project_update_blob_path(@project.namespace, @project, @id), method: :put, class: 'form-horizontal js-quick-submit js-requires-input js-edit-blob-form', data: blob_editor_paths) do
     = render 'projects/blob/editor', ref: @ref, path: @path, blob_data: @blob.data
     = render 'shared/new_commit_form', placeholder: "Update #{@blob.name}"
     = hidden_field_tag 'last_commit_sha', @last_commit_sha
     = hidden_field_tag 'content', '', id: "file-content"
     = hidden_field_tag 'from_merge_request_id', params[:from_merge_request_id]
     = render 'projects/commit_button', ref: @ref, cancel_path: namespace_project_blob_path(@project.namespace, @project, @id)
-
-:javascript
-  blob = new EditBlob(gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}", "#{@blob.language.try(:ace_mode)}")
-  new NewCommitForm($('.js-edit-blob-form'))

app/views/projects/blob/new.html.haml

 - page_title "New File", @path.presence, @ref
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/ace.js')
+  = page_specific_javascript_tag('blob_edit/blob_edit_bundle.js')
 
 %h3.page-title
   New File
 
 .file-editor
-  = form_tag(namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post, class: 'form-horizontal js-new-blob-form js-quick-submit js-requires-input') do
+  = form_tag(namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post, class: 'form-horizontal js-edit-blob-form js-new-blob-form js-quick-submit js-requires-input', data: blob_editor_paths) do
     = render 'projects/blob/editor', ref: @ref
     = render 'shared/new_commit_form', placeholder: "Add new file"
 
     = hidden_field_tag 'content', '', id: 'file-content'
     = render 'projects/commit_button', ref: @ref,
               cancel_path: namespace_project_tree_path(@project.namespace, @project, @id)
-
-:javascript
-  blob = new EditBlob(gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}")
-  new NewCommitForm($('.js-new-blob-form'))

app/views/shared/snippets/_form.html.haml

+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/ace.js')
+  = page_specific_javascript_tag('snippet/snippet_bundle.js')
+
 .snippet-form-holder
   = form_for @snippet, url: url, html: { class: "form-horizontal snippet-form js-requires-input" } do |f|
     = form_errors(@snippet)
@@ -31,8 +35,3 @@
       - else
         = link_to "Cancel", snippets_path(@project), class: "btn btn-cancel"
 
-:javascript
-  var editor = ace.edit("editor");
-  $(".snippet-form-holder form").submit(function(){
-    $(".snippet-file-content").val(editor.getValue());
-  });

config/application.rb

@@ -88,6 +88,8 @@ module Gitlab
     config.assets.precompile << "diff_notes/diff_notes_bundle.js"
     config.assets.precompile << "boards/boards_bundle.js"
     config.assets.precompile << "boards/test_utils/simulate_drag.js"
+    config.assets.precompile << "blob_edit/blob_edit_bundle.js"
+    config.assets.precompile << "snippet/snippet_bundle.js"
     config.assets.precompile << "lib/utils/*.js"
     config.assets.precompile << "lib/*.js"
     config.assets.precompile << "u2f.js"

features/steps/project/source/browse_files.rb

@@ -44,7 +44,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   end
 
   step 'I should see its content with new lines preserved at end of file' do
-    expect(evaluate_script('blob.editor.getValue()')).to eq "Sample\n\n\n"
+    expect(evaluate_script('ace.edit("editor").getValue()')).to eq "Sample\n\n\n"
   end
 
   step 'I click link "Raw"' do
@@ -65,7 +65,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
 
   step 'I can edit code' do
     set_new_content
-    expect(evaluate_script('blob.editor.getValue()')).to eq new_gitignore_content
+    expect(evaluate_script('ace.edit("editor").getValue()')).to eq new_gitignore_content
   end
 
   step 'I edit code' do
@@ -74,7 +74,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   end
 
   step 'I edit code with new lines at end of file' do
-    execute_script('blob.editor.setValue("Sample\n\n\n")')
+    execute_script('ace.edit("editor").setValue("Sample\n\n\n")')
   end
 
   step 'I fill the new file name' do
@@ -378,7 +378,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   private
 
   def set_new_content
-    execute_script("blob.editor.setValue('#{new_gitignore_content}')")
+    execute_script("ace.edit('editor').setValue('#{new_gitignore_content}')")
   end
 
   # Content of the gitignore file on the seed repository.