Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update caption buttons to use glyphs #13341

Merged
merged 2 commits into from Jul 14, 2022
Merged

Update caption buttons to use glyphs #13341

merged 2 commits into from Jul 14, 2022

Conversation

ghost
Copy link

@ghost ghost commented Jun 20, 2022

The min/max/close buttons now use the same font glyphs used in Windows instead of paths.
They will also look different depending on whether you use Windows 10 or 11.

@DHowett
Copy link
Member

DHowett commented Jun 20, 2022

WOW! Can you share some screenshots? I didn't realize these glyphs existed!

@ghost
Copy link
Author

ghost commented Jun 20, 2022

Old / new / settings app:
windowed
maximized

@zadjii-msft
Copy link
Member

Does this happen to fix either of:

by any chance? I'm guessing they might!?

@zadjii-msft zadjii-msft added the Needs-Discussion Something that requires a team discussion before we can proceed label Jun 20, 2022
@ghost
Copy link
Author

ghost commented Jun 20, 2022

With certain scaling levels, the new fluent icons are always blurry on titlebars (win32, UWP, terminal).
I didn't check, but I assume that the glyphs will not be blurry on Windows 10 because they use the old font.
However, the glyps seem to have some alignment issues, making them even more blurry, and I'm not sure if I can fix that.

I looked into the minimize button problem:

  • The UWP titlebar has 4px/5px, just like Terminal, but win32 titlebars have 5px/4px
  • The new fluent icons have rounded caps, but the win32 minimize one doesn't (it's very subtle)
  • The win32 minimize button is not blurry when the other buttons are

From this I presume that the minimize button is still using the old icon. So perhaps the Terminal/UWP vertical alignment is correct.

UWP/win32/Terminal current/Terminal new:
125%
scaling125

300%
scaling300

@zadjii-msft zadjii-msft added this to the Terminal v1.15 milestone Jun 23, 2022
@github-actions
Copy link

github-actions bot commented Jun 29, 2022

@check-spelling-bot Report

Unrecognized words, please review:

  • Viewbox
Previously acknowledged words that are now absent azurewebsites Checkin condev Consolescreen css cxcy DCompile debolden deconstructed DECRST DECRSTS devicefamily dxp errno FARPROC GETKEYSTATE guardxfg HPAINTBUFFER HPROPSHEETPAGE iconify ipa LLVM LPCHARSETINFO MAPVIRTUALKEY MSDL mspartners ned newcursor nlength NOWAIT PENDTASKMSG pgorepro pgort PGU Poli PPORT PSMALL redistributable SOURCESDIRECTORY Timeline timelines toolbars unintense UWA UWAs VKKEYSCAN wddmconrenderer wdx windev WResult xfg
To accept these unrecognized words as correct (and remove the previously acknowledged and now absent words), run the following commands

... in a clone of the git@github.com:dansmor7/terminal.git repository
on the caption-button-glyphs branch:

update_files() {
perl -e '
my @expect_files=qw('".github/actions/spelling/expect/alphabet.txt
.github/actions/spelling/expect/expect.txt
.github/actions/spelling/expect/web.txt"');
@ARGV=@expect_files;
my @stale=qw('"$patch_remove"');
my $re=join "|", @stale;
my $suffix=".".time();
my $previous="";
sub maybe_unlink { unlink($_[0]) if $_[0]; }
while (<>) {
if ($ARGV ne $old_argv) { maybe_unlink($previous); $previous="$ARGV$suffix"; rename($ARGV, $previous); open(ARGV_OUT, ">$ARGV"); select(ARGV_OUT); $old_argv = $ARGV; }
next if /^(?:$re)(?:(?:\r|\n)*$| .*)/; print;
}; maybe_unlink($previous);'
perl -e '
my $new_expect_file=".github/actions/spelling/expect/9e8427d81ecaa7955dcb2c7bbe38ae4dc3e82464.txt";
use File::Path qw(make_path);
use File::Basename qw(dirname);
make_path (dirname($new_expect_file));
open FILE, q{<}, $new_expect_file; chomp(my @words = <FILE>); close FILE;
my @add=qw('"$patch_add"');
my %items; @items{@words} = @words x (1); @items{@add} = @add x (1);
@words = sort {lc($a)."-".$a cmp lc($b)."-".$b} keys %items;
open FILE, q{>}, $new_expect_file; for my $word (@words) { print FILE "$word\n" if $word =~ /\w/; };
close FILE;
system("git", "add", $new_expect_file);
'
}

comment_json=$(mktemp)
curl -L -s -S \
  --header "Content-Type: application/json" \
  "https://api.github.com/repos/microsoft/terminal/issues/comments/1169858829" > "$comment_json"
comment_body=$(mktemp)
jq -r .body < "$comment_json" > $comment_body
rm $comment_json

patch_remove=$(perl -ne 'next unless s{^</summary>(.*)</details>$}{$1}; print' < "$comment_body")
  

patch_add=$(perl -e '$/=undef;
$_=<>;
s{<details>.*}{}s;
s{^#.*}{};
s{\n##.*}{};
s{(?:^|\n)\s*\*}{}g;
s{\s+}{ }g;
print' < "$comment_body")
  
update_files
rm $comment_body
git add -u
✏️ Contributor please read this

By default the command suggestion will generate a file named based on your commit. That's generally ok as long as you add the file to your commit. Someone can reorganize it later.

⚠️ The command is written for posix shells. You can copy the contents of each perl command excluding the outer ' marks and dropping any '"/"' quotation mark pairs into a file and then run perl file.pl from the root of the repository to run the code. Alternatively, you can manually insert the items...

If the listed items are:

  • ... misspelled, then please correct them instead of using the command.
  • ... names, please add them to .github/actions/spelling/allow/names.txt.
  • ... APIs, you can add them to a file in .github/actions/spelling/allow/.
  • ... just things you're using, please add them to an appropriate file in .github/actions/spelling/expect/.
  • ... tokens you only need in one place and shouldn't generally be used, you can add an item in an appropriate file in .github/actions/spelling/patterns/.

See the README.md in each directory for more information.

🔬 You can test your commits without appending to a PR by creating a new branch with that extra change and pushing it to your fork. The check-spelling action will run in response to your push -- it doesn't require an open pull request. By using such a branch, you can limit the number of typos your peers see you make. 😉

🗜️ If you see a bunch of garbage

If it relates to a ...

well-formed pattern

See if there's a pattern that would match it.

If not, try writing one and adding it to a patterns/{file}.txt.

Patterns are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your lines.

Note that patterns can't match multiline strings.

binary-ish string

Please add a file path to the excludes.txt file instead of just accepting the garbage.

File paths are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your files.

^ refers to the file's path from the root of the repository, so ^README\.md$ would exclude README.md (on whichever branch you're using).

@ghost
Copy link
Author

ghost commented Jun 29, 2022

I was able to improve the rendering by wrapping the icon inside a Viewbox.

However, it won't perfectly match UWP, because scaling is calculated differently.
The icon width is 10px, which on 1.25x scaling would become 12.5px.
UWP titlebars truncate that to 12px, while Xaml renders that as 13px.

This is probably the best that can be done for now.

125x scaling:
image

@carlos-zamora carlos-zamora removed the Needs-Discussion Something that requires a team discussion before we can proceed label Jul 6, 2022
DHowett added a commit that referenced this pull request Jul 8, 2022
@zadjii-msft
Copy link
Member

notes from discussion, last time, when I missed discussion: fractional scaling already sucks, these glyphs are better now, lets go for it. We don't really know where they came from, they aren't documented, but lets go for it anyways.

@ghost
Copy link
Author

ghost commented Jul 11, 2022

I found these icons here.

@DHowett
Copy link
Member

DHowett commented Jul 11, 2022

I found these icons here.

OH DANG! I was convinced they were a private API. Naw, we gotta do this. I love it.

@zadjii-msft zadjii-msft added the AutoMerge Marked for automatic merge by the bot when requirements are met label Jul 12, 2022
@ghost
Copy link

ghost commented Jul 12, 2022

Hello @zadjii-msft!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msftbot) and give me an instruction to get started! Learn more here.

@zadjii-msft
Copy link
Member

Unfortunately, spellbot is gonna be mad at you until you add "Viewbox" to apis.txt (or any of the spelling files)

@zadjii-msft
Copy link
Member

You know what, I'll just fix it in post

@zadjii-msft zadjii-msft merged commit 67f6b29 into microsoft:main Jul 14, 2022
@ghost ghost deleted the caption-button-glyphs branch September 1, 2022 20:11
@DHowett
Copy link
Member

DHowett commented Sep 6, 2022

This has been going very well in 1.16; I marked it up for 1.15 but then thought twice. @zadjii-msft can you gut-check me? It's worked beautifully on everything we've thrown at it.

@zadjii-msft
Copy link
Member

@DHowett No one on the team (read: on 1.16) uses Windows 10. That would be my reluctance. But it's a pretty easy revert if something does explode look slightly bad, so #shipit?

@DHowett
Copy link
Member

DHowett commented Sep 6, 2022

uses Windows 10

I do! I'm also a crazy person. :)

DHowett pushed a commit that referenced this pull request Sep 6, 2022
The min/max/close buttons now use the same font glyphs used in Windows instead of paths.
They will also look different depending on whether you use Windows 10 or 11.

With certain scaling levels, the new fluent icons are always blurry on titlebars (win32, UWP, terminal).
I didn't check, but I assume that the glyphs will not be blurry on Windows 10 because they use the old font.
However, the glyps seem to have some alignment issues, making them even more blurry, and I'm not sure if I can fix that.

I looked into the minimize button problem:
* The UWP titlebar has 4px/5px, just like Terminal, but win32 titlebars have 5px/4px
* The new fluent icons have rounded caps, but the win32 minimize one doesn't (it's very subtle)
* The win32 minimize button is not blurry when the other buttons are

From this I presume that the minimize button is still using the old icon. So perhaps the Terminal/UWP vertical alignment is correct.

I was able to improve the rendering by wrapping the icon inside a Viewbox.

However, it won't perfectly match UWP, because scaling is calculated differently.
The icon width is 10px, which on 1.25x scaling would become 12.5px.
UWP titlebars truncate that to 12px, while Xaml renders that as 13px.

This is probably the best that can be done for now.

I found these icons [here](https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font).

(cherry picked from commit 67f6b29)
Service-Card-Id: 85488527
Service-Version: 1.15
@ghost
Copy link

ghost commented Sep 13, 2022

🎉Windows Terminal v1.15.252 has been released which incorporates this pull request.:tada:

Handy links:

@ghost
Copy link

ghost commented Sep 13, 2022

🎉Windows Terminal Preview v1.16.252 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
AutoMerge Marked for automatic merge by the bot when requirements are met
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants