IDE UI improvements branch


#1

If anyone is interested (someone at the last dev meeting was, I forget who), this is the branch where I was stowing IDE style changes a few years ago.

IIRC I broke them into readily cherry-pickable commits, apart from some of the stylesheet things which are a little more complex. Everything in that branch bar 3 or 4 changes should be straightforward and uncontroversial improvements.

I don’t think styling via style sheet is a very good option. Using palettes in QT is fairly straightforward - they cascade through UI view hierarchies, and there are only 16 or so values. Custom drawing can simply be written in C++ code - not the most accessible, but relatively straightforward. As I remember it, stylesheets are:

  1. more powerful, and somewhat easier to edit
  2. much more fiddly
  3. require C++ work to make sure EVERY ui component will pick up stylesheet colors, else you get awkward outliers (see changes with “allow styling”)
  4. not parameterizable - this means, you end up with a bunch of hard-coded magic number values in your stylesheet, that represent e.g. “the background color of this thing, but with brightness dropped by 0.1”. Editing this 4 years down the road would be a NIGHTMARE.

The branch also adds Source Code Pro as a default editor font, and M+ as the default gui font. I felt (and still feel) that the general look and character of the app are greatly improved with some consistency across platforms - fonts most of all. Most OS’s don’t have good code fonts installed by default - on some platforms, the options are downright awful.

  1. I chose Source Code Pro as the code font because it’s open source, well maintained, and has a wide variety of weights to allow for e.g. slight bolding of class named etc. And, it looks very good. I also really like Haslig, which is Source Code Pro but with combined ligatures for common operators. This looks really nice for operator-heavy code.
  2. I chose M+ as a default font for sclang GUIs because it has an open license, is well maintained, has good multilingual support, and has a wide variety of weights and widths (including fixed width) that make it very good for UI work (it’s super awesome to have a fixed width version of your font to show numbers, but a proportional variant for everything else). And, it looks very good.

I won’t have much time to work on this in the next month or so, but if anyone wants to update the branch and peel off the uncontroversial changes (everything but stylesheets and fonts), I think it would be a super worthwhile place to start IDE improvements.


#2

M+ font example (with a couple of different weights/styles used):


Source Code Pro w/ ligatures code example:


#3

nice one, do you have more screenshots of the proposed ui changes?

this is probably going to be bikeshedding, but i think ligatures would not make the code read better. most people probably use monospaced fonts without it and would be confused to see “new glyphs” in their code which are not on their keyboard. i’m in love with the inconsolata font myself, which looks very similar to source pro.


#4

Yeah, I’m sure the ligatures variant might not be idea for everyone - interested to hear other peoples feedback.

Inconsolata is a nice looking font (it has ligatures too) - I had considered it as well, but it has no weight variants and no italics, and the sizing is very different than other fonts at the same px (it looks 1-2px smaller).


#5

Here are ss’s of the IDE in the branch. Note that a lot of the IDE styling was proof-of-concept and probably not the right implementation to move forward with - I think @nathan is looking at options for better styling of the IDE.



#6

i really like those tabs! looks much better when they have no border between the tab and the content. have you looked at the atom editor?

also, i really think the help browser navigation could need a refreshment. the buttons and search box look a little 1999 netscape navigator-like:


#7

And it would be great if the “find in page” supports forward and backward search. Currently, we can search only in one direction.


#8

ah, forgot to say that the new design of the IDE is really beautiful!


#9

Maybe a little suggestion if someone knows how to do it easily.

The ‘clear post window’ shortcut, (a.k.a ctrl + shift + P) is invisible if you don’t know it. I found it by chance, maybe it could be useful to add an indication to a box (right click on post window) or add a line in a menu ?


#10

This is an open issue since 2012 (!) …

Just posted a note there.


#11

inspired by scott’s branch i redesigned the tabs for 3.10:

before:

before

after:

Untitled

the ugly black borders between dockables will be addressed soon, don’t need to hear about those :slight_smile:


#12

SO much better.

it’s weird how much of a difference such a small detail can make