Refactor rich blob viewers and add Source|Rendered switch

app/assets/javascripts/blob/pdf/index.js

@@ -31,7 +31,7 @@ export default () => {
       },
     },
     template: `
-      <div class="container-fluid md prepend-top-default append-bottom-default">
+      <div class="js-pdf-viewer container-fluid md prepend-top-default append-bottom-default">
         <div
           class="text-center loading"
           v-if="loading && !error">

app/assets/javascripts/blob/viewer/index.js

+/* eslint-disable no-new */
+/* global Flash */
+export default class BlobViewer {
+  constructor() {
+    this.switcher = document.querySelector('.js-blob-viewer-switcher');
+    this.switcherBtns = document.querySelectorAll('.js-blob-viewer-switch-btn');
+    this.copySourceBtn = document.querySelector('.js-copy-blob-source-btn');
+    this.simpleViewer = document.querySelector('.blob-viewer[data-type="simple"]');
+    this.richViewer = document.querySelector('.blob-viewer[data-type="rich"]');
+    this.$blobContentHolder = $('#blob-content-holder');
+
+    let initialViewerName = document.querySelector('.blob-viewer:not(.hidden)').getAttribute('data-type');
+
+    this.initBindings();
+
+    if (this.switcher && location.hash.indexOf('#L') === 0) {
+      initialViewerName = 'simple';
+    }
+
+    this.switchToViewer(initialViewerName);
+  }
+
+  initBindings() {
+    if (this.switcherBtns.length) {
+      Array.from(this.switcherBtns)
+        .forEach((el) => {
+          el.addEventListener('click', this.switchViewHandler.bind(this));
+        });
+    }
+
+    if (this.copySourceBtn) {
+      this.copySourceBtn.addEventListener('click', () => {
+        if (this.copySourceBtn.classList.contains('disabled')) return;
+
+        this.switchToViewer('simple');
+      });
+    }
+  }
+
+  switchViewHandler(e) {
+    const target = e.currentTarget;
+
+    e.preventDefault();
+
+    this.switchToViewer(target.getAttribute('data-viewer'));
+  }
+
+  toggleCopyButtonState() {
+    if (!this.copySourceBtn) return;
+
+    if (this.simpleViewer.getAttribute('data-loaded')) {
+      this.copySourceBtn.setAttribute('title', 'Copy source to clipboard');
+      this.copySourceBtn.classList.remove('disabled');
+    } else if (this.activeViewer === this.simpleViewer) {
+      this.copySourceBtn.setAttribute('title', 'Wait for the source to load to copy it to the clipboard');
+      this.copySourceBtn.classList.add('disabled');
+    } else {
+      this.copySourceBtn.setAttribute('title', 'Switch to the source to copy it to the clipboard');
+      this.copySourceBtn.classList.add('disabled');
+    }
+
+    $(this.copySourceBtn).tooltip('fixTitle');
+  }
+
+  loadViewer(viewerParam) {
+    const viewer = viewerParam;
+    const url = viewer.getAttribute('data-url');
+
+    if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
+      return;
+    }
+
+    viewer.setAttribute('data-loading', 'true');
+
+    $.ajax({
+      url,
+      dataType: 'JSON',
+    })
+    .done((data) => {
+      viewer.innerHTML = data.html;
+      $(viewer).syntaxHighlight();
+
+      viewer.setAttribute('data-loaded', 'true');
+
+      this.$blobContentHolder.trigger('highlight:line');
+
+      this.toggleCopyButtonState();
+    });
+  }
+
+  switchToViewer(name) {
+    const newViewer = document.querySelector(`.blob-viewer[data-type='${name}']`);
+    if (this.activeViewer === newViewer) return;
+
+    const oldButton = document.querySelector('.js-blob-viewer-switch-btn.active');
+    const newButton = document.querySelector(`.js-blob-viewer-switch-btn[data-viewer='${name}']`);
+    const oldViewer = document.querySelector(`.blob-viewer:not([data-type='${name}'])`);
+
+    if (oldButton) {
+      oldButton.classList.remove('active');
+    }
+
+    if (newButton) {
+      newButton.classList.add('active');
+      newButton.blur();
+    }
+
+    if (oldViewer) {
+      oldViewer.classList.add('hidden');
+    }
+
+    newViewer.classList.remove('hidden');
+
+    this.activeViewer = newViewer;
+
+    this.toggleCopyButtonState();
+
+    this.loadViewer(newViewer);
+  }
+}

app/assets/javascripts/dispatcher.js

@@ -51,6 +51,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
 import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
 import ShortcutsWiki from './shortcuts_wiki';
+import BlobViewer from './blob/viewer/index';
 
 import GeoNodes from './geo_nodes';
 import ServiceDeskRoot from './projects/settings_service_desk/service_desk_root';
@@ -313,6 +314,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
           gl.TargetBranchDropDown.bootstrap();
           break;
         case 'projects:blob:show':
+          new BlobViewer();
           gl.TargetBranchDropDown.bootstrap();
           initBlob();
           break;

app/assets/javascripts/line_highlighter.js

@@ -41,7 +41,6 @@ require('vendor/jquery.scrollTo');
     LineHighlighter.prototype._hash = '';
 
     function LineHighlighter(hash) {
-      var range;
       if (hash == null) {
         // Initialize a LineHighlighter object
         //
@@ -51,10 +50,21 @@ require('vendor/jquery.scrollTo');
       this.setHash = bind(this.setHash, this);
       this.highlightLine = bind(this.highlightLine, this);
       this.clickHandler = bind(this.clickHandler, this);
+      this.highlightHash = this.highlightHash.bind(this);
       this._hash = hash;
       this.bindEvents();
-      if (hash !== '') {
-        range = this.hashToRange(hash);
+      this.highlightHash();
+    }
+
+    LineHighlighter.prototype.bindEvents = function() {
+      $('#blob-content-holder').on('click', 'a[data-line-number]', this.clickHandler);
+      $('#blob-content-holder').on('highlight:line', this.highlightHash);
+    };
+
+    LineHighlighter.prototype.highlightHash = function() {
+      var range;
+      if (this._hash !== '') {
+        range = this.hashToRange(this._hash);
         if (range[0]) {
           this.highlightRange(range);
           $.scrollTo("#L" + range[0], {
@@ -64,10 +74,6 @@ require('vendor/jquery.scrollTo');
           });
         }
       }
-    }
-
-    LineHighlighter.prototype.bindEvents = function() {
-      $('#blob-content-holder').on('click', 'a[data-line-number]', this.clickHandler);
     };
 
     LineHighlighter.prototype.clickHandler = function(event) {

app/controllers/concerns/renders_blob.rb

+module RendersBlob
+  extend ActiveSupport::Concern
+
+  def render_blob_json(blob)
+    viewer =
+      if params[:viewer] == 'rich'
+        blob.rich_viewer
+      else
+        blob.simple_viewer
+      end
+    return render_404 unless viewer
+
+    render json: {
+      html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_asynchronously: false)
+    }
+  end
+end

app/controllers/projects/blob_controller.rb

@@ -2,6 +2,7 @@
 class Projects::BlobController < Projects::ApplicationController
   include ExtractsPath
   include CreatesCommit
+  include RendersBlob
   include ActionView::Helpers::SanitizeHelper
 
   # Raised when given an invalid file path
@@ -34,8 +35,20 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def show
+    @blob.override_max_size! if params[:override_max_size] == 'true'
+
+    respond_to do |format|
+      format.html do
         environment_params = @repository.branch_exists?(@ref) ? { ref: @ref } : { commit: @commit }
         @environment = EnvironmentsFinder.new(@project, current_user, environment_params).execute.last
+
+        render 'show'
+      end
+
+      format.json do
+        render_blob_json(@blob)
+      end
+    end
   end
 
   def edit
@@ -96,7 +109,7 @@ class Projects::BlobController < Projects::ApplicationController
   private
 
   def blob
-    @blob ||= Blob.decorate(@repository.blob_at(@commit.id, @path))
+    @blob ||= Blob.decorate(@repository.blob_at(@commit.id, @path), @project)
 
     if @blob
       @blob

app/controllers/projects/raw_controller.rb

@@ -15,7 +15,7 @@ class Projects::RawController < Projects::ApplicationController
 
       return if cached_blob?
 
-      if @blob.lfs_pointer? && project.lfs_enabled?
+      if @blob.valid_lfs_pointer?
         send_lfs_object
       else
         send_git_blob @repository, @blob

app/helpers/blob_helper.rb

@@ -52,7 +52,7 @@ module BlobHelper
 
     if !on_top_of_branch?(project, ref)
       button_tag label, class: "#{common_classes} disabled has-tooltip", title: "You can only #{action} files when you are on a branch", data: { container: 'body' }
-    elsif blob.lfs_pointer?
+    elsif blob.valid_lfs_pointer?
       button_tag label, class: "#{common_classes} disabled has-tooltip", title: "It is not possible to #{action} files that are stored in LFS using the web interface", data: { container: 'body' }
     elsif can_modify_blob?(blob, project, ref)
       button_tag label, class: "#{common_classes}", 'data-target' => "#modal-#{modal_type}-blob", 'data-toggle' => 'modal'
@@ -95,7 +95,7 @@ module BlobHelper
   end
 
   def can_modify_blob?(blob, project = @project, ref = @ref)
-    !blob.lfs_pointer? && can_edit_tree?(project, ref)
+    !blob.valid_lfs_pointer? && can_edit_tree?(project, ref)
   end
 
   def leave_edit_message
@@ -118,28 +118,15 @@ module BlobHelper
     icon("#{file_type_icon_class('file', mode, name)} fw")
   end
 
-  def blob_text_viewable?(blob)
-    blob && blob.text? && !blob.lfs_pointer? && !blob.only_display_raw?
-  end
-
-  def blob_rendered_as_text?(blob)
-    blob_text_viewable?(blob) && blob.to_partial_path(@project) == 'text'
-  end
-
-  def blob_size(blob)
-    if blob.lfs_pointer?
-      blob.lfs_size
-    else
-      blob.size
-    end
+  def blob_raw_url
+    namespace_project_raw_path(@project.namespace, @project, @id)
   end
 
   # SVGs can contain malicious JavaScript; only include whitelisted
   # elements and attributes. Note that this whitelist is by no means complete
   # and may omit some elements.
-  def sanitize_svg(blob)
-    blob.data = Gitlab::Sanitizers::SVG.clean(blob.data)
-    blob
+  def sanitize_svg_data(data)
+    Gitlab::Sanitizers::SVG.clean(data)
   end
 
   # If we blindly set the 'real' content type when serving a Git blob we
@@ -221,13 +208,42 @@ module BlobHelper
     clipboard_button(text: file_path, gfm: "`#{file_path}`", class: 'btn-clipboard btn-transparent prepend-left-5', title: 'Copy file path to clipboard')
   end
 
-  def copy_blob_content_button(blob)
-    return if markup?(blob.name)
-
-    clipboard_button(target: ".blob-content[data-blob-id='#{blob.id}']", class: "btn btn-sm", title: "Copy content to clipboard")
+  def copy_blob_source_button(blob)
+    clipboard_button(target: ".blob-content[data-blob-id='#{blob.id}']", class: "btn btn-sm js-copy-blob-source-btn", title: "Copy source to clipboard")
   end
 
   def open_raw_file_button(path)
     link_to icon('file-code-o'), path, class: 'btn btn-sm has-tooltip', target: '_blank', rel: 'noopener noreferrer', title: 'Open raw', data: { container: 'body' }
   end
+
+  def blob_render_error_reason(viewer, error)
+    case error
+    when :too_large
+      max_size =
+        if viewer.absolutely_too_large?
+          viewer.absolute_max_size
+        elsif viewer.too_large?
+          viewer.max_size
+        end
+      "it is larger than #{number_to_human_size(max_size)}"
+    when :server_side_but_stored_in_lfs
+      "it is stored in LFS"
+    end
+  end
+
+  def blob_render_error_options(viewer, error)
+    options = []
+
+    if error == :too_large && viewer.can_override_max_size?
+      options << link_to('load it anyway', url_for(params.merge(viewer: viewer.type, override_max_size: true, format: nil)))
+    end
+
+    if viewer.rich? && viewer.blob.rendered_as_text?
+      options << link_to('view the source', '#', class: 'js-blob-viewer-switch-btn', data: { viewer: 'simple' })
+    end
+
+    options << link_to('download it', blob_raw_url, target: '_blank', rel: 'noopener noreferrer')
+
+    options
+  end
 end

app/models/blob.rb

@@ -3,8 +3,20 @@ class Blob < SimpleDelegator
   CACHE_TIME = 60 # Cache raw blobs referred to by a (mutable) ref for 1 minute
   CACHE_TIME_IMMUTABLE = 3600 # Cache blobs referred to by an immutable reference for 1 hour
 
-  # The maximum size of an SVG that can be displayed.
-  MAXIMUM_SVG_SIZE = 2.megabytes
+  MAXIMUM_TEXT_HIGHLIGHT_SIZE = 1.megabyte
+
+  RICH_VIEWERS = [
+    BlobViewer::Image,
+    BlobViewer::PDF,
+    BlobViewer::Sketch,
+    BlobViewer::BinarySTL,
+    BlobViewer::TextSTL,
+    BlobViewer::Notebook,
+    BlobViewer::SVG,
+    BlobViewer::Markup,
+  ].freeze
+
+  attr_reader :project
 
   # Wrap a Gitlab::Git::Blob object, or return nil when given nil
   #
@@ -16,10 +28,16 @@ class Blob < SimpleDelegator
   #
   #     blob = Blob.decorate(nil)
   #     puts "truthy" if blob # No output
-  def self.decorate(blob)
+  def self.decorate(blob, project = nil)
     return if blob.nil?
 
-    new(blob)
+    new(blob, project)
+  end
+
+  def initialize(blob, project = nil)
+    @project = project
+
+    super(blob)
   end
 
   # Returns the data of the blob.
@@ -35,82 +53,107 @@ class Blob < SimpleDelegator
   end
 
   def no_highlighting?
-    size && size > 1.megabyte
+    size && size > MAXIMUM_TEXT_HIGHLIGHT_SIZE
   end
 
-  def only_display_raw?
+  def too_large?
     size && truncated?
   end
 
+  # Returns the size of the file that this blob represents. If this blob is an
+  # LFS pointer, this is the size of the file stored in LFS. Otherwise, this is
+  # the size of the blob itself.
+  def raw_size
+    if valid_lfs_pointer?
+      lfs_size
+    else
+      size
+    end
+  end
+
+  # Returns whether the file that this blob represents is binary. If this blob is
+  # an LFS pointer, we assume the file stored in LFS is binary, unless a
+  # text-based rich blob viewer matched on the file's extension. Otherwise, this
+  # depends on the type of the blob itself.
+  def raw_binary?
+    if valid_lfs_pointer?
+      if rich_viewer
+        rich_viewer.binary?
+      else
+        true
+      end
+    else
+      binary?
+    end
+  end
+
   def extension
-    extname.downcase.delete('.')
+    @extension ||= extname.downcase.delete('.')
   end
 
-  def svg?
-    text? && language && language.name == 'SVG'
+  def video?
+    UploaderHelper::VIDEO_EXT.include?(extension)
   end
 
-  def pdf?
-    extension == 'pdf'
+  def readable_text?
+    text? && !valid_lfs_pointer? && !too_large?
   end
 
-  def ipython_notebook?
-    text? && language&.name == 'Jupyter Notebook'
+  def valid_lfs_pointer?
+    lfs_pointer? && project&.lfs_enabled?
   end
 
-  def sketch?
-    binary? && extension == 'sketch'
+  def invalid_lfs_pointer?
+    lfs_pointer? && !project&.lfs_enabled?
   end
 
-  def stl?
-    extension == 'stl'
+  def simple_viewer
+    @simple_viewer ||= simple_viewer_class.new(self)
   end
 
-  def markup?
-    text? && Gitlab::MarkupHelper.markup?(name)
+  def rich_viewer
+    return @rich_viewer if defined?(@rich_viewer)
+
+    @rich_viewer = rich_viewer_class&.new(self)
   end
 
-  def size_within_svg_limits?
-    size <= MAXIMUM_SVG_SIZE
+  def rendered_as_text?(ignore_errors: true)
+    simple_viewer.text? && (ignore_errors || simple_viewer.render_error.nil?)
   end
 
-  def video?
-    UploaderHelper::VIDEO_EXT.include?(extname.downcase.delete('.'))
+  def show_viewer_switcher?
+    rendered_as_text? && rich_viewer
   end
 
-  def to_partial_path(project)
-    if lfs_pointer?
-      if project.lfs_enabled?
-        'download'
-      else
-        'text'
-      end
-    elsif image?
-      'image'
-    elsif svg?
-      'svg'
-    elsif pdf?
-      'pdf'
-    elsif ipython_notebook?
-      'notebook'
-    elsif sketch?
-      'sketch'
-    elsif stl?
-      'stl'
-    elsif markup?
-      if only_display_raw?
-        'too_large'
-      else
-        'markup'
+  def override_max_size!
+    simple_viewer&.override_max_size = true
+    rich_viewer&.override_max_size = true
   end
-    elsif text?
-      if only_display_raw?
-        'too_large'
-      else
-        'text'
+
+  private
+
+  def simple_viewer_class
+    if empty?
+      BlobViewer::Empty
+    elsif raw_binary?
+      BlobViewer::Download
+    else # text
+      BlobViewer::Text
     end
-    else
-      'download'
   end
+
+  def rich_viewer_class
+    return if invalid_lfs_pointer? || empty?
+
+    classes =
+      if valid_lfs_pointer?
+        RICH_VIEWERS
+      elsif binary?
+        RICH_VIEWERS.select(&:binary?)
+      else # text
+        RICH_VIEWERS.select(&:text?)
+      end
+
+    classes.find { |viewer_class| viewer_class.can_render?(self) }
   end
 end

app/models/blob_viewer/base.rb

+module BlobViewer
+  class Base
+    class_attribute :partial_name, :type, :extensions, :client_side, :binary, :switcher_icon, :switcher_title, :max_size, :absolute_max_size
+
+    delegate :partial_path, :rich?, :simple?, :client_side?, :server_side?, :text?, :binary?, to: :class
+
+    attr_reader :blob
+    attr_accessor :override_max_size
+
+    def initialize(blob)
+      @blob = blob
+    end
+
+    def self.partial_path
+      "projects/blob/viewers/#{partial_name}"
+    end
+
+    def self.rich?
+      type == :rich
+    end
+
+    def self.simple?
+      type == :simple
+    end
+
+    def self.client_side?
+      client_side
+    end
+
+    def self.server_side?
+      !client_side?
+    end
+
+    def self.binary?
+      binary
+    end
+
+    def self.text?
+      !binary?
+    end
+
+    def self.can_render?(blob)
+      !extensions || extensions.include?(blob.extension)
+    end
+
+    def too_large?
+      blob.raw_size > max_size
+    end
+
+    def absolutely_too_large?
+      blob.raw_size > absolute_max_size
+    end
+
+    def can_override_max_size?
+      too_large? && !absolutely_too_large?
+    end
+
+    def render_error
+      if server_side_but_stored_in_lfs?
+        :server_side_but_stored_in_lfs
+      elsif override_max_size ? absolutely_too_large? : too_large?
+        :too_large
+      end
+    end
+
+    def prepare!
+      if server_side? && blob.project
+        blob.load_all_data!(blob.project.repository)
+      end
+    end
+
+    private
+
+    def server_side_but_stored_in_lfs?
+      server_side? && blob.valid_lfs_pointer?
+    end
+  end
+end

app/models/blob_viewer/binary_stl.rb

+module BlobViewer
+  class BinarySTL < Base
+    include Rich
+    include ClientSide
+
+    self.partial_name = 'stl'
+    self.extensions = %w(stl)
+    self.binary = true
+  end
+end

app/models/blob_viewer/client_side.rb

+module BlobViewer
+  module ClientSide
+    extend ActiveSupport::Concern
+
+    included do
+      self.client_side = true
+      self.max_size = 10.megabytes
+      self.absolute_max_size = 50.megabytes
+    end
+  end
+end

app/models/blob_viewer/download.rb

+module BlobViewer
+  class Download < Base
+    include Simple
+    # We treat the Download viewer as if it renders the content client-side,
+    # so that it doesn't attempt to load the entire blob contents and is
+    # rendered synchronously instead of loaded asynchronously.
+    include ClientSide
+
+    self.partial_name = 'download'
+    self.binary = true
+
+    def render_error
+      nil
+    end
+  end
+end

app/models/blob_viewer/empty.rb

+module BlobViewer
+  class Empty < Base
+    include Simple
+    include ServerSide
+
+    self.partial_name = 'empty'
+    self.binary = true
+  end
+end

app/models/blob_viewer/image.rb

+module BlobViewer
+  class Image < Base
+    include Rich
+    include ClientSide
+
+    self.partial_name = 'image'
+    self.extensions = UploaderHelper::IMAGE_EXT
+    self.binary = true
+    self.switcher_icon = 'picture-o'
+    self.switcher_title = 'image'
+  end
+end

app/models/blob_viewer/markup.rb

+module BlobViewer
+  class Markup < Base
+    include Rich
+    include ServerSide
+
+    self.partial_name = 'markup'
+    self.extensions = Gitlab::MarkupHelper::EXTENSIONS
+    self.binary = false
+  end
+end

app/models/blob_viewer/notebook.rb

+module BlobViewer
+  class Notebook < Base
+    include Rich
+    include ClientSide
+    
+    self.partial_name = 'notebook'
+    self.extensions = %w(ipynb)
+    self.binary = false
+    self.switcher_icon = 'file-text-o'
+    self.switcher_title = 'notebook'
+  end
+end

app/models/blob_viewer/pdf.rb

+module BlobViewer
+  class PDF < Base
+    include Rich
+    include ClientSide
+
+    self.partial_name = 'pdf'
+    self.extensions = %w(pdf)
+    self.binary = true
+    self.switcher_icon = 'file-pdf-o'
+    self.switcher_title = 'PDF'
+  end
+end

app/models/blob_viewer/rich.rb

+module BlobViewer
+  module Rich
+    extend ActiveSupport::Concern
+
+    included do
+      self.type = :rich
+      self.switcher_icon = 'file-text-o'
+      self.switcher_title = 'rendered file'
+    end
+  end
+end

app/models/blob_viewer/server_side.rb

+module BlobViewer
+  module ServerSide
+    extend ActiveSupport::Concern
+
+    included do
+      self.client_side = false
+      self.max_size = 2.megabytes
+      self.absolute_max_size = 5.megabytes
+    end
+  end
+end

app/models/blob_viewer/simple.rb

+module BlobViewer
+  module Simple
+    extend ActiveSupport::Concern
+
+    included do
+      self.type = :simple
+      self.switcher_icon = 'code'
+      self.switcher_title = 'source'
+    end
+  end
+end

app/models/blob_viewer/sketch.rb

+module BlobViewer
+  class Sketch < Base
+    include Rich
+    include ClientSide
+
+    self.partial_name = 'sketch'
+    self.extensions = %w(sketch)
+    self.binary = true
+    self.switcher_icon = 'file-image-o'
+    self.switcher_title = 'preview'
+  end
+end

app/models/blob_viewer/svg.rb

+module BlobViewer
+  class SVG < Base
+    include Rich
+    include ServerSide
+
+    self.partial_name = 'svg'
+    self.extensions = %w(svg)
+    self.binary = false
+    self.switcher_icon = 'picture-o'
+    self.switcher_title = 'image'
+  end
+end

app/models/blob_viewer/text.rb

+module BlobViewer
+  class Text < Base
+    include Simple
+    include ServerSide
+
+    self.partial_name = 'text'
+    self.binary = false
+    self.max_size = 1.megabyte
+    self.absolute_max_size = 10.megabytes
+  end
+end

app/models/blob_viewer/text_stl.rb

+module BlobViewer
+  class TextSTL < Base
+    include Rich
+    include ClientSide
+
+    self.partial_name = 'stl'
+    self.extensions = %w(stl)
+    self.binary = false
+  end
+end

app/models/commit.rb

@@ -316,7 +316,7 @@ class Commit
   def uri_type(path)
     entry = @raw.tree.path(path)
     if entry[:type] == :blob
-      blob = ::Blob.decorate(Gitlab::Git::Blob.new(name: entry[:name]))
+      blob = ::Blob.decorate(Gitlab::Git::Blob.new(name: entry[:name]), @project)
       blob.image? || blob.video? ? :raw : :blob
     else
       entry[:type]

app/models/repository.rb

@@ -457,7 +457,7 @@ class Repository
 
   def blob_at(sha, path)
     unless Gitlab::Git.blank_ref?(sha)
-      Blob.decorate(Gitlab::Git::Blob.find(self, sha, path))
+      Blob.decorate(Gitlab::Git::Blob.find(self, sha, path), project)
     end
   rescue Gitlab::Git::Repository::NoRepository
     nil

app/views/notify/repository_push_email.html.haml

@@ -74,7 +74,7 @@
           - else
             %hr
             - blob = diff_file.blob
-            - if blob && blob.respond_to?(:text?) && blob_text_viewable?(blob)
+            - if blob && blob.readable_text?
               %table.code.white
                 = render partial: "projects/diffs/line", collection: diff_file.highlighted_diff_lines, as: :line, locals: { diff_file: diff_file, plain: true, email: true }
             - else

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

@@ -27,9 +27,4 @@
   %article.file-holder
     = render "projects/blob/header", blob: blob
 
-    - if blob.empty?
-      .file-content.code
-        .nothing-here-block
-          Empty file
-    - else
-      = render blob.to_partial_path(@project), blob: blob
+    = render 'projects/blob/content', blob: blob

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

+- simple_viewer = blob.simple_viewer
+- rich_viewer = blob.rich_viewer
+- rich_viewer_active = rich_viewer && params[:viewer] != 'simple'
+
+= render 'projects/blob/viewer', viewer: simple_viewer, hidden: rich_viewer_active
+
+- if rich_viewer
+  = render 'projects/blob/viewer', viewer: rich_viewer, hidden: !rich_viewer_active

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

@@ -9,17 +9,19 @@
     = copy_file_path_button(blob.path)
 
     %small
-      = number_to_human_size(blob_size(blob))
+      = number_to_human_size(blob.raw_size)
 
   .file-actions.hidden-xs
+    = render 'projects/blob/viewer_switcher', blob: blob unless blame
+
     .btn-group{ role: "group" }<
-      = copy_blob_content_button(blob) if !blame && blob_rendered_as_text?(blob)
+      = copy_blob_source_button(blob) if !blame && blob.rendered_as_text?(ignore_errors: false)
       = open_raw_file_button(namespace_project_raw_path(@project.namespace, @project, @id))
       = view_on_environment_button(@commit.sha, @path, @environment) if @environment
 
     .btn-group{ role: "group" }<
       -# only show normal/blame view links for text files
-      - if blob_text_viewable?(blob)
+      - if blob.readable_text?
         - if blame
           = link_to 'Normal view', namespace_project_blob_path(@project.namespace, @project, @id),
               class: 'btn btn-sm'
@@ -36,7 +38,8 @@
     .btn-group{ role: "group" }<
       - if current_user
         = lock_file_link(html_options: {class: 'btn btn-sm path-lock'})
-      = edit_blob_link if blob_text_viewable?(blob)
+
+      = edit_blob_link if blob.readable_text?
       - if current_user
         = replace_blob_link
         = delete_blob_link

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

-.file-content.image_file
-  %img{ src: namespace_project_raw_path(@project.namespace, @project, @id), alt: blob.name }

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

+.file-content.code
+  .nothing-here-block
+    The #{viewer.switcher_title} could not be displayed because #{blob_render_error_reason(viewer, error)}.
+
+    You can
+    = blob_render_error_options(viewer, error).to_sentence(two_words_connector: ' or ', last_word_connector: ', or ').html_safe
+    instead.

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

-- if blob.size_within_svg_limits?
-  -# We need to scrub SVG but we cannot do so in the RawController: it would
-  -# be wrong/strange if RawController modified the data.
-  - blob.load_all_data!(@repository)
-  - blob = sanitize_svg(blob)
-  .file-content.image_file
-    %img{ src: "data:#{blob.mime_type};base64,#{Base64.encode64(blob.data)}", alt: blob.name }
-- else
-  = render 'too_large'

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

-- blob.load_all_data!(@repository)
-= render 'shared/file_highlight', blob: blob, repository: @repository

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

-.file-content.code
-  .nothing-here-block
-    The file could not be displayed as it is too large, you can
-    #{link_to('view the raw file', namespace_project_raw_path(@project.namespace, @project, @id), target: '_blank', rel: 'noopener noreferrer')}
-    instead.

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

+- hidden = local_assigns.fetch(:hidden, false)
+- render_error = viewer.render_error
+- load_asynchronously = local_assigns.fetch(:load_asynchronously, viewer.server_side?) && render_error.nil?
+
+- url = url_for(params.merge(viewer: viewer.type, format: :json)) if load_asynchronously
+.blob-viewer{ data: { type: viewer.type, url: url }, class: ('hidden' if hidden) }
+  - if load_asynchronously
+    .text-center.prepend-top-default.append-bottom-default
+      = icon('spinner spin 2x', 'aria-hidden' => 'true', 'aria-label' => 'Loading content')
+  - elsif render_error
+    = render 'projects/blob/render_error', viewer: viewer, error: render_error
+  - else
+    - viewer.prepare!
+    = render viewer.partial_path, viewer: viewer

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

+- if blob.show_viewer_switcher?
+  - simple_viewer = blob.simple_viewer
+  - rich_viewer = blob.rich_viewer
+
+  .btn-group.js-blob-viewer-switcher{ role: "group" }
+    - simple_label = "Display #{simple_viewer.switcher_title}"
+    %button.btn.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => simple_label, title: simple_label, data: { viewer: 'simple', container: 'body' } }>
+      = icon(simple_viewer.switcher_icon)
+
+    - rich_label = "Display #{rich_viewer.switcher_title}"
+    %button.btn.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
+      = icon(rich_viewer.switcher_icon)

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

@@ -2,6 +2,9 @@
 - page_title @blob.path, @ref
 = render "projects/commits/head"
 
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('blob')
+
 %div{ class: container_class }
   = render 'projects/last_push'
 

app/views/projects/blob/_download.html.haml → app/views/projects/blob/viewers/_download.html.haml

 .file-content.blob_file.blob-no-preview
   .center
-    = link_to namespace_project_raw_path(@project.namespace, @project, @id) do
+    = link_to blob_raw_url do
       %h1.light
-        %i.fa.fa-download
+        = icon('download')
       %h4
-        Download (#{number_to_human_size blob_size(blob)})
+        Download (#{number_to_human_size(viewer.blob.raw_size)})

app/views/projects/blob/viewers/_empty.html.haml

+.file-content.code
+  .nothing-here-block
+    Empty file

app/views/projects/blob/viewers/_image.html.haml

+.file-content.image_file
+  %img{ src: blob_raw_url, alt: viewer.blob.name }

app/views/projects/blob/viewers/_markup.html.haml

+- blob = viewer.blob
+.file-content.wiki
+  = render_markup(blob.name, blob.data)

app/views/projects/blob/_notebook.html.haml → app/views/projects/blob/viewers/_notebook.html.haml

@@ -2,4 +2,4 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('notebook_viewer')
 
-.file-content#js-notebook-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
+.file-content#js-notebook-viewer{ data: { endpoint: blob_raw_url } }

app/views/projects/blob/_pdf.html.haml → app/views/projects/blob/viewers/_pdf.html.haml

@@ -2,4 +2,4 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('pdf_viewer')
 
-.file-content#js-pdf-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
+.file-content#js-pdf-viewer{ data: { endpoint: blob_raw_url } }

app/views/projects/blob/_sketch.html.haml → app/views/projects/blob/viewers/_sketch.html.haml

@@ -2,6 +2,6 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('sketch_viewer')
 
-.file-content#js-sketch-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
+.file-content#js-sketch-viewer{ data: { endpoint: blob_raw_url } }
   .js-loading-icon.text-center.prepend-top-default.append-bottom-default.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
     = icon('spinner spin 2x', 'aria-hidden' => 'true');

app/views/projects/blob/_stl.html.haml → app/views/projects/blob/viewers/_stl.html.haml

@@ -2,7 +2,7 @@
   = page_specific_javascript_bundle_tag('stl_viewer')
 
 .file-content.is-stl-loading
-  .text-center#js-stl-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
+  .text-center#js-stl-viewer{ data: { endpoint: blob_raw_url } }
     = icon('spinner spin 2x', class: 'prepend-top-default append-bottom-default', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
   .text-center.prepend-top-default.append-bottom-default.stl-controls
     .btn-group

app/views/projects/blob/viewers/_svg.html.haml

+- blob = viewer.blob
+- data = sanitize_svg_data(blob.data)
+.file-content.image_file
+  %img{ src: "data:#{blob.mime_type};base64,#{Base64.encode64(data)}", alt: blob.name }

app/views/projects/blob/viewers/_text.html.haml

+= render 'shared/file_highlight', blob: viewer.blob, repository: @repository

app/views/projects/diffs/_content.html.haml

@@ -3,9 +3,9 @@
   - return unless blob.respond_to?(:text?)
   - if diff_file.too_large?
     .nothing-here-block This diff could not be displayed because it is too large.
-  - elsif blob.only_display_raw?
+  - elsif blob.too_large?
     .nothing-here-block The file could not be displayed because it is too large.
-  - elsif blob_text_viewable?(blob)
+  - elsif blob.readable_text?
     - if !project.repository.diffable?(blob)
       .nothing-here-block This diff was suppressed by a .gitattributes entry.
     - elsif diff_file.collapsed?

app/views/projects/diffs/_diffs.html.haml

@@ -27,7 +27,7 @@
     - diff_commit = commit_for_diff(diff_file)
     - blob = diff_file.blob(diff_commit)
     - next unless blob
-    - blob.load_all_data!(diffs.project.repository) unless blob.only_display_raw?
+    - blob.load_all_data!(diffs.project.repository) unless blob.too_large?
     - file_hash = hexdigest(diff_file.file_path)
 
     = render 'projects/diffs/file', file_hash: file_hash, project: diffs.project,

app/views/projects/diffs/_file.html.haml

@@ -6,7 +6,7 @@
 
     - unless diff_file.submodule?
       .file-actions.hidden-xs
-        - if blob_text_viewable?(blob)
+        - if blob.readable_text?
           = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip', title: "Toggle comments for this file", disabled: @diff_notes_disabled do
             = icon('comment')
           \

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

@@ -9,7 +9,7 @@
 
   .file-actions.hidden-xs
     .btn-group{ role: "group" }<
-      = copy_blob_content_button(@snippet)
+      = copy_blob_source_button(@snippet)
       = open_raw_file_button(raw_path)
 
       - if defined?(download_path) && download_path

changelogs/unreleased/dm-blob-viewers.yml

+---
+title: Add Source/Rendered switch to blobs for SVG, Markdown, Asciidoc and other text
+  files that can be rendered
+merge_request:
+author:

features/project/source/browse_files.feature

@@ -11,6 +11,7 @@ Feature: Project Source Browse Files
     Given I visit project source page for "6d39438"
     Then I should see files from repository for "6d39438"
     
+  @javascript
   Scenario: I browse file content
     Given I click on ".gitignore" file in repo
     Then I should see its content

features/project/source/markdown_render.feature

@@ -6,11 +6,13 @@ Feature: Project Source Markdown Render
 
   # Tree README
 
+  @javascript
   Scenario: Tree view should have correct links in README
     Given I go directory which contains README file
     And I click on a relative link in README
     Then I should see the correct markdown
 
+  @javascript
   Scenario: I browse files from markdown branch
     Then I should see files from repository in markdown
     And I should see rendered README which contains correct links
@@ -29,36 +31,42 @@ Feature: Project Source Markdown Render
     And I click on GitLab API doc directory in README
     Then I should see correct doc/api directory rendered
 
+  @javascript
   Scenario: I view README in markdown branch to see reference links to file
     Then I should see files from repository in markdown
     And I should see rendered README which contains correct links
     And I click on Maintenance in README
     Then I should see correct maintenance file rendered
 
+  @javascript
   Scenario: README headers should have header links
     Then I should see rendered README which contains correct links
     And Header "Application details" should have correct id and link
 
   # Blob
 
+  @javascript
   Scenario: I navigate to doc directory to view documentation in markdown
     And I navigate to the doc/api/README
     And I see correct file rendered
     And I click on users in doc/api/README
     Then I should see the correct document file
 
+  @javascript
   Scenario: I navigate to doc directory to view user doc in markdown
     And I navigate to the doc/api/README
     And I see correct file rendered
     And I click on raketasks in doc/api/README
     Then I should see correct directory rendered
 
+  @javascript
   Scenario: I navigate to doc directory to view user doc in markdown
     And I navigate to the doc/api/README
     And Header "GitLab API" should have correct id and link
 
   # Markdown branch
 
+  @javascript
   Scenario: I browse files from markdown branch
     When I visit markdown branch
     Then I should see files from repository in markdown branch
@@ -73,6 +81,7 @@ Feature: Project Source Markdown Render
     And I click on Rake tasks in README
     Then I should see correct directory rendered for markdown branch
 
+  @javascript
   Scenario: I navigate to doc directory to view documentation in markdown branch
     When I visit markdown branch
     And I navigate to the doc/api/README
@@ -80,6 +89,7 @@ Feature: Project Source Markdown Render
     And I click on users in doc/api/README
     Then I should see the users document file in markdown branch
 
+  @javascript
   Scenario: I navigate to doc directory to view user doc in markdown branch
     When I visit markdown branch
     And I navigate to the doc/api/README
@@ -87,6 +97,7 @@ Feature: Project Source Markdown Render
     And I click on raketasks in doc/api/README
     Then I should see correct directory rendered for markdown branch
 
+  @javascript
   Scenario: Tree markdown links view empty urls should have correct urls
     When I visit markdown branch
     Then The link with text "empty" should have url "tree/markdown"
@@ -99,6 +110,7 @@ Feature: Project Source Markdown Render
 
   # "ID" means "#id" on the tests below, because we are unable to escape the hash sign.
   # which Spinach interprets as the start of a comment.
+  @javascript
   Scenario: All markdown links with ids should have correct urls
     When I visit markdown branch
     Then The link with text "ID" should have url "tree/markdownID"

features/steps/project/source/browse_files.rb

@@ -4,6 +4,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   include SharedProject
   include SharedPaths
   include RepoHelpers
+  include WaitForAjax
 
   step "I don't have write access" do
     @project = create(:project, :repository, name: "Other Project", path: "other-project")
@@ -36,10 +37,12 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   end
 
   step 'I should see its content' do
+    wait_for_ajax
     expect(page).to have_content old_gitignore_content
   end
 
   step 'I should see its new content' do
+    wait_for_ajax
     expect(page).to have_content new_gitignore_content
   end
 

features/steps/project/source/markdown_render.rb

@@ -5,6 +5,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
   include SharedAuthentication
   include SharedPaths
   include SharedMarkdown
+  include WaitForAjax
 
   step 'I own project "Delta"' do
     @project = ::Project.find_by(name: "Delta")
@@ -34,6 +35,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I should see correct document rendered' do
     expect(current_path).to eq namespace_project_blob_path(@project.namespace, @project, "markdown/doc/api/README.md")
+    wait_for_ajax
     expect(page).to have_content "All API requests require authentication"
   end
 
@@ -63,6 +65,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I should see correct maintenance file rendered' do
     expect(current_path).to eq namespace_project_blob_path(@project.namespace, @project, "markdown/doc/raketasks/maintenance.md")
+    wait_for_ajax
     expect(page).to have_content "bundle exec rake gitlab:env:info RAILS_ENV=production"
   end
 
@@ -94,6 +97,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I see correct file rendered' do
     expect(current_path).to eq namespace_project_blob_path(@project.namespace, @project, "markdown/doc/api/README.md")
+    wait_for_ajax
     expect(page).to have_content "Contents"
     expect(page).to have_link "Users"
     expect(page).to have_link "Rake tasks"
@@ -138,6 +142,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I see correct file rendered in markdown branch' do
     expect(current_path).to eq namespace_project_blob_path(@project.namespace, @project, "markdown/doc/api/README.md")
+    wait_for_ajax
     expect(page).to have_content "Contents"
     expect(page).to have_link "Users"
     expect(page).to have_link "Rake tasks"
@@ -145,6 +150,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I should see correct document rendered for markdown branch' do
     expect(current_path).to eq namespace_project_blob_path(@project.namespace, @project, "markdown/doc/api/README.md")
+    wait_for_ajax
     expect(page).to have_content "All API requests require authentication"
   end
 
@@ -162,6 +168,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
   # Expected link contents
 
   step 'The link with text "empty" should have url "tree/markdown"' do
+    wait_for_ajax
     find('a', text: /^empty$/)['href'] == current_host + namespace_project_tree_path(@project.namespace, @project, "markdown")
   end
 
@@ -197,6 +204,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
   end
 
   step 'The link with text "ID" should have url "blob/markdown/README.mdID"' do
+    wait_for_ajax
     find('a', text: /^#id$/)['href'] == current_host + namespace_project_blob_path(@project.namespace, @project, "markdown/README.md") + '#id'
   end
 
@@ -291,10 +299,12 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I should see the correct markdown' do
     expect(current_path).to eq namespace_project_blob_path(@project.namespace, @project, "markdown/doc/api/users.md")
+    wait_for_ajax
     expect(page).to have_content "List users"
   end
 
   step 'Header "Application details" should have correct id and link' do
+    wait_for_ajax
     header_should_have_correct_id_and_link(2, 'Application details', 'application-details')
   end
 

features/steps/shared/markdown.rb

@@ -3,7 +3,7 @@ module SharedMarkdown
 
   def header_should_have_correct_id_and_link(level, text, id, parent = ".wiki")
     node = find("#{parent} h#{level} a#user-content-#{id}")
-    expect(node[:href]).to eq "##{id}"
+    expect(node[:href]).to end_with "##{id}"
 
     # Work around a weird Capybara behavior where calling `parent` on a node
     # returns the whole document, not the node's actual parent element

lib/gitlab/git/blob.rb

@@ -109,10 +109,6 @@ module Gitlab
         @binary.nil? ? super : @binary == true
       end
 
-      def empty?
-        !data || data == ''
-      end
-
       def data
         encode! @data
       end

spec/features/projects/blobs/blob_show_spec.rb

 require 'spec_helper'
 
-feature 'File blob', feature: true do
+feature 'File blob', :js, feature: true do
   include TreeHelper
+  include WaitForAjax
 
-  let(:project) { create(:project, :public, :test_repo) }
-  let(:merge_request) { create(:merge_request, source_project: project, source_branch: 'feature', target_branch: 'master') }
-  let(:branch) { 'master' }
-  let(:file_path) { project.repository.ls_files(project.repository.root_ref)[1] }
+  let(:project) { create(:project, :public) }
 
-  context 'anonymous' do
-    context 'from blob file path' do
+  def visit_blob(path, fragment = nil)
+    visit namespace_project_blob_path(project.namespace, project, tree_join('master', path), anchor: fragment)
+  end
+
+  context 'Ruby file' do
+    before do
+      visit_blob('files/ruby/popen.rb')
+
+      wait_for_ajax
+    end
+
+    it 'displays the blob' do
+      aggregate_failures do
+        # shows highlighted Ruby code
+        expect(page).to have_content("require 'fileutils'")
+
+        # does not show a viewer switcher
+        expect(page).not_to have_selector('.js-blob-viewer-switcher')
+
+        # shows an enabled copy button
+        expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+      end
+    end
+  end
+
+  context 'Markdown file' do
+    context 'visiting directly' do
+      before do
+        visit_blob('files/markdown/ruby-style-guide.md')
+
+        wait_for_ajax
+      end
+
+      it 'displays the blob' do
+        aggregate_failures do
+          # hides the simple viewer
+          expect(page).to have_selector('.blob-viewer[data-type="simple"]', visible: false)
+          expect(page).to have_selector('.blob-viewer[data-type="rich"]')
+
+          # shows rendered Markdown
+          expect(page).to have_link("PEP-8")
+
+          # shows a viewer switcher
+          expect(page).to have_selector('.js-blob-viewer-switcher')
+
+          # shows a disabled copy button
+          expect(page).to have_selector('.js-copy-blob-source-btn.disabled')
+        end
+      end
+
+      context 'switching to the simple viewer' do
+        before do
+          find('.js-blob-viewer-switch-btn[data-viewer=simple]').click
+
+          wait_for_ajax
+        end
+
+        it 'displays the blob' do
+          aggregate_failures do
+            # hides the rich viewer
+            expect(page).to have_selector('.blob-viewer[data-type="simple"]')
+            expect(page).to have_selector('.blob-viewer[data-type="rich"]', visible: false)
+
+            # shows highlighted Markdown code
+            expect(page).to have_content("[PEP-8](http://www.python.org/dev/peps/pep-0008/)")
+
+            # shows an enabled copy button
+            expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+          end
+        end
+
+        context 'switching to the rich viewer again' do
+          before do
+            find('.js-blob-viewer-switch-btn[data-viewer=rich]').click
+
+            wait_for_ajax
+          end
+
+          it 'displays the blob' do
+            aggregate_failures do
+              # hides the simple viewer
+              expect(page).to have_selector('.blob-viewer[data-type="simple"]', visible: false)
+              expect(page).to have_selector('.blob-viewer[data-type="rich"]')
+
+              # shows an enabled copy button
+              expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+            end
+          end
+        end
+      end
+    end
+
+    context 'visiting with a line number anchor' do
+      before do
+        visit_blob('files/markdown/ruby-style-guide.md', 'L1')
+
+        wait_for_ajax
+      end
+
+      it 'displays the blob' do
+        aggregate_failures do
+          # hides the rich viewer
+          expect(page).to have_selector('.blob-viewer[data-type="simple"]')
+          expect(page).to have_selector('.blob-viewer[data-type="rich"]', visible: false)
+
+          # highlights the line in question
+          expect(page).to have_selector('#LC1.hll')
+
+          # shows highlighted Markdown code
+          expect(page).to have_content("[PEP-8](http://www.python.org/dev/peps/pep-0008/)")
+
+          # shows an enabled copy button
+          expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+        end
+      end
+    end
+  end
+
+  context 'Markdown file (stored in LFS)' do
+    before do
+      project.add_master(project.creator)
+
+      Files::CreateService.new(
+        project,
+        project.creator,
+        start_branch: 'master',
+        branch_name: 'master',
+        commit_message: "Add Markdown in LFS",
+        file_path: 'files/lfs/file.md',
+        file_content: project.repository.blob_at('master', 'files/lfs/lfs_object.iso').data
+      ).execute
+    end
+
+    context 'when LFS is enabled on the project' do
+      before do
+        allow(Gitlab.config.lfs).to receive(:enabled).and_return(true)
+        project.update_attribute(:lfs_enabled, true)
+
+        visit_blob('files/lfs/file.md')
+
+        wait_for_ajax
+      end
+
+      it 'displays the blob' do
+        aggregate_failures do
+          # hides the simple viewer
+          expect(page).to have_selector('.blob-viewer[data-type="simple"]', visible: false)
+          expect(page).to have_selector('.blob-viewer[data-type="rich"]')
+
+          # shows an error message
+          expect(page).to have_content('The rendered file could not be displayed because it is stored in LFS. You can view the source or download it instead.')
+
+          # shows a viewer switcher
+          expect(page).to have_selector('.js-blob-viewer-switcher')
+
+          # does not show a copy button
+          expect(page).not_to have_selector('.js-copy-blob-source-btn')
+        end
+      end
+
+      context 'switching to the simple viewer' do
+        before do
+          find('.js-blob-viewer-switcher .js-blob-viewer-switch-btn[data-viewer=simple]').click
+
+          wait_for_ajax
+        end
+
+        it 'displays the blob' do
+          aggregate_failures do
+            # hides the rich viewer
+            expect(page).to have_selector('.blob-viewer[data-type="simple"]')
+            expect(page).to have_selector('.blob-viewer[data-type="rich"]', visible: false)
+
+            # shows an error message
+            expect(page).to have_content('The source could not be displayed because it is stored in LFS. You can download it instead.')
+
+            # does not show a copy button
+            expect(page).not_to have_selector('.js-copy-blob-source-btn')
+          end
+        end
+      end
+    end
+
+    context 'when LFS is disabled on the project' do
+      before do
+        visit_blob('files/lfs/file.md')
+
+        wait_for_ajax
+      end
+
+      it 'displays the blob' do
+        aggregate_failures do
+          # shows text
+          expect(page).to have_content('size 1575078')
+
+          # does not show a viewer switcher
+          expect(page).not_to have_selector('.js-blob-viewer-switcher')
+
+          # shows an enabled copy button
+          expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+        end
+      end
+    end
+  end
+
+  context 'PDF file' do
+    before do
+      project.add_master(project.creator)
+
+      Files::CreateService.new(
+        project,
+        project.creator,
+        start_branch: 'master',
+        branch_name: 'master',
+        commit_message: "Add PDF",
+        file_path: 'files/test.pdf',
+        file_content: File.read(Rails.root.join('spec/javascripts/blob/pdf/test.pdf'))
+      ).execute
+
+      visit_blob('files/test.pdf')
+
+      wait_for_ajax
+    end
+
+    it 'displays the blob' do
+      aggregate_failures do
+        # shows rendered PDF
+        expect(page).to have_selector('.js-pdf-viewer')
+
+        # does not show a viewer switcher
+        expect(page).not_to have_selector('.js-blob-viewer-switcher')
+
+        # does not show a copy button
+        expect(page).not_to have_selector('.js-copy-blob-source-btn')
+      end
+    end
+  end
+
+  context 'ISO file (stored in LFS)' do
+    context 'when LFS is enabled on the project' do
+      before do
+        allow(Gitlab.config.lfs).to receive(:enabled).and_return(true)
+        project.update_attribute(:lfs_enabled, true)
+
+        visit_blob('files/lfs/lfs_object.iso')
+
+        wait_for_ajax
+      end
+
+      it 'displays the blob' do
+        aggregate_failures do
+          # shows a download link
+          expect(page).to have_link('Download (1.5 MB)')
+
+          # does not show a viewer switcher
+          expect(page).not_to have_selector('.js-blob-viewer-switcher')
+
+          # does not show a copy button
+          expect(page).not_to have_selector('.js-copy-blob-source-btn')
+        end
+      end
+    end
+
+    context 'when LFS is disabled on the project' do
+      before do
+        visit_blob('files/lfs/lfs_object.iso')
+
+        wait_for_ajax
+      end
+
+      it 'displays the blob' do
+        aggregate_failures do
+          # shows text
+          expect(page).to have_content('size 1575078')
+
+          # does not show a viewer switcher
+          expect(page).not_to have_selector('.js-blob-viewer-switcher')
+
+          # shows an enabled copy button
+          expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+        end
+      end
+    end
+  end
+
+  context 'ZIP file' do
     before do
-        visit namespace_project_blob_path(project.namespace, project, tree_join(branch, file_path))
+      visit_blob('Gemfile.zip')
+
+      wait_for_ajax
     end
 
-      it 'updates content' do
-        expect(page).to have_link  'Edit'
+    it 'displays the blob' do
+      aggregate_failures do
+        # shows a download link
+        expect(page).to have_link('Download (2.11 KB)')
+
+        # does not show a viewer switcher
+        expect(page).not_to have_selector('.js-blob-viewer-switcher')
+
+        # does not show a copy button
+        expect(page).not_to have_selector('.js-copy-blob-source-btn')
       end
     end
   end

spec/features/projects/files/browse_files_spec.rb

 require 'spec_helper'
 
-feature 'user browses project', feature: true do
+feature 'user browses project', feature: true, js: true do
   let(:project) { create(:project) }
   let(:user) { create(:user) }
 
@@ -24,6 +24,7 @@ feature 'user browses project', feature: true do
     click_link 'files'
     click_link 'lfs'
     click_link 'lfs_object.iso'
+    wait_for_ajax
 
     expect(page).not_to have_content 'Download (1.5 MB)'
     expect(page).to have_content 'version https://git-lfs.github.com/spec/v1'

spec/helpers/blob_helper_spec.rb

@@ -56,15 +56,14 @@ describe BlobHelper do
     end
   end
 
-  describe "#sanitize_svg" do
+  describe "#sanitize_svg_data" do
     let(:input_svg_path) { File.join(Rails.root, 'spec', 'fixtures', 'unsanitized.svg') }
     let(:data) { open(input_svg_path).read }
     let(:expected_svg_path) { File.join(Rails.root, 'spec', 'fixtures', 'sanitized.svg') }
     let(:expected) { open(expected_svg_path).read }
 
     it 'retains essential elements' do
-      blob = OpenStruct.new(data: data)
-      expect(sanitize_svg(blob).data).to eq(expected)
+      expect(sanitize_svg_data(data)).to eq(expected)
     end
   end
 
@@ -105,4 +104,113 @@ describe BlobHelper do
       expect(Capybara.string(link).find_link('Edit')[:href]).to eq('/gitlab/gitlabhq/edit/master/README.md?mr_id=10')
     end
   end
+
+  context 'viewer related' do
+    include FakeBlobHelpers
+
+    let(:project) { build(:empty_project) }
+
+    let(:viewer_class) do
+      Class.new(BlobViewer::Base) do
+        self.max_size = 1.megabyte
+        self.absolute_max_size = 5.megabytes
+        self.type = :rich
+        self.client_side = false
+      end
+    end
+
+    let(:viewer) { viewer_class.new(blob) }
+    let(:blob) { fake_blob }
+
+    before do
+      assign(:project, project)
+      assign(:id, File.join('master', blob.path))
+
+      controller.params[:controller] = 'projects/blob'
+      controller.params[:action] = 'show'
+      controller.params[:namespace_id] = project.namespace.to_param
+      controller.params[:project_id] = project.to_param
+      controller.params[:id] = File.join('master', blob.path)
+    end
+
+    describe '#blob_render_error_reason' do
+      context 'for error :too_large' do
+        context 'when the blob size is larger than the absolute max size' do
+          let(:blob) { fake_blob(size: 10.megabytes) }
+
+          it 'returns an error message' do
+            expect(helper.blob_render_error_reason(viewer, :too_large)).to eq('it is larger than 5 MB')
+          end
+        end
+
+        context 'when the blob size is larger than the max size' do
+          let(:blob) { fake_blob(size: 2.megabytes) }
+
+          it 'returns an error message' do
+            expect(helper.blob_render_error_reason(viewer, :too_large)).to eq('it is larger than 1 MB')
+          end
+        end
+      end
+
+      context 'for error :server_side_but_stored_in_lfs' do
+        it 'returns an error message' do
+          expect(helper.blob_render_error_reason(viewer, :server_side_but_stored_in_lfs)).to eq('it is stored in LFS')
+        end
+      end
+    end
+
+    describe '#blob_render_error_options' do
+      context 'for error :too_large' do
+        context 'when the max size can be overridden' do
+          let(:blob) { fake_blob(size: 2.megabytes) }
+
+          it 'includes a "load it anyway" link' do
+            expect(helper.blob_render_error_options(viewer, :too_large)).to include(/load it anyway/)
+          end
+        end
+
+        context 'when the max size cannot be overridden' do
+          let(:blob) { fake_blob(size: 10.megabytes) }
+
+          it 'does not include a "load it anyway" link' do
+            expect(helper.blob_render_error_options(viewer, :too_large)).not_to include(/load it anyway/)
+          end
+        end
+      end
+
+      context 'when the viewer is rich' do
+        context 'the blob is rendered as text' do
+          let(:blob) { fake_blob(path: 'file.md') }
+
+          it 'includes a "view the source" link' do
+            expect(helper.blob_render_error_options(viewer, :server_side_but_stored_in_lfs)).to include(/view the source/)
+          end
+        end
+
+        context 'the blob is not rendered as text' do
+          let(:blob) { fake_blob(path: 'file.pdf', binary: true) }
+
+          it 'does not include a "view the source" link' do
+            expect(helper.blob_render_error_options(viewer, :server_side_but_stored_in_lfs)).not_to include(/view the source/)
+          end
+        end
+      end
+
+      context 'when the viewer is not rich' do
+        before do
+          viewer_class.type = :simple
+        end
+
+        let(:blob) { fake_blob(path: 'file.md') }
+
+        it 'does not include a "view the source" link' do
+          expect(helper.blob_render_error_options(viewer, :server_side_but_stored_in_lfs)).not_to include(/view the source/)
+        end
+      end
+
+      it 'includes a "download it" link' do
+        expect(helper.blob_render_error_options(viewer, :server_side_but_stored_in_lfs)).to include(/download it/)
+      end
+    end
+  end
 end

spec/javascripts/blob/viewer/index_spec.js

+/* eslint-disable no-new */
+import BlobViewer from '~/blob/viewer/index';
+
+describe('Blob viewer', () => {
+  preloadFixtures('blob/show.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('blob/show.html.raw');
+    $('#modal-upload-blob').remove();
+
+    new BlobViewer();
+
+    spyOn($, 'ajax').and.callFake(() => {
+      const d = $.Deferred();
+
+      d.resolve({
+        html: '<div>testing</div>',
+      });
+
+      return d.promise();
+    });
+  });
+
+  afterEach(() => {
+    location.hash = '';
+  });
+
+  it('loads source file after switching views', (done) => {
+    document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
+
+    setTimeout(() => {
+      expect($.ajax).toHaveBeenCalled();
+      expect(
+        document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
+          .classList.contains('hidden'),
+      ).toBeFalsy();
+
+      done();
+    });
+  });
+
+  it('loads source file when line number is in hash', (done) => {
+    location.hash = '#L1';
+
+    new BlobViewer();
+
+    setTimeout(() => {
+      expect($.ajax).toHaveBeenCalled();
+      expect(
+        document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
+          .classList.contains('hidden'),
+      ).toBeFalsy();
+
+      done();
+    });
+  });
+
+  it('doesnt reload file if already loaded', (done) => {
+    const asyncClick = () => new Promise((resolve) => {
+      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
+
+      setTimeout(resolve);
+    });
+
+    asyncClick()
+      .then(() => {
+        expect($.ajax).toHaveBeenCalled();
+        return asyncClick();
+      })
+      .then(() => {
+        expect($.ajax.calls.count()).toBe(1);
+        expect(
+          document.querySelector('.blob-viewer[data-type="simple"]').getAttribute('data-loaded'),
+        ).toBe('true');
+
+        done();
+      });
+  });
+
+  describe('copy blob button', () => {
+    it('disabled on load', () => {
+      expect(
+        document.querySelector('.js-copy-blob-source-btn').classList.contains('disabled'),
+      ).toBeTruthy();
+    });
+
+    it('has tooltip when disabled', () => {
+      expect(
+        document.querySelector('.js-copy-blob-source-btn').getAttribute('data-original-title'),
+      ).toBe('Switch to the source view to copy the source to the clipboard');
+    });
+
+    it('enables after switching to simple view', (done) => {
+      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
+
+      setTimeout(() => {
+        expect($.ajax).toHaveBeenCalled();
+        expect(
+          document.querySelector('.js-copy-blob-source-btn').classList.contains('disabled'),
+        ).toBeFalsy();
+
+        done();
+      });
+    });
+
+    it('updates tooltip after switching to simple view', (done) => {
+      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
+
+      setTimeout(() => {
+        expect($.ajax).toHaveBeenCalled();
+
+        expect(
+          document.querySelector('.js-copy-blob-source-btn').getAttribute('data-original-title'),
+        ).toBe('Copy to clipboard');
+
+        done();
+      });
+    });
+  });
+});

spec/javascripts/fixtures/blob.rb

+require 'spec_helper'
+
+describe Projects::BlobController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, :repository, namespace: namespace, path: 'branches-project') }
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('blob/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  it 'blob/show.html.raw' do |example|
+    get(:show,
+        namespace_id: project.namespace,
+        project_id: project,
+        id: 'add-ipython-files/files/ipython/basic.ipynb')
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end

spec/models/blob_viewer/base_spec.rb

+require 'spec_helper'
+
+describe BlobViewer::Base, model: true do
+  include FakeBlobHelpers
+
+  let(:project) { build(:empty_project) }
+
+  let(:viewer_class) do
+    Class.new(described_class) do
+      self.extensions = %w(pdf)
+      self.max_size = 1.megabyte
+      self.absolute_max_size = 5.megabytes
+      self.client_side = false
+    end
+  end
+
+  let(:viewer) { viewer_class.new(blob) }
+
+  describe '.can_render?' do
+    context 'when the extension is supported' do
+      let(:blob) { fake_blob(path: 'file.pdf') }
+
+      it 'returns true' do
+        expect(viewer_class.can_render?(blob)).to be_truthy
+      end
+    end
+
+    context 'when the extension is not supported' do
+      let(:blob) { fake_blob(path: 'file.txt') }
+
+      it 'returns false' do
+        expect(viewer_class.can_render?(blob)).to be_falsey
+      end
+    end
+  end
+
+  describe '#too_large?' do
+    context 'when the blob size is larger than the max size' do
+      let(:blob) { fake_blob(path: 'file.pdf', size: 2.megabytes) }
+
+      it 'returns true' do
+        expect(viewer.too_large?).to be_truthy
+      end
+    end
+
+    context 'when the blob size is smaller than the max size' do
+      let(:blob) { fake_blob(path: 'file.pdf', size: 10.kilobytes) }
+
+      it 'returns false' do
+        expect(viewer.too_large?).to be_falsey
+      end
+    end
+  end
+
+  describe '#absolutely_too_large?' do
+    context 'when the blob size is larger than the absolute max size' do
+      let(:blob) { fake_blob(path: 'file.pdf', size: 10.megabytes) }
+
+      it 'returns true' do
+        expect(viewer.absolutely_too_large?).to be_truthy
+      end
+    end
+
+    context 'when the blob size is smaller than the absolute max size' do
+      let(:blob) { fake_blob(path: 'file.pdf', size: 2.megabytes) }
+
+      it 'returns false' do
+        expect(viewer.absolutely_too_large?).to be_falsey
+      end
+    end
+  end
+
+  describe '#can_override_max_size?' do
+    context 'when the blob size is larger than the max size' do
+      context 'when the blob size is larger than the absolute max size' do
+        let(:blob) { fake_blob(path: 'file.pdf', size: 10.megabytes) }
+
+        it 'returns false' do
+          expect(viewer.can_override_max_size?).to be_falsey
+        end
+      end
+
+      context 'when the blob size is smaller than the absolute max size' do
+        let(:blob) { fake_blob(path: 'file.pdf', size: 2.megabytes) }
+
+        it 'returns true' do
+          expect(viewer.can_override_max_size?).to be_truthy
+        end
+      end
+    end
+
+    context 'when the blob size is smaller than the max size' do
+      let(:blob) { fake_blob(path: 'file.pdf', size: 10.kilobytes) }
+
+      it 'returns false' do
+        expect(viewer.can_override_max_size?).to be_falsey
+      end
+    end
+  end
+
+  describe '#render_error' do
+    context 'when the max size is overridden' do
+      before do
+        viewer.override_max_size = true
+      end
+
+      context 'when the blob size is larger than the absolute max size' do
+        let(:blob) { fake_blob(path: 'file.pdf', size: 10.megabytes) }
+
+        it 'returns :too_large' do
+          expect(viewer.render_error).to eq(:too_large)
+        end
+      end
+
+      context 'when the blob size is smaller than the absolute max size' do
+        let(:blob) { fake_blob(path: 'file.pdf', size: 2.megabytes) }
+
+        it 'returns nil' do
+          expect(viewer.render_error).to be_nil
+        end
+      end
+    end
+
+    context 'when the max size is not overridden' do
+      context 'when the blob size is larger than the max size' do
+        let(:blob) { fake_blob(path: 'file.pdf', size: 2.megabytes) }
+
+        it 'returns :too_large' do
+          expect(viewer.render_error).to eq(:too_large)
+        end
+      end
+
+      context 'when the blob size is smaller than the max size' do
+        let(:blob) { fake_blob(path: 'file.pdf', size: 10.kilobytes) }
+
+        it 'returns nil' do
+          expect(viewer.render_error).to be_nil
+        end
+      end
+    end
+
+    context 'when the viewer is server side but the blob is stored in LFS' do
+      let(:project) { build(:empty_project, lfs_enabled: true) }
+
+      let(:blob) { fake_blob(path: 'file.pdf', lfs: true) }
+
+      before do
+        allow(Gitlab.config.lfs).to receive(:enabled).and_return(true)
+      end
+
+      it 'return :server_side_but_stored_in_lfs' do
+        expect(viewer.render_error).to eq(:server_side_but_stored_in_lfs)
+      end
+    end
+  end
+
+  describe '#prepare!' do
+    context 'when the viewer is server side' do
+      let(:blob) { fake_blob(path: 'file.md') }
+
+      before do
+        viewer_class.client_side = false
+      end
+
+      it 'loads all blob data' do
+        expect(blob).to receive(:load_all_data!)
+
+        viewer.prepare!
+      end
+    end
+
+    context 'when the viewer is client side' do
+      let(:blob) { fake_blob(path: 'file.md') }
+
+      before do
+        viewer_class.client_side = true
+      end
+
+      it "doesn't load all blob data" do
+        expect(blob).not_to receive(:load_all_data!)
+
+        viewer.prepare!
+      end
+    end
+  end
+end

spec/support/helpers/fake_blob_helpers.rb

+module FakeBlobHelpers
+  class FakeBlob
+    include Linguist::BlobHelper
+
+    attr_reader :path, :size, :data, :lfs_oid, :lfs_size
+
+    def initialize(path: 'file.txt', size: 1.kilobyte, data: 'foo', binary: false, lfs: nil)
+      @path = path
+      @size = size
+      @data = data
+      @binary = binary
+
+      @lfs_pointer = lfs.present?
+      if @lfs_pointer
+        @lfs_oid = SecureRandom.hex(20)
+        @lfs_size = 1.megabyte
+      end
+    end
+
+    alias_method :name, :path
+
+    def mode
+      nil
+    end
+
+    def id
+      0
+    end
+
+    def binary?
+      @binary
+    end
+
+    def load_all_data!(repository)
+      # No-op
+    end
+
+    def lfs_pointer?
+      @lfs_pointer
+    end
+
+    def truncated?
+      false
+    end
+  end
+
+  def fake_blob(**kwargs)
+    Blob.decorate(FakeBlob.new(**kwargs), project)
+  end
+end

spec/views/projects/blob/_viewer.html.haml_spec.rb

+require 'spec_helper'
+
+describe 'projects/blob/_viewer.html.haml', :view do
+  include FakeBlobHelpers
+
+  let(:project) { build(:empty_project) }
+
+  let(:viewer_class) do
+    Class.new(BlobViewer::Base) do
+      include BlobViewer::Rich
+
+      self.partial_name = 'text'
+      self.max_size = 1.megabyte
+      self.absolute_max_size = 5.megabytes
+      self.client_side = false
+    end
+  end
+
+  let(:viewer) { viewer_class.new(blob) }
+  let(:blob) { fake_blob }
+
+  before do
+    assign(:project, project)
+    assign(:id, File.join('master', blob.path))
+
+    controller.params[:controller] = 'projects/blob'
+    controller.params[:action] = 'show'
+    controller.params[:namespace_id] = project.namespace.to_param
+    controller.params[:project_id] = project.to_param
+    controller.params[:id] = File.join('master', blob.path)
+  end
+
+  def render_view
+    render partial: 'projects/blob/viewer', locals: { viewer: viewer }
+  end
+
+  context 'when the viewer is server side' do
+    before do
+      viewer_class.client_side = false
+    end
+
+    context 'when there is no render error' do
+      it 'adds a URL to the blob viewer element' do
+        render_view
+
+        expect(rendered).to have_css('.blob-viewer[data-url]')
+      end
+
+      it 'displays a spinner' do
+        render_view
+
+        expect(rendered).to have_css('i[aria-label="Loading content"]')
+      end
+    end
+
+    context 'when there is a render error' do
+      let(:blob) { fake_blob(size: 10.megabytes) }
+
+      it 'renders the error' do
+        render_view
+
+        expect(view).to render_template('projects/blob/_render_error')
+      end
+    end
+  end
+
+  context 'when the viewer is client side' do
+    before do
+      viewer_class.client_side = true
+    end
+
+    context 'when there is no render error' do
+      it 'prepares the viewer' do
+        expect(viewer).to receive(:prepare!)
+
+        render_view
+      end
+
+      it 'renders the viewer' do
+        render_view
+
+        expect(view).to render_template('projects/blob/viewers/_text')
+      end
+    end
+
+    context 'when there is a render error' do
+      let(:blob) { fake_blob(size: 10.megabytes) }
+
+      it 'renders the error' do
+        render_view
+
+        expect(view).to render_template('projects/blob/_render_error')
+      end
+    end
+  end
+end