tab-size broken in new code view

[rakuzen25]

Description

When the GitHub tab size preference is set to anything but 4, the tab display is broken under the new code view preview (the old one, without directory listing on the left side, is not affected).

Upon inspection, it seems like GitHub added a read-only textarea element behind the existing code display, which is overriden by the catch-all rules in tab-size.

refined-github/source/features/tab-size.css

Lines 3 to 5 in c470d81

	* {
	tab-size: var(--tab-size) !important;
	}

refined-github/source/features/tab-size.css

Lines 11 to 15 in c470d81

	:root, /* Changes the browser default */
	.comment-body [data-tab-size='8'], /* User setting is ignored in comments #4833 */
	[data-tab-size='4'] {
	--tab-size: 4;
	}

How to replicate the issue + URL

URL in the screenshot: https://github.com/refined-github/refined-github/blob/c470d8103ebc9aa02735d4c0cb72d543333c5c06/source/features/sync-pr-commit-title.tsx

"New Code Search and Code View" must be turned on under Feature preview.

Extension version

23.3.31

Browser(s) used

Chrome 111.0.5563.146 / macOS 13.3

[fregante]

This is now a native GitHub feature that you can customize in your profile. Our feature only fills some gaps

[rakuzen25]

This is now a native GitHub feature that you can customize in your profile. Our feature only fills some gaps

I suppose this means I should disable the tab-size feature?

[fregante]

"Fills gaps" means that GitHub doesn't apply your setting in some cases so RGH does it for you. There's nothing to disable

[rakuzen25]

"Fills gaps" means that GitHub doesn't apply your setting in some cases so RGH does it for you. There's nothing to disable

Yeah, I understand that, but the problem is that, after I've set my GitHub settings, RGH breaks in the code view (i.e. RGH overrides my GitHub settings). I cannot select code properly because the tab size is different between what is displayed and what I can select, if you refer to the screenshot above. I'm just not sure why this is being closed as not planned when it is clearly a bug with RGH…

[baod-rate]

"Fills gaps" means that GitHub doesn't apply your setting in some cases so RGH does it for you

In the case of the new code view, RGH is "filling the gaps" incorrectly. The new textarea element doesn't have a data-tab-size attribute (it sets tab-size in the element's style attribute), and RGH overrides the tab-size with !important causing the mismatch between the two overlapping texts.

This issue should be reopened.

[baod-rate]

This custom CSS seems to workaround the issue for now:

textarea#read-only-cursor-text-area {
  --tab-size: revert;
}

Edit: It doesn't work consistently. You're better off just setting tab-size explicitly until this is fixed:

textarea#read-only-cursor-text-area {
  --tab-size: 3;
}

[fregante]

Sorry I had misunderstood this report. This has now been hotfixed so you should get the fix the next time your browser fetches it (every 4 hours at most, needs a page reload afterwards)

[rakuzen25]

Looks like it's working for me!

[baod-rate]

FYI, it looks like the hotfix is distributed, but the --tab-size is still incorrectly overridden for sizes not accounted for the in the current version of tab-size.css

I guess this will be fixed once #6480 has been merged and released