Configure tab size when viewing a file

[MarkusAmshove]

Hi,

Is there an option to configure how many spaces a tab contains?

Our java files are indented with tabs and when I view them, every tab seems to be 8 spaces wide. Normally I would expect 4 spaces for java, c# and similar languages

[silverwind]

I think you can put a .editorconfig in your repo and some aspects like the editor will honour it, not sure about repo viewer.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 weeks. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. You can re-open it if needed.

[KaKi87]

Hello,

How can I change Gitea's global tab size from 8 to 4 ?

Thanks.

[Spongman]

please reopen. (stalebot is bad project management)

does this mean that managing projects that use tabs is not supported on Gitea? it looks like .editorconfig is used when editing files, but ignored when viewing them.

workaround: add custom/templates/custom/header.tmpl:

<style>
.tab-size-8 {
        tab-size: 4 !important;
        -moz-tab-size: 4 !important;
}
</style>

edit: added -moz-tab-size after @tmont, below.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. I am here to help clear issues left open even if solved or waiting for more insight. This issue will be closed if no further activity occurs during the next 2 weeks. If the issue is still valid just add a comment to keep it alive. Thank you for your contributions.

[KaKi87]

up

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. I am here to help clear issues left open even if solved or waiting for more insight. This issue will be closed if no further activity occurs during the next 2 weeks. If the issue is still valid just add a comment to keep it alive. Thank you for your contributions.

[KaKi87]

up

[Exagone313]

I build Gitea with this patch:

diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index e4107dfa9..38c4c661f 100644
--- a/modules/templates/helper.go
+++ b/modules/templates/helper.go
@@ -185,18 +185,18 @@ func NewFuncMap() []template.FuncMap {
            )
            if ec != nil {
                if value, ok = ec.(*editorconfig.Editorconfig); !ok || value == nil {
-                   return "tab-size-8"
+                   return "tab-size-4"
                }
                def, err := value.GetDefinitionForFilename(filename)
                if err != nil {
                    log.Error("tab size class: getting definition for filename: %v", err)
-                   return "tab-size-8"
+                   return "tab-size-4"
                }
                if def.TabWidth > 0 {
                    return fmt.Sprintf("tab-size-%d", def.TabWidth)
                }
            }
-           return "tab-size-8"
+           return "tab-size-4"
        },
        "SubJumpablePath": func(str string) []string {
            var path []string

[tmont]

I had to add this to @Spongman's custom template to get things working in Firefox as it does not (yet) support un-prefixed tab-size:

<style>
.tab-size-8 {
        tab-size: 4 !important;
        -moz-tab-size: 4 !important;
}
</style>

[vhscom]

Here's a bookmarklet you can use to format the tab size for Gitea when viewing code in compare/diff view through the web interface.

javascript:document.querySelectorAll('table.chroma').forEach((el)=>el.style.tabSize=2)

Adjust to your liking. Alternative options are to (a) add an .editorconfig file to the repository as mentioned by @silverwind or (b) use a different diff viewer such as delta.

[KaKi87]

Well, you'd better use a userstyle rather than a bookmarklet

[silverwind]

I think this issue is still open because the code view doesn't respect the configured tab-size in .editorconfig. The web editor itself certainly already does.

[KaKi87]

Requiring such file doesn't seem right.

[silverwind]

Yes, I think a user setting for default tab size is also desirable. But .editorconfig should have precedence when present.

[MarkusAmshove]

I'd say:

User settings > editorconfig > highlighting lib > default

[danebou]

Who the heck uses a tab size of 8 by default? lol. Really surprised this isn't fixed. In addition to this, the default tab size should be 4 since almost every IDE out of the box uses 4.

(Oh I guess this fight goes along with the Linux Kernel standards. Well since I doubt gitea is being used by the Linux Kernal peops, I still argue 4 is a good default)

[vhscom]

One thing to take into consideration is that I doubt many projects do, or would even want, to add an .editorconfig file if they're using prettier. I could see that causing headaches if they're not in perfect alignment. Besides, who wants to add another dotfile to their repo. A sensible default of 4 spaces would be fine. But it would be even better to give the user control straight from the interface.

[KaKi87]

Yes. Personally, I started using spaces as indentation character instead of tabs because of this issue. And this isn't right.

[silverwind]

Who the heck uses a tab size of 8 by default? lol. Really surprised this isn't fixed. In addition to this, the default tab size should be 4 since almost every IDE out of the box uses 4.

FWIW, browsers are dictated by spec to use default size 8 thought I do agree 4 is a generally better default.

[Crystal-RainSlide]

If we add this (?ts=4): https://github.com/tiimgreen/github-cheat-sheet#adjust-tab-space

Then we can just make the links with the different tab size parameter as the "Change tab size" button, and we also got permalink for them. If someone figured out the right tab size for a file, then he can just share the permalink to others and save their time by a little bit.

With some tab-size-changing JavaScript and history.pushState(), we can also save the navgation/reloading of the "Change tab size" link-buttons.

const setTabSize = tabSize => {

    if ( !Number.isInteger(tabSize) ) {
        tabSize = Number.parseInt(tabSize);
    }

    if (tabSize <= 0 || tabSize > 16) {
        throw new RangeError("tabSize must be an integer between 1 to 16!");
    }

    let otherSizes = new Array(16).fill(null).map( (_, i) =>  i + 1 );
    otherSizes.splice(tabSize - 1, 1);

    document.querySelectorAll(
        otherSizes.map( size => ".tab-size-" + size ).join(",")
    ).forEach(
        elem => elem.classList.replace(
            [...elem.classList].find( cls => cls.startsWith("tab-size-") ),
            "tab-size-" + tabSize
        )
    );

};

document.addEventListener("DOMContentLoaded", () => {
    let ts = new URLSearchParams(location.search).get("ts");
    if (ts !== null) {
        ts = Number.parseInt(ts);
        if (ts <= 0 && ts > 16) {
            setTabSize(ts);
        }
    }
});

// Just one button as an example...
const button = Object.assign(
    document.createElement("button"), { textContent: "Change tab size to 4" }
);

button.addEventListener("click", () => {
    setTabSize(4);
    const url = new URL(location);
    url.searchParams.set("ts", "4");
    history.pushState({}, "", url);
});

// Put this button into the document with methods like append() to give it a try.

[delvh]

While I can definitely see why adding it as a query param would be useful, how would it handle the whitespace for files with differing behavior defined in the editorconfig? Should the editorconfig simply be ignored globally when that parameter is set?

[silverwind]

I think in general we want a setting UI where user can set their preference, similar to what GitHub now has for tab size:

https://github.com/settings/appearance

That setting should overrule .editorconfig. Only through the special value default would editorconfig then be applied.

We can du the url param too, but I think it's too obscure of a feature in general to be useful.

[Crystal-RainSlide]

While I can definitely see why adding it as a query param would be useful, how would it handle the whitespace for files with differing behavior defined in the editorconfig? Should the editorconfig simply be ignored globally when that parameter is set?

That setting should overrule .editorconfig. Only through the special value default would editorconfig then be applied.

On GitHub: ts parameter > .editorconfig > tab size in the user settings. Everyone can check this by themselves.

This seems to be decided by the scope. ts parameter is specifc to a webpage, .editorconfig is specifc to a repo, and tab size in the user settings is specifc to everything a user sees, and the smaller the scope the higher the priority.

---

I think in general we want a setting UI where user can set their preference, similar to what GitHub now has for tab size:

github.com/settings/appearance

Yes.

---

We can du the url param too, but I think it's too obscure of a feature in general to be useful.

Obscure is what GitHub had done wrong, anyone else can get it right (GitHub itself included).

I'd already talked about the "Change tab size" button thing, but let's see if I can come up with some showcase...

Update: I'm trying to write a userscript to add a "Change tab size" button for both try.gitea.io and GitHub.

[Spongman]

it should be simple for the user to easily, and permanently override whatever is in a repo's .editorconfig. the whole point of using tabs is that the indentation amount is configurable by the viewer, not baked into the source.

[UnlimitedCookies]

please reopen. (stalebot is bad project management)

does this mean that managing projects that use tabs is not supported on Gitea? it looks like .editorconfig is used when editing files, but ignored when viewing them.

workaround: add custom/templates/custom/header.tmpl:

<style>
.tab-size-8 {
        tab-size: 4 !important;
        -moz-tab-size: 4 !important;
}
</style>

edit: added -moz-tab-size after @tmont, below.

Unfortunately, with this patch 4 spaces and 1 tab are not the same width :fearful: .

[omenos]

Both GitHub and GitLab have a user preference for defining the tabstop width for viewing files. As long as the .editorconfig preferences only apply to the editor view, it shouldn't be viewed as a solution here and other related issues.

Tabstop size is important for languages that enforce tabs over spaces, such as Go. I'm currently using the Stylus extension to override tabstops for forge sites, including my self-hosted instance, but this is a browser specific workaround on my desktop; it does not apply to mobile where screen real estate is even more valuable.

I understand the addition of this feature is not completely simple, but it would be greatly appreciated!

[silverwind]

I guess we can implement 2,4,8,auto options. Default being auto which derives from editorconfig, and possibly falls back to a default of 4 (or 8, which is still what browsers default to, but I think it's antiquated and 4 is a better default).

[arkadiuszmakarenko]

I guess we can implement 2,4,8,auto options. Default being auto which derives from editorconfig, and possibly falls back to a default of 4 (or 8, which is still what browsers default to, but I think it's antiquated and 4 is a better default).

This would be very welcomed change.

[eliliam]

How's this coming? Six months ago @silverwind indicated the setting could be added, has anyone been able to work on this yet?

[Palid]

@silverwind do you need help with someone taking this over? I'd gladly implement this change

[silverwind]

Feel free to take a stab at implementing such a "indentation size" dropdown on top right side of file view which then would alter the CSS. The default option should be "auto", e.g. the current value that depends on .editorconfig with fallback to 4. Ideally the option value should sync into backend as a user setting so it's remembered between browsing sessions.

Personally I don't need this feature because I'm a strong proponent of .editorconfig.