Fancy features make reading code frustrating

[gardner]

Select Topic Area

Product Feedback

Body

Hi there,
New features seem to have changed the standard behavior of basic web controls. This includes highlighting a token in code when it is double clicked. I wanted to select the word, not invoke a rich editor that would then expand a side bar on the right showing me the location of the token. It shifts the entire UI in an unexpected way and makes a jarring experience.

There is also the new "folder explorer" mode which opens on the left. This seems to hide the top navigation elements. It's difficult to get a back to the "repo" link at the top of the page. The explorer elements seem to want to stick around.

It's great that GitHub is adding more features. It would be great if there was a way to turn them off or enable a "low-fi" mode (maybe old-curmudgeon-mode?). I just want basic html. I don't want the page shifting around anytime I click on something or scroll.

Thanks for accepting my feedback.

[hrishikesh-kocharekar-dev]

Hi Gardner, he rich code editor: In your GitHub account settings, you can disable the rich code editor, which should prevent the sidebar from appearing when you double-click on a token in code. To do this, go to "Settings" > "Editor" and uncheck the box next to "Enable rich text editor".

Use the "Classic" file explorer: If you prefer the old file explorer interface, you can switch to the "Classic" mode. To do this, click on the "Explorer" button on the left-hand side of the page and then click the "Switch to classic file explorer" link at the bottom of the menu.

Use a browser extension to customize the GitHub interface: There are several browser extensions available that allow you to customize the look and feel of websites, including GitHub. For example, the "Stylus" extension allows you to create your own custom stylesheets to modify the appearance of web pages. You could use this to hide certain elements of the GitHub interface that you don't need or want.

Use a different code editor: If you prefer a simpler code editing experience, you could consider using a different code editor, such as Sublime Text or Atom. These editors allow you to edit your code locally and then push changes to GitHub when you're ready.

I hope one or more of these suggestions help!

[gardner]

There is no "Settings" > "Editor" option in my GitHub settings:

[gardner]

I don't see an "Explorer" button on a source code page in a repo. Are we talking about the same thing? This is regarding the GitHub web ui.

[tonyduan]

+1 is there any way to turn it off please

[dgleich]

The new file explorer interface makes Github almost unusable for reading code on Safari. It takes so long to load code! Scrolling shows acres of blank space while things are loading. I would love to go back to the previous version to load and browse kilobytes of code. Switching between files takes annoyingly long.

[metaturso]

Indeed. They shot themselves in the foot and made everyone's life a little bit worse in the process of "crafting a better and faster code view". The old one worked just fine.

[ratijas]

Scrolling through anything larger than a three lines long python script turns into a quite frustrating experience on my gaming laptop:

This isn't what I used to when digging through a 5 GB log file in Sublime Text, for example.

[Manectric-Rang]

At this point the most convenient way to read code in GitHub is through the Raw mode. Just copy (or type) the https URL of the file and paste it in a new tab, then replace /blob/ with /raw/, press Enter et voilà, you get a lightweight code reader.

[nurpax]

Any update? Please provide an option to turn this feature off.

The file explorer makes reading code really hard. It also breaks browser navigation in a number of ways, makes using "ctrl-f" in the browser not work as expected, etc. The list is long. I'm mostly going to Raw mode to read code now, which is hardly ideal.

[jhhuh]

+1 Please... I really need to turn it off.

[mbartelsm]

Bump. This is really frustrating. Particularly how difficult it makes it to select code.

What's even more frustrating is that it is such an html-hostile application that I can't even use browser plugins to make the experience better for myself. It's just a <textarea> tag with obscene amounts of javascript puked over it to make it look nice and work. It's just terrible design from an accessibility standpoint.

[ravindUwU]

Ugh their "rich" code editor is the worst 😒!! They had an option to switch it off while it was in beta IIRC, but now that it is somehow out of beta, the option's gone.

• Re: the feature that attempts to highlight occurrences across the file when you place the caret on a symbol:

  • This doesn't work half the time (especially with short identifiers), and sometimes matches keywords.
  • The only way that I'm aware of removing what's currently highlighted is to place the caret on a different symbol (and hope it detects it; because, again, it doesn't always).
    • You can't simply remove the caret from the current symbol (e.g., on to a keyword or empty line) to get it to stop highlighting; you must select (and therefore highlight) a different symbol 🤦.
  • Consequently, highlights are incredibly distracting and I find myself avoiding clicking inside the editor entirely. To have a closer look at code, I either use VSCode (click the editor, Ctrl+A,C, ..., Ctrl+V), or use github.dev.
  • I've been using this user style to hide highlights,

    /* Highlighted active tokens are distracting. Force transparent background */
    react-app[app-name="react-code-view"] {
    	& .react-code-file-contents {
    		& span {
    			background-color: transparent;
    		}
    	}
    }

• Re: symbols pane:

  • This one's useful sometimes, but when you hide the symbols pane, it doesn't stay hidden! It opens right back up if you place your caret on a symbol in the editor.
  • I've been using this user style to hide the symbols pane,

    /*
    	Hide editor symbols pane
    
    	<div>
    		<div> ← Remove the right margin from this
    			<div#repos-sticky-header></div>
    
    			(code view here)
    		</div>
    
    		<div></div> ← Hide this
    
    		<div> ← Hide this
    			<div#symbols-pane></div>
    		</div>
    	</div>
    */
    
    div:has(> #repos-sticky-header) {
    	margin-right: 0;
    }
    
    div:has(> #repos-sticky-header) + div {
    	display: none;
    }
    
    div:has(> #symbols-pane) {
    	display: none;
    }
    
    /* Hide close symbols pane button */
    span[aria-label="Open symbols panel"],
    span[aria-label="Close symbols panel"] {
    	display: none;
    }

• Re: indentation:

  • You can no longer simply set tab-size to whatever you want with a user style to change the tab size globally on GitHub, because their new editor uses some <textarea>-below-an-overlay trickery.
    • If you do set tab-size you might notice, depending on the contents of the file, that the selection doesn't actually match what you intended to select.
  • GitHub has a tab size preference setting, but this only applies where you've signed in.

• Re: Ctrl+Shift+C:

  • GitHub reassigned this to copy the contents of the current file to the clipboard.
  • Firefox & Chrome use this shortcut to open the DevTools element picker (which I personally use often). I don't a shortcut as "standard" as this should've been reassigned.

[yevhen-k]

Found this useful for me (firefox, dark reader):

const elements = document.getElementsByClassName("eJSJhL");
while(elements.length > 0){
    elements[0].parentNode.removeChild(elements[0]);
}
var element = document.getElementsByClassName("iJOeCH");
element[0].classList.remove("Box-sc-g0xbh4-0");
element[0].classList.remove("iJOeCH");

So, basically I have to remove some noisy fancy classes and divs so web ui and editor view now works. At least not so bad as before.