Merge branch 'js-content-for' into 'master'

Re-implement page-specific JS in a better way.

## What does this MR do?

This rebuilds the way we do page-specific JavaScript assets for a few reasons:

- The current implementation does not work with Subresource Integrity (!4808)
- The current implementation doesn't allow caching of libraries because each page we hook up with this system will have a separate application.js. Meaning that for every page that uses Ace Editor, we'd have to load Ace Editor plus any GitLab-specific scripts in the same file, making local caching of just Ace Editor impossible.
- The current implementation is rather hacky.

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

That Sprockets doesn't choke on this when we use precompiled assets.

## What are the relevant issue numbers?

#14372

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [x] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [x] API support added
- Tests
  - [x] Added for this feature/bug
  - [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)

cc: @jschatz1 @pavelloz

Thanks to @pavelloz for his example implementation which was very useful.

See merge request !4883

app/assets/javascripts/application.js.coffee

@@ -50,7 +50,7 @@
 #= require_directory ./ci
 #= require_directory ./commit
 #= require_directory ./extensions
-#= require_directory ./lib
+#= require_directory ./lib/utils
 #= require_directory ./u2f
 #= require_directory .
 #= require fuzzaldrin-plus

app/assets/javascripts/graphs/application.js.coffee

@@ -4,5 +4,4 @@
 # It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
 # the compiled file.
 #
-#= require Chart
 #= require_tree .

app/assets/javascripts/lib/chart.js.coffee

@@ -0,0 +1 @@
+#= require Chart

app/assets/javascripts/lib/d3.js.coffee

@@ -0,0 +1 @@
+#= require d3

app/assets/javascripts/lib/raphael.js.coffee

@@ -0,0 +1,3 @@
+#= require raphael
+#= require g.raphael
+#= require g.bar

app/assets/javascripts/network/application.js.coffee

@@ -4,9 +4,6 @@
 # It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
 # the compiled file.
 #
-#= require raphael
-#= require g.raphael
-#= require g.bar
 #= require_tree .
 
 $ ->

app/assets/javascripts/users/application.js.coffee

@@ -1,8 +1,2 @@
-# This is a manifest file that'll be compiled into including all the files listed below.
-# Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
-# be included in the compiled file accessible from http://example.com/assets/application.js
-# It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-# the compiled file.
 #
-#= require d3
 #= require_tree .

app/helpers/javascript_helper.rb

@@ -1,7 +1,5 @@
 module JavascriptHelper
-  def page_specific_javascripts(js = nil)
-    @page_specific_javascripts = js unless js.nil?
-
-    @page_specific_javascripts
+  def page_specific_javascript_tag(js)
+    javascript_include_tag asset_path(js), { integrity: true, "data-turbolinks-track" => true }
   end
 end

app/views/layouts/_head.html.haml

@@ -30,11 +30,8 @@
 
   = javascript_include_tag "application", integrity: true
 
-  -# FIXME: SRI doesn't apply to the dynamically-generated per-page
-  -# JavaScript due to a bug in sprockets-rails.
-  -# See https://github.com/rails/sprockets-rails/issues/359
-  - if page_specific_javascripts
-    = javascript_include_tag page_specific_javascripts, {"data-turbolinks-track" => true}
+  - if content_for?(:page_specific_javascripts)
+    = yield :page_specific_javascripts
 
   = csrf_meta_tags
 

app/views/projects/graphs/_head.html.haml

@@ -1,7 +1,9 @@
 .nav-links.sub-nav
   %ul{ class: (container_class) }
 
-    - page_specific_javascripts asset_path("graphs/application.js")
+    - content_for :page_specific_javascripts do
+      = page_specific_javascript_tag('lib/chart.js')
+      = page_specific_javascript_tag('graphs/application.js')
     = nav_link(action: :show) do
       = link_to 'Contributors', namespace_project_graph_path
     = nav_link(action: :commits) do

app/views/projects/network/show.html.haml

@@ -1,5 +1,7 @@
 - page_title "Network", @ref
-- page_specific_javascripts asset_path("network/application.js")
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/raphael.js')
+  = page_specific_javascript_tag('network/application.js')
 = render "projects/commits/head"
 = render "head"
 %div{ class: (container_class) }

app/views/users/show.html.haml

@@ -1,6 +1,8 @@
 - page_title       @user.name
 - page_description @user.bio
-- page_specific_javascripts asset_path("users/application.js")
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/d3.js')
+  = page_specific_javascript_tag('users/application.js')
 - header_title     @user.name, user_path(@user)
 - @no_container = true
 

config/application.rb

@@ -84,6 +84,8 @@ module Gitlab
     config.assets.precompile << "graphs/application.js"
     config.assets.precompile << "users/application.js"
     config.assets.precompile << "network/application.js"
+    config.assets.precompile << "lib/utils/*.js"
+    config.assets.precompile << "lib/*.js"
 
     # Version of your assets, change this if you want to expire all your assets
     config.assets.version = '1.0'

spec/javascripts/application_spec.js.coffee

@@ -1,4 +1,4 @@
-#= require lib/common_utils
+#= require lib/utils/common_utils
 
 describe 'Application', ->
   describe 'disable buttons', ->

spec/javascripts/issue_spec.js.coffee

@@ -1,4 +1,4 @@
-#= require lib/text_utility
+#= require lib/utils/text_utility
 #= require issue
 
 describe 'Issue', ->

spec/javascripts/project_title_spec.js.coffee

@@ -1,6 +1,6 @@
 #= require bootstrap
 #= require select2
-#= require lib/type_utility
+#= require lib/utils/type_utility
 #= require gl_dropdown
 #= require api
 #= require project_select

spec/javascripts/search_autocomplete_spec.js.coffee

@@ -1,8 +1,8 @@
 #= require gl_dropdown
 #= require search_autocomplete
 #= require jquery
-#= require lib/common_utils
-#= require lib/type_utility
+#= require lib/utils/common_utils
+#= require lib/utils/type_utility
 #= require fuzzaldrin-plus