Add setTabWidth function

This function finds elements with "js-set-tab-width" class and
appends to them a "tab-width-N" class (where N is a tab width value
received from gon.tab_width).

app/assets/stylesheets/utilities.scss

@@ -28,6 +28,13 @@
   }
 }
 
+@for $i from 1 through 12 {
+  #{'.tab-width-#{$i}'} {
+    -moz-tab-size: $i;
+    tab-size: $i;
+  }
+}
+
 .border-width-1px { border-width: 1px; }
 .border-bottom-width-1px { border-bottom-width: 1px; }
 .border-style-dashed { border-style: dashed; }

app/controllers/profiles/preferences_controller.rb

@@ -48,6 +48,7 @@ class Profiles::PreferencesController < Profiles::ApplicationController
       :time_display_relative,
       :time_format_in_24h,
       :show_whitespace_in_diffs,
+      :tab_width,
       :sourcegraph_enabled,
       :render_whitespace_in_code
     ]

app/helpers/preferences_helper.rb

@@ -63,6 +63,10 @@ module PreferencesHelper
     Gitlab::ColorSchemes.for_user(current_user).css_class
   end
 
+  def user_tab_width
+    Gitlab::TabWidth.css_class_for_user(current_user)
+  end
+
   def language_choices
     Gitlab::I18n::AVAILABLE_LANGUAGES.map { |value, label| [label, value] }
   end

app/models/user.rb

@@ -246,6 +246,7 @@ class User < ApplicationRecord
   delegate :time_display_relative, :time_display_relative=, to: :user_preference
   delegate :time_format_in_24h, :time_format_in_24h=, to: :user_preference
   delegate :show_whitespace_in_diffs, :show_whitespace_in_diffs=, to: :user_preference
+  delegate :tab_width, :tab_width=, to: :user_preference
   delegate :sourcegraph_enabled, :sourcegraph_enabled=, to: :user_preference
   delegate :setup_for_company, :setup_for_company=, to: :user_preference
   delegate :render_whitespace_in_code, :render_whitespace_in_code=, to: :user_preference

app/models/user_preference.rb

@@ -9,7 +9,13 @@ class UserPreference < ApplicationRecord
   belongs_to :user
 
   validates :issue_notes_filter, :merge_request_notes_filter, inclusion: { in: NOTES_FILTERS.values }, presence: true
+  validates :tab_width, numericality: {
+    only_integer: true,
+    greater_than_or_equal_to: Gitlab::TabWidth::MIN,
+    less_than_or_equal_to: Gitlab::TabWidth::MAX
+  }
 
+  default_value_for :tab_width, value: Gitlab::TabWidth::DEFAULT, allows_nil: false
   default_value_for :timezone, value: Time.zone.tzinfo.name, allows_nil: false
   default_value_for :time_display_relative, value: true, allows_nil: false
   default_value_for :time_format_in_24h, value: false, allows_nil: false

app/views/layouts/application.html.haml

@@ -4,7 +4,7 @@
 !!! 5
 %html{ lang: I18n.locale, class: page_classes }
   = render "layouts/head"
-  %body{ class: "#{user_application_theme} #{@body_class} #{client_class_list}", data: body_data }
+  %body{ class: "#{user_application_theme} #{user_tab_width} #{@body_class} #{client_class_list}", data: body_data }
     = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/init_client_detection_flags"
     = render 'peek/bar'

app/views/layouts/fullscreen.html.haml

 !!! 5
 %html{ lang: I18n.locale, class: page_class }
   = render "layouts/head"
-  %body{ class: "#{user_application_theme} #{@body_class} fullscreen-layout", data: { page: body_data_page } }
+  %body{ class: "#{user_application_theme} #{user_tab_width} #{@body_class} fullscreen-layout", data: { page: body_data_page } }
     = render 'peek/bar'
     = header_message
     = render partial: "layouts/header/default", locals: { project: @project, group: @group }

app/views/profiles/preferences/show.html.haml

@@ -69,6 +69,15 @@
       = f.check_box :show_whitespace_in_diffs, class: 'form-check-input'
       = f.label :show_whitespace_in_diffs, class: 'form-check-label' do
         = s_('Preferences|Show whitespace changes in diffs')
+    .form-group
+      = f.label :tab_width, s_('Preferences|Tab width'), class: 'label-bold'
+      = f.number_field :tab_width,
+                       class: 'form-control',
+                       min: Gitlab::TabWidth::MIN,
+                       max: Gitlab::TabWidth::MAX,
+                       required: true
+      .form-text.text-muted
+        = s_('Preferences|Must be a number between %{min} and %{max}') % { min: Gitlab::TabWidth::MIN, max: Gitlab::TabWidth::MAX }
 
   .col-sm-12
     %hr

app/views/profiles/preferences/update.js.erb

@@ -12,5 +12,9 @@ if ('<%= current_user.layout %>' === 'fluid') {
 // Re-enable the "Save" button
 $('input[type=submit]').enable()
 
-// Show the notice flash message
-new Flash('<%= flash.discard(:notice) %>', 'notice')
+// Show flash messages
+<% if flash.notice %>
+  new Flash('<%= flash.discard(:notice) %>', 'notice')
+<% elsif flash.alert %>
+  new Flash('<%= flash.discard(:alert) %>', 'alert')
+<% end %>

changelogs/unreleased/13904-tab-width-option.yml

+---
+title: Add tab width option to user preferences
+merge_request: 22063
+author: Alexander Oleynikov
+type: added

db/migrate/20191218190253_add_tab_width_to_user_preferences.rb

+# frozen_string_literal: true
+
+class AddTabWidthToUserPreferences < ActiveRecord::Migration[5.2]
+  DOWNTIME = false
+
+  def change
+    add_column(:user_preferences, :tab_width, :integer, limit: 2)
+  end
+end

db/schema.rb

@@ -4114,6 +4114,7 @@ ActiveRecord::Schema.define(version: 2020_02_04_131054) do
     t.boolean "sourcegraph_enabled"
     t.boolean "setup_for_company"
     t.boolean "render_whitespace_in_code"
+    t.integer "tab_width", limit: 2
     t.index ["user_id"], name: "index_user_preferences_on_user_id", unique: true
   end
 

doc/user/profile/preferences.md

@@ -108,6 +108,15 @@ You can choose between 3 options:
 - Readme
 - Activity
 
+### Tab width
+
+You can set the displayed width of tab characters across various parts of
+GitLab, for example, blobs, diffs, and snippets.
+
+NOTE: **Note:**
+Some parts of GitLab do not respect this setting, including the WebIDE, file
+editor and Markdown editor.
+
 ## Localization
 
 ### Language

lib/gitlab/tab_width.rb

+# frozen_string_literal: true
+
+module Gitlab
+  module TabWidth
+    extend self
+
+    MIN = 1
+    MAX = 12
+    DEFAULT = 8
+
+    def css_class_for_user(user)
+      return css_class_for_value(DEFAULT) unless user
+
+      css_class_for_value(user.tab_width)
+    end
+
+    private
+
+    def css_class_for_value(value)
+      raise ArgumentError unless in_range?(value)
+
+      "tab-width-#{value}"
+    end
+
+    def in_range?(value)
+      (MIN..MAX).cover?(value)
+    end
+  end
+end

locale/gitlab.pot

@@ -13963,6 +13963,9 @@ msgstr ""
 msgid "Preferences|Layout width"
 msgstr ""
 
+msgid "Preferences|Must be a number between %{min} and %{max}"
+msgstr ""
+
 msgid "Preferences|Navigation theme"
 msgstr ""
 
@@ -13981,6 +13984,9 @@ msgstr ""
 msgid "Preferences|Syntax highlighting theme"
 msgstr ""
 
+msgid "Preferences|Tab width"
+msgstr ""
+
 msgid "Preferences|These settings will update how dates and times are displayed for you."
 msgstr ""
 

spec/controllers/profiles/preferences_controller_spec.rb

@@ -47,6 +47,7 @@ describe Profiles::PreferencesController do
           theme_id: '2',
           first_day_of_week: '1',
           preferred_language: 'jp',
+          tab_width: '5',
           render_whitespace_in_code: 'true'
         }.with_indifferent_access
 

spec/features/profiles/user_edit_preferences_spec.rb

@@ -29,4 +29,31 @@ describe 'User edit preferences profile' do
 
     expect(field).not_to be_checked
   end
+
+  describe 'User changes tab width to acceptable value' do
+    it 'shows success message' do
+      fill_in 'Tab width', with: 9
+      click_button 'Save changes'
+
+      expect(page).to have_content('Preferences saved.')
+    end
+
+    it 'saves the value' do
+      tab_width_field = page.find_field('Tab width')
+
+      expect do
+        tab_width_field.fill_in with: 6
+        click_button 'Save changes'
+      end.to change { tab_width_field.value }
+    end
+  end
+
+  describe 'User changes tab width to unacceptable value' do
+    it 'shows error message' do
+      fill_in 'Tab width', with: -1
+      click_button 'Save changes'
+
+      expect(page).to have_content('Failed to save preferences')
+    end
+  end
 end

spec/lib/gitlab/tab_width_spec.rb

+# frozen_string_literal: true
+
+require 'fast_spec_helper'
+
+describe Gitlab::TabWidth, lib: true do
+  describe '.css_class_for_user' do
+    it 'returns default CSS class when user is nil' do
+      css_class = described_class.css_class_for_user(nil)
+
+      expect(css_class).to eq('tab-width-8')
+    end
+
+    it "returns CSS class for user's tab width", :aggregate_failures do
+      [1, 6, 12].each do |i|
+        user = double('user', tab_width: i)
+        css_class = described_class.css_class_for_user(user)
+
+        expect(css_class).to eq("tab-width-#{i}")
+      end
+    end
+
+    it 'raises if tab width is out of valid range', :aggregate_failures do
+      [0, 13, 'foo', nil].each do |i|
+        expect do
+          user = double('user', tab_width: i)
+          described_class.css_class_for_user(user)
+        end.to raise_error(ArgumentError)
+      end
+    end
+  end
+end

spec/models/user_preference_spec.rb

@@ -85,4 +85,19 @@ describe UserPreference do
       expect(user_preference.timezone).to eq(Time.zone.tzinfo.name)
     end
   end
+
+  describe '#tab_width' do
+    it 'is set to 8 by default' do
+      # Intentionally not using factory here to test the constructor.
+      pref = UserPreference.new
+      expect(pref.tab_width).to eq(8)
+    end
+
+    it do
+      is_expected.to validate_numericality_of(:tab_width)
+        .only_integer
+        .is_greater_than_or_equal_to(1)
+        .is_less_than_or_equal_to(12)
+    end
+  end
 end

spec/models/user_spec.rb

@@ -20,6 +20,9 @@ describe User, :do_not_mock_admin_mode do
 
   describe 'delegations' do
     it { is_expected.to delegate_method(:path).to(:namespace).with_prefix }
+
+    it { is_expected.to delegate_method(:tab_width).to(:user_preference) }
+    it { is_expected.to delegate_method(:tab_width=).to(:user_preference).with_arguments(5) }
   end
 
   describe 'associations' do