Support equivalent of "customizeUI.activityBar": "wide"

[lehni]

First of all, thank you for making this great extension! I'm the author of the original vscode-titlebar-less-macos, which I discontinued when the great Customize UI by @iocave came long, and in the past months I have been maintaining a custom version of it that would keep working on VSCodium, as the only viable solution to still get my desired UX layout:

iocave/customize-ui#156 (comment)
iocave/customize-ui#170 (comment)

But your APC extension has come to rescue and really looks like a solid path forward!

The only bit missing for me right now is the style where the activity bar will match the width of the traffic lights for macOS inline menu bar, and align the activity bar items underneath, as shown in the screenshot above.

After a lot of fiddling around with the settings, I have managed to achieve this look with APC using some custom CSS, but I need to undo a lot of APC's .activitybar styling that affects position and sizing of the action items, and I'm hoping there will be a better way to achieve this more easily.

Also, I don't think APC should hide the host button in the bottom left corner by default. It could expose this through an option? I can create a second issue for that.

My current settings are:

{
    "window.titleBarStyle": "native",
    "apc.electron": {
        "titleBarStyle": "hiddenInset",
    },
    "apc.header": {
      "height": 37
    },
    "apc.sidebar.titlebar": {
      "height": 37
    },
    "apc.activityBar": {
        "size": 77
    },
    "apc.stylesheet": {
        ".custom-sidebar-titlebar .sidebar .composite.title": "padding-left: 0;",
        // Make room for the traffic lights.
        ".custom-activitybar div.monaco-workbench div.activitybar > div.content": "margin-top: var(--titlebar-height);",
        // Reset strange APC .activitybar styling back to VSCode defaults.
        ".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item": "margin-top: 0 !important;",
        ".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item a.action-label": "width: 48px; height: 48px; font-size: 24px; margin: 0 auto; -webkit-mask-size: 1em;",
        ".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item .badge div.badge-content": "top: 24px; right: 8px;",
        // Don't indent the statusbar items.
        ".monaco-workbench .part.statusbar>.items-container>.statusbar-item.left.first-visible-item": "padding-left: 0;",
        // Show the host button again, and make it as wide as the .activitybar.
        ".statusbar #status\\.host": "display: block !important; width: calc(var(--activity-bar-action-size) - 1px); background: #555 !important;",
        ".statusbar #status\\.host .codicon": "margin: 0 auto;",
    }
}

Without the custom CSS settings, the activity bar looks as follows, which I am sure you'll agree, is far from ideal :)

[andreiborisov]

@lehni, thank you for sharing your settings, my VS Code is beautiful again! Maybe maintaining those in a separate repo would make sense (as a custom setup of some sort for this extension)?

[drcika]

If I understood correctly
essentially you want to separate the width of the activity bar from the width of the items/icons(two separate configs). it can be done(after vacation :D)

padding-top let's say it's a bug.

extension does not hide host button (if it hides it is definitely a bug and I need a way to reproduce)

[lehni]

@drcika yes I suppose that could work, if setting the items width to 48px would result in them being positioned the same way as VSCode does it by default (height 48px, no extra vertical padding).

margin: 0 auto is still needed to make them center horizontally, it could be set by default.

But this also needs the margin-top: var(--titlebar-height) setting to make room for the traffic lights, which could perhaps be handled by APC.

[lehni]

Oh and you're right, the hosts button being hidden is not caused by APC, apologies for that mix-up.

[drcika]

@lehni
ok now?

[lehni]

@drcika better, thanks!

But I still need to reset the action items styling in the activity bar:

Left: Cleared (same as default VSCode)
Right: Uncleared (With APC Styling)

The problems:

• Not all icons appear at the same scale. This is caused by APC setting -webkit-mask-size. I can fix this by overriding it to -webkit-mask-size: 1em. This setting might actually work for all of APCs use-cases.
• The badges are in the wrong place
• The vertical paddings are too low

The settings I'm still using:

".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item": "margin-top: 0 !important;",
".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item a.action-label": "height: 48px; font-size: 24px; -webkit-mask-size: 1em;",
".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item .badge div.badge-content": "top: 24px; right: 8px;",

[lehni]

In addition to these tweaks, I also still need to set this:

// Don't indent the sidebar title.
".custom-sidebar-titlebar .sidebar .composite.title": "padding-left: 0;",
// Don't indent the statusbar items.
".monaco-workbench .part.statusbar>.items-container>.statusbar-item.left.first-visible-item": "padding-left: 0;",

[andreiborisov]

In addition to these tweaks, I also still need to set this:

// Don't indent the sidebar title.
".custom-sidebar-titlebar .sidebar .composite.title": "padding-left: 0;",
// Don't indent the statusbar items.
".monaco-workbench .part.statusbar>.items-container>.statusbar-item.left.first-visible-item": "padding-left: 0;",

I'm curious about those, as it actually makes stuff unaligned compared to default settings.

[lehni]

That's a question of taste, I guess. Here's how those look. It feels well balanced to me.

[andreiborisov]

@lehni I have a different issue with your setup (and it was the same during Customize UI era): every time I reopen a VS Code window, it shrinks file explorer:

Before closing VS Code/its window:

After closing VS Code/its window:

It's quite annoying since, after a couple of iterations, it makes the file explorer tiny.

If it's something fixable in APC extension, I'll open another issue.

[lehni]

@andreiborisov I never noticed this, mainly because I have VSCode always open, but now that you're mentioning it, I am actually seeing it too.

And what's intersting is the math:

418 - 389 = 29
77 - 29 = 48

48: The default activity-bar width
77: The new activity-bar width, so that it fits the traffic lights

I think VSCode has - 48 hard-coded somewhere internally, where it calculates the explorer size to restore in the next session.

[drcika]

@andreiborisov I never noticed this, mainly because I have VSCode always open, but now that you're mentioning it, I am actually seeing it too.

And what's intersting is the math:

418 - 389 = 29
77 - 29 = 48

48: The default activity-bar width 77: The new activity-bar width, so that it fits the traffic lights

I think VSCode has - 48 hard-coded somewhere internally, where it calculates the explorer size to restore in the next session.

unfortunately, in many, many places they have a hard-coded values :(

I don't have much time to deal with this extension, I've been doing this for my own needs,
and it would mean a lot if any of you could contribute

[lehni]

@drcika the real bug in #52 (comment) is that the icons aren't all appearing with the same scale factor when using a item size that is different from the activity bar size, due to -webkit-mask-size begin set to this calculation:

-webkit-mask-size: calc(var(--activity-bar-action-item-size) * 0.8) calc(var(--activity-bar-action-item-size) * 0.8);

To compare, here with the a.action-label { -webkit-mask-size: 1em; } override, and without it. Compare the size of project manager (the folder), docker (the whale), live share (the rounded arrow), github actions (the bottom one). It looks like most of the action icons provided by extensions get bigger than they're supposed to with this setting, due to the mask being set in this way.

Setting it to -webkit-mask-size: 1em; is the right approach I believe. This is a low-hanging fruit that would already improve the behavior of the new itemSize setting.

But I also think that there should be a value I can set itemSize to, at which the activity bar looks "native", meaning it has the size size as by default, and also the same margins. Right now, everything gets way more condensed with smaller vertical margins and paddings, and the badges are in different places, leaving me no other choice than overriding everything with very specific CSS settings.

[lehni]

I've looked ai bit more into this now. So I'd want to be able to set itemSize to 48 to get the default VSCode look, which comes with 48px size. For this to work, what needs changing in the APC CSS settings is actually rather simple (ignoring the complex selectors needed to make them stick, I just show the actual HTML element selectors that they need to be applied to):

li.action-item {
  margin-top: 0; /* instead of 3px, as hard-coded by APC */
}

a.action-label {
  font-size: calc(var(--activity-bar-action-item-size) * 0.5); /* instead of * 0.6, as hard-coded by APC */
  -webkit-mask-size: 1em; /* to fix the problem outlined above */
}

The batches actually use the correct calculations for the default look already.

And here the corresponding settings in the JSON:

"apc.stylesheet": {
    // Reset APC .activitybar styling back to VSCode defaults.
    ".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item": "margin-top: 0 !important;",
    ".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item a.action-label": "font-size: calc(var(--activity-bar-action-item-size) * 0.5); -webkit-mask-size: 1em;",
}

[drcika]

I've looked ai bit more into this now. So I'd want to be able to set itemSize to 48 to get the default VSCode look, which comes with 48px size. For this to work, what needs changing in the APC CSS settings is actually rather simple (ignoring the complex selectors needed to make them stick, I just show the actual HTML element selectors that they need to be applied to):

li.action-item {
  margin-top: 0; /* instead of 3px, as hard-coded by APC */
}

a.action-label {
  font-size: calc(var(--activity-bar-action-item-size) * 0.5); /* instead of * 0.6, as hard-coded by APC */
  -webkit-mask-size: 1em; /* to fix the problem outlined above */
}

The batches actually use the correct calculations for the default look already.

And here the corresponding settings in the JSON:

"apc.stylesheet": {
    // Reset APC .activitybar styling back to VSCode defaults.
    ".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item": "margin-top: 0 !important;",
    ".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item a.action-label": "font-size: calc(var(--activity-bar-action-item-size) * 0.5); -webkit-mask-size: 1em;",
}

unfortunately I don't have time to work on the extension right now, I would be very grateful if you could do a PR

[lehni]

@drcika wow that was fast, thank you for merging both PRs so quickly! A new release with these two features in would be lovely! ;-)

[lehni]

Closing this since all required PRs were merged. @andreiborisov could you create a separate issue for this? #52 (comment)

[lehni]

With v0.2.9 released, my settings above can now be simplified to this:

{
  "window.titleBarStyle": "native",
  "window.customTitleBarVisibility": "never",
  "window.density.editorTabHeight": "compact",
  "apc.electron": {
    "titleBarStyle": "hiddenInset",
  },
  "apc.header": {
    "height": 37
  },
  "apc.sidebar.titlebar": {
    "height": 37
  },
  "apc.activityBar": {
    "size": 77,
    "itemSize": 48,
    "itemMargin": 0
  }
}