Improve diff file headers

[silverwind]

• reduce file name font size from 15px to 14px
• fix labels and buttons being cut off when their size is constrained
• change labels from monospace to sans-serif font
• move diff stats to right and change them from sum of changes to +/-
• change filemode to label and change text to match other labels

Before

After

[silverwind]

This is ready, I've updated OP and cleaned up the PR comments.

[lunny]

move diff stats to right and change them from sum of changes to +/-

Why the change is better?

[silverwind]

It's following GitHub's current design:

I think it's much more useful to see +/- instead of the current sum.

GitLab also has the +/- design, but they only show numbers:

Maybe later I will also implement this "5 boxes" design, but not in this PR.

[silverwind]

The template on pull request tabs bar now also uses templates/repo/diff/stats.tmpl. Appearance is unchanged, tooltip is added (although I find this tooltip mostly unnecessary now).

[silverwind]

One more enhancement, remove box-shadow hack.

Before: Ugly ":target" border:

After: Clean border:

I couldn't notice the "borders being visible behind top corners" problem, so likely this hack was obsolete anyways.

[silverwind]

That change is from your fix of " Fix all rounded borders, change affected tab menus to pills #30707 "

The box shadow hack was only for a problem only visible when the header was sticky, it shouldn't have any affect for non-sticky content.

[wxiaoguang]

That change is from your fix of " Fix all rounded borders, change affected tab menus to pills #30707 "

The box shadow hack was only for a problem only visible when the header was sticky, it shouldn't have any affect for non-sticky content.

If you'd like to remove it, I am also fine. It doesn't really bother me. Simpler is better.

[wxiaoguang]

The last problem in my mind: Executable vs executable.

The problems:

• LFS
• generated
• Executable or executable
• changed mode: Executable -> Regular or executable -> regular

Personally I prefer to use Executable -> Regular and change generated to Generated

also see the screenshot in #36215 (comment)

[silverwind]

Yeah I think we can consistently capitalize these tags.

[wxiaoguang]

Fixed more layout problems:

[wxiaoguang]

I found some new things: there are some webkit-specfic styles:

.diff-file-header .file-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

I am not sure it really works well for various cases, or it works for other browsers. It seems not easy to change these styles at the moment.

Not bad on firefox:

Details

Anyway, let's merge and try and do more improvements in the future (if necessary)

[silverwind]

-webkit-box is a special text rendering mode supported in all browsers. It's to ensure at maximum 2 lines of text are rendered. No browser currently implements the standard line-clamp as of today.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-clamp