Update macOS volume window background

added 13.0 stable Brand MacOS UX Team Next Task UX labels

assigned to @nicob

marked this issue as related to #40417 (closed)

removed UX label

changed due date to August 11, 2023

added Sponsor 131 label

marked this issue as related to #41956 (closed)

removed the relation with #40417 (closed)

removed due date August 11, 2023

changed due date to August 18, 2023

mentioned in issue #41956 (closed)

Hi @pierov! I have an updated asset for the macOS dmg background, based on what we did for mullvad branding. Figma file here for reference: DMG background

dmg-window_2x
macOS-tor-browser-icon_2x
tor browser icon size: 112px
applications folder icon size: 112px
text size: 12pt
title bar height: 28px

Mockup:

@nicob thanks!

Has the position of the icons changed from the previous release? Or has only the background changed?

Well, maybe in both cases I'd need access to macOS, which I currently don't have. @dan could you please have a look at this?

It's using the program you suggested (create-dmg) with the relevant options. Then, you should extract the new .DS_Store from the dmg the program creates and update it in tor-browser-build.

sure will give a go

Thanks! From what I remember the app bundle can even be empty: you can create a source directory with an empty Tor Browser.app inside.

@pierov the position of the icons hasn't changed, just the background!

I see, thanks! Then maybe replacing the background without renaming it should work. Dan, if you already have a lot on your plate I can do it (but cannot check the result).

naw I can test tomorrow morning on my mac, and then go from there

@pierov are the "relevant options" stored anywhere for regeneration? just dropping the new image (converted to a .tiff) into `projects/browser/Bundle-Data/TorBrowser.dmg/.background/background.tiff so far doesn't seem to be doing it also the file @nicob supplied is different size and once gimp converted to a .tiff, just more different

orig background.tiff TIFF image data, big-endian, direntries=22, height=295, bps=0, compression=LZW, PhotometricInterpretation=RGB, description=background.png, orientation=upper-left, width=415

new background.tiff TIFF image data, little-endian, direntries=20, height=628, bps=13520, compression=deflate, PhotometricInterpretation=RGB, orientation=upper-left, width=1024

but also when I open the orig, it appears to have "multiple pages"

so not sure how we generated those, do you have any more details?

Lol so I'm on it but we need to save a script to generate this in tbb going forward rather than having to reverse engineer the dimensions, the placements, etc. (also so in the future we can authoritatively say what the size is).

@pierov did you recall if you used anything in particular to convert pngs to .icns files? or just anything I can find will do?

I think we can use .png, no .tif needed.

Just a nice png with the appropriate DPIs set (strangely enough the super old 72 DPI is considered 1x, not 96 DPI! So, you should make sure the new background has 144DPI if it's a 2x one).

I wrote a bit of documentation in mullvad-browser#67 (closed) and mullvad-browser#13 (closed). In particular, I wrote some notes in mullvad-browser#13 (comment 2886106).

Most relevant things are that the sizes include the title bar height but don't include borders. I tested on a "normal" screen (not hidpi).

The parameters I used for Mullvad Browser (and already adapted for Tor Browser) are:

create-dmg \
  --volname 'Tor Browser' \
  --volicon VolumeIcon.icns \
  --background background.png \
  --hide-extension 'Tor Browser.app' \
  --window-size 415 317 \
  --icon-size 100 \
  --text-size 14 \
  --icon "Tor Browser.app" 100 180 \
  --app-drop-link 310 180 PB.dmg \
  source

Where source is a directory with an empty app bundle:

mkdir -p source/Tor\ Browser.app

The sizes in the command are a little bit different from what nicob said, but for some reason the parameters measured in Figma are different from the results you'd get with this script. So, I had to adjust them with trial error. But the result should match what nicob expects.

@pierov did you recall if you used anything in particular to convert pngs to .icns files? or just anything I can find will do?

I used the png2icns command on Linux.

However, you shouldn't need to do convert anything, because the application icon is loaded from the app bundle, and the volume icon should be already fine.

assigned to @pierov and unassigned @nicob

assigned to @dan and unassigned @pierov

mentioned in issue #42124 (closed)

Ok made some progress. there was some weirdness where if the Applications folder was too near the side it added a scrollbar that was driving me up hte wall for a bit but is sorted. Have the new dimensions sized to the new background. and yes, the Tor Browser icon in the finder window will be based on Tor Browser so we can't control, but I believe we're updating the vol icon too to the new icon yes?

and for that we need a new .icns file based on the supplied icon, which I can't make, cus macos .icns file format is finicky.

@nicob:

to make an icns I need:

One or more images can be stored within the same icon file, and are normally created from a PNG file. The format supports the following sizes: 16x16, 32x32, 48x48, 128x128, 256x256, 512x512, and 1024x1024 pixels.

all the tools are rejecting the 224x224 you gave me and I didn't want to upscale and downscale a png, I assume you have an svg or something. So if you can get me copies of it in some or all of those dimensions I can update the volume image

sorry I think I'm a bit confused @dan - are you asking for the volume icon or the macOS application icon as .icns?

lol the macOS-tor-browser-icon_2x so .dmg "install files" are actually kinda ... weird bad mac hacks. They are a mountable volume as a file. and the create-dmg util lets us set a volume icon, which is what the file should look like in finder before opening. the icon it shows in the "installer" actually I can't control with this work, it just shows the app icon, so whom ever is rolling out hte new icons to tor-browser, when thats done it'll show up there/here

yeah the "installer" is just a finder window with our app, the icon positioned, a created link to the applications directory, and a settable background for the finder window. it's strange

that all does sound weird!! but okay great, those are already exported in this folder actually: MacOS application icons

ok actually @pierov I cannot see the volumeicon on existing tor browsers which might explain why i was missing it with the ones I was making

so I'm not sure it's working before or now

https://github.com/create-dmg/create-dmg/issues/132

all right... that's not ideal. hopefully it too can be pulled out and put in tbb like the rest

Wait, we've never cared of having a custom icon on the .dmg, only on the volume when you open the .dmg.

Is the change added by NSWorkspace.shared.setIcon only local or does it write to the .dmg? Can you try to run that thing on macOS and see if it works and the file is changed, or it's the same? Does Firefox have an icon also for the .dmg when it isn't mounted?

For completeness, to set a volume icon we include a file with the right name (.VolumeIcon.icns) and set an attribute on the HFS volume that is embedded in the .dmg:

hfsplus "$hfsfile" attr / C

And this is the reason for which we switched from ISO files (that we had known how to make reproducible for a long time) to HFS, which are less easy to deal with.

Then we create a .dmg out of the HFS with an utility that is called dmg. We're using Moz's fork because... why not? But they're not the original creators of the utility.

The fork has been very quiet for a long time (one commit in 2018, one in 2020 and a couple in 2022), but recently they started adding a lot of commits (including one we uplifted ). If you can actually set the icon to a .dmg file, maybe it's stored in some attribute you can set it with the updated utility. We could check what Moz is doing in the following months.

In general, not all attributes we set in create-dmg will be transferred to our dmgs automatically. Only the ones it sets on the .DS_Store, such as the position of the icons and the name of the background image.

Sorry I assumed setting the volumeicon would set the .dmg file image? I only use macs for testing and porting so that's what made sense to me.

only on the volume when you open the .dmg.

where does that appear?

but if that's the case then I was ready a bit ago and just deeply misunderstood what that argument meant -_-; and/or had unrealistic expectations of mac.

Does Firefox have an icon also for the .dmg when it isn't mounted?

yeah that'll be the first thing i check this morning. I'm used to windows installers being .exes and having icons i guess? so I saw volumeicon and just assumed

Sorry I assumed setting the volumeicon would set the .dmg file image? I only use macs for testing and porting so that's what made sense to me.

Me too, that's why I asked about Firefox .

only on the volume when you open the .dmg.

where does that appear?

In the desktop for sure, but maybe also in the Finder in the left column, I don't know.

I'm used to windows installers being .exes and having icons i guess? so I saw volumeicon and just assumed

Nope, .dmgs are more like .img, .zip, .tar.gz, .deb etc. No custom icon would make sense for me.

And the volume is literally the (ISO/HFS) filesystem embedded in the .dmg that gets mounted .

firefox nope, so yeah. cool

here's where I'm at, and yeah, there it is in the window chrome bar, so tiny I missed it. Ok so that's working. I just dont have the new app icon cus that comes from Tor Browser.app so depends on that being included in the macos tb build. is that out or coming in a release soon? since we're going from transparent bg to a rounded square one I suspect it might influence the icon position a little

This is the new icon:

So, you should be already there.

You'd need to update the background and the .DS_Store in projects/browser/Bundle-Data/TorBrowser.dmg

sure but the new icon needs to be built into the mac exe thats in Tor Browser/Contants/MacOS/Tor Browser or what ever, and then mac magic makes that executables icon the .app dir icon as well

Yes, but that happens in tor-browser.git. You can probably see that already in the latest alpha or in a nightly .

cool the latest alpha had it!

prepping a tbb mr

@dan in case further iteration is needed here, the appdmg project is very easy to use (requires node tho so you'd need to install that with homebrew):

https://github.com/LinusU/node-appdmg

Handles the hi-res tiff conversion. Here's my json for Ricochet Refresh:

{
  "title": "Ricochet Refresh",
  "background": "background.png",
  "contents": [
    { "x": 320, "y": 140, "type": "link", "path": "/Applications" },
    { "x": 95, "y": 140, "type": "file", "path": "Ricochet Refresh.app" }
  ]
}

Handles window sizing automatically, and supports setting the dmg icon.

marked this issue as related to tor-browser-build#40959 (closed)

mentioned in merge request tor-browser-build!825 (merged)

removed the relation with tor-browser-build#40959 (closed)

closed

marked this issue as related to tor-browser-build#40965 (closed)

Update macOS volume window background

Designs

Child items ...

Activity