Add option to control tab width when viewing files

Tabulation character (0x09, \t) is always rendered with a width of 8 spaces, but many projects use 4 spaces for the width of tabs. It is important that when code is rendered in GitLab the tab sizes are consistent with how it is viewed in a local editor so that the code is easy to read.

Not sure if this is Firefox's default or if the highlighter sets this (Chromium does the same). Couldn't find a configuration for Gitlab (gitlab.rb, GUI or even CSS from 'rouge' library) nor for Firefox.

We should provide per-project configuration for tab width.

Proposal

We should use the established EditorConfig file to reuse the settings that are likely already in the repository and supported by major editors.

If a .editorconfig file is present in the repositories root, use the indent_size and tab_width to render the source code.

Links

https://editorconfig.org/#file-format-details

We need this for our MR reviews so after searching a bit, it seems the tab-size CSS value controls this. A simple workaround was to add that CSS value to GitLab's stylesheet.

Here are the steps I documented locally to change this CSS value on our GitLab server installed through omnibus on Ubuntu 14.04:

Tab Size

By default, browsers will use a tab width of 8 spaces. This means that, since we use tabs instead of spaces in the code, code browsing and diffs viewing will show tabs as the equivalent of 8 spaces while we use a tab width of 4 spaces instead. This makes looking at code confusing.

GitLab does not expose this setting; it's a Firefox/Chrome default of 8 spaces. To change, CSS need to be explicitly set. The simplest would be to use:

* {
  tab-size: 4;
}

to set the tab-size CSS value of every elements.

GitLab has pre-compiled CSS files called assets. Sass is used to preprocess .scss files into .css files (see some info here).

So to set the tab size to 4, append at the end of /opt/gitlab/embedded/service/gitlab-rails/app/assets/stylesheets/application.scss the following content:

/**
 * Tab size of 4
 * See:
 *   https://gitlab.com/gitlab-org/gitlab-ce/issues/2479
 *   http://feedback.gitlab.com/forums/176466-general/suggestions/3983255-customizable-tab-width-in-diffs
 *   http://axilleas.me/en/blog/2014/custom-gitlab-login-page/
 */
* {
  tab-size: 4;
}

Then recompile the assets:

sudo gitlab-ctl stop
sudo chmod a+w -R /opt/gitlab/embedded/service/gitlab-rails/public/assets/
sudo gitlab-rake assets:clean RAILS_ENV=production
sudo gitlab-rake assets:precompile RAILS_ENV=production
sudo chmod a-w -R /opt/gitlab/embedded/service/gitlab-rails/public/assets/
sudo gitlab-ctl start

NOTE: This will need to be performed with every GitLab update.

At the end you may have to run the command

gitlab-ctl reconfigure

The problem I am having now is that in GitLab 8.4 any changes I make to css or scss files does not show up on the site. I tried the recompile assets commands as mentioned above. I even cleared my browser cache and nothing. Any idea if I am missing something. I even did a search on the css code and did not even find "tab-size". Also I am using GitLab Enterprise edition which should be same.

Hey! It's been at least 2 weeks (and several releases of GitLab) since we heard from you. I'm closing this issue but if you still experience this problem, please open a new issue (but also reference the old issue(s)). Make sure to also include the necessary debugging information conforming to the issue tracker guidelines found in our contributing guidelines.

Thanks for using GitLab!

Status changed to closed

The problem is still persisting with latest gitlab.

@mattl I'm not sure I understand your comment. That issue has been present for many months and is still present. It's not a complicated thing (just a css rule missing/not implemented?). I'm not sure I can provide any more information to this issue (except that it's still present...)

In the end it depends on if GitLab wants to implement this or not, which is another question altogether.

+1 on this, the 8 spaces that my browser uses for tab sizes makes code look blatantly ridiculous.

There is the argument that this is a browser setting, but here is no easy way to change such a setting! Without this being easily available to change in the browser, my 2c is that GitLab should provide a setting to change it.

I agree that this would be a useful feature.

Someone with more privileges (or the OP?) needs to reopen this issue...

I use two spaces in my editor and everything looks uniform (nothing exceeds the 80th column), but when I upload it to gitlab none of my code is uniform any more and it looks like crap.

@mattl Please reopen as the issue is not resolved.

I've created a new issue https://gitlab.com/gitlab-org/gitlab-ce/issues/27688 as that seems to be what is required to bring this forward.

reopened

@awhildy This issue has gained a bit of attention. Should this be configurable?

added ~127616 ~19492 ~13261 labels

Thoughts on this @pedroms?

I don't see any reason why we shouldn't make tabs the width of 4 spaces by default. From a quick search, I haven't found any editor with 8-space tabs. Right now it looks weird:

Adding something like this would work (Firefox and Opera need a prefix):

pre {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

There has been a discussion for a few years about implementing this on GitHub: https://github.com/isaacs/github/issues/170

To make this more bulletproof, the next step would be to support .editorconfig.

@filipa do you see anything against changing the default? Thoughts?

@markglenfletcher I wouldn't make it user configurable but rather repo configurable through .editorconfig. This preserves the project's consistency and respects the author's intent. For now, I would scope this issue to changing the default through CSS and create an issue for .editorconfig support.

added ~974571 and removed ~19492 labels

added ~20048 label

If we change tab size to 4 in CSS, will we break anything else? How would 2 spaces look?

By inspecting the code I am not sure if this would be as easy as setting tab-size in pre element, since we don't use it

@DouweM @smcgivern any suggestions?

@filipa I think we do use pre on the blob view page, don't we? https://gitlab.com/gitlab-org/gitlab-ce/blob/master/.rubocop_todo.yml

@pedroms I think having this set by .editorconfig would be cool. It does mean that we would need to parse and cache that per-repository, though: https://gitlab.com/gitlab-org/gitlab-ce/blob/v8.17.3/app/models/repository.rb#L19-22

hum @smcgivern not in the MR diffs:

@filipa you're right, we don't in diffs!

What @nbigaouette1 proposed is not working anymore with 9.1.2.

We were using a script to change the tab-size

Here are issues that seem to be related to the problem:

• gitlab-ce#28743
• gitlab-ce#28630

Anyone has a temporary solution until we get a .editorconfig as @pedroms proposed?

How would 2 spaces look?

@filipa what do you mean?

@filipa @smcgivern diff views use a table element. Alternatively, setting tab-size: 4 on the body element also works.

@pedroms I disagree. The very reason that my project at work is using tabs is that we each prefer our own unique tab widths. This should be configurable per-user. Perhaps use .editorconfig setting by default, but that is overridden by user in settings (default settings value "same as project").

@pedroms Was there ever an issue raised to implement .editorconfig support? Or is there WIP or merges seheduled in a future release? There does seem to be large support for the idea on this here, and on the mentioned GitHub issue (they have implemented it some time ago now), but I couldn't find anything relevant by searching.

Is there any update on this? If I have to edit Gitlab's CSS manually is the first post's method still valid?

Is there any movement on this? It's been a year and we're still having to edit a css file by hand every time we update gitlab.

Could there really be no way to allow the setting of the tab-width property for how things are displayed? Or for gitlab to support a per project .editorconfig file.

Please, update this. Tabs with size 8 are horrible.

Any plans on this issue? Super cool DevOps and beyond functionality is good, but let us not forget about simple little things.

Agree, it's all about the little things. This is a huge QOL feature and implementing it probably won't take more than a few hours (just a CSS rule and a way to apply it, either with a button/combobox/checkbox/whatever in the code view or a user setting)

/cc @sarrahvesselov

I saved following script as bookmark in browser:

javascript:(function(){var h=document.getElementsByTagName('html')[0];h.style = 'tab-size:4;' + h.style;})();

it's not perfect, but most comfortable workaround.

I was able to address this issue in Chrome by installing the Stylish extension, and creating a site-wide CSS stylesheet for gitlab.com which applies the following:

* {
  tab-size: 2;
}

This is nice because the style is applied automatically for any gitlab page; no bookmark click required.

@pedroms, can you take another look at this issue when you get a chance? Sounds like there is some further feedback on your proposed solution. Would be nice to get this one wrapped up.