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

Improve visual editor & tool window tab styles #185

Closed
arcticicestudio opened this issue Oct 6, 2021 · 0 comments · Fixed by #186
Closed

Improve visual editor & tool window tab styles #185

arcticicestudio opened this issue Oct 6, 2021 · 0 comments · Fixed by #186

Comments

@arcticicestudio
Copy link
Contributor

"Nord Jetbrains" is a project that exists for a long and therefore has code which reflects the history and changes made to the JetBrains products.
This includes the editor scheme which is responsible for language syntax highlighting, but before JetBrains officially supported UI themes it also defined XML keys for some UI elements which were possible to be styled. Some of them are the TAB_SELECTED and TAB_SELECTED_INACTIVE keys which, as the name suggests, were used for the visual appearance (back- and foreground color) of tabs, e.g. the ones for the editor. After official UI themes were introduced and this project added support for it I thought that the XML keys from the editor scheme are not used anymore and I left them for some backwards compatibility. Anyway, it seems like these keys are still used even when a theme plugin provides a UI theme (JSON).

This results in conflicts between the XML and JSON keys and caused me hours of unnecessary debugging the UI theme while the root cause was that the XML keys took precedence. Users also often reported issues, e.g. #99, which I was not able to fix due to this mix of keys.

After digging into the open sourced code of the JetBrains products I was finally able to get more insights about the logic how these are handled. Next to this the UI theme API also evolved a lot and supports all styles which were only supported by the XML keys before. Therefore the XML keys will finally be removed, starting with the ones for tabs (TAB_*).

The scope of this issue is to…

  1. improve the style of tool window tabs (the ones that are "merged" with the header of a pinned/docked panel/window) in a way that makes the active tab more distinguishable in active & inactive status.
    1.1 The selected and active tab will use the special "brightened comment" color as background to stand out from the underlying header bar that uses the currently brightest color nord3 from the "Polar Night" palette.
    1.2 The bottom stripe of selected but inactive tabs will also use the special "brightened comment" color to distinguish itself from the tab background.
  2. improve the style of editor tabs regarding the visual alignment with tool window tabs and element states, e.g. when being hovered.
    2.1 Selected (active) and unselected tabs will use nord3 as background color for better visibility.
    2.2 The bottom stripe of selected but inactive tabs will use the special "brightened comment" color to distinguish itself from the tab background.
  3. Make use of the new DefaultTabs UI theme key group in order to unify the style of all tab elements across the UI. This allows to remove redundant keys from element specific keys, e.g. the ones from EditorTabs that are almost duplicates of the HeaderTab key group.
  4. Remove deprecated XML keys:
    4.1 TAB_SELECTED — Replaced by the UI key ui.DefaultTabs.background.
    4.2 TAB_SELECTED_INACTIVE — Replaced by the UI key ui.DefaultTabs.inactiveUnderlineColor.
    4.3 TAB_UNDERLINE — Replaced by the UI key ui.DefaultTabs.underlineColor.
    4.4 TAB_UNDERLINE_INACTIVE — Not styled anymore.

Related to #99

@arcticicestudio arcticicestudio added this to the Next milestone Oct 6, 2021
arcticicestudio added a commit that referenced this issue Oct 6, 2021
"Nord Jetbrains" is a project that exists for a long and therefore has
code which reflects the history and changes made to the JetBrains
products.
This includes the editor scheme [1] which is responsible for language
syntax highlighting, but before JetBrains officially supported UI
themes [2] it also defined XML keys for some UI elements which were
possible to be styled. Some of them are the `TAB_SELECTED` and
`TAB_SELECTED_INACTIVE` keys [4] which, as the name suggests, were used
for the visual appearance (back- and foreground color) of tabs,
e.g. the ones for the editor. After official UI themes were introduced
and this project added support for it [3] I thought that the XML keys
from the editor scheme are not used anymore and I left them for some
backwards compatibility. Anyway, it seems like these keys are still
used even when a theme plugin provides a UI theme (JSON).

This resulted in conflicts between the XML and JSON keys and caused me
hours of unnecessary debugging the UI theme while the root cause was
that the XML keys took precedence. Users also often reported issues,
e.g. #99 [5], which I was not able to fix
due to this mix of keys.

After digging into the open sourced code of the JetBrains products I was
finally able to get more insights about the logic how these are handled.
Next to this the UI theme API also evolved a lot and supports all styles
which were only supported by the XML keys before. Therefore the XML
keys have finally been removed, starting with the ones for tabs
(`TAB_*`).

The scope is to...

1. improve the style of tool window tabs (the ones that are "merged"
   with the header of a pinned/docked panel/window) in a way that makes
   the active tab more distinguishable in active & inactive status.
     1.1 The selected and active tab now use the special
         "brightened comment" color as background to stand out from the
         underlying header bar that uses the currently brightest color
         `nord3` from the "Polar Night" palette.
     1.2 The bottom stripe of selected but inactive tabs now also use
         the special "brightened comment" color to distinguish itself
         from the tab
   background.
2. improve the style of editor tabs regarding the visual alignment with
   tool window tabs and element states, e.g. when being hovered.
     2.1 Selected (active) and unselected tabs now use `nord3` as
         background color for better visibility.
     2.2 The bottom stripe of selected but inactive tabs now use the
         special "brightened comment" color to distinguish itself from
         the tab background.
3. make use of the new `DefaultTabs` UI theme key group in order to
   unify the style of all tab elements across the UI. This allows to
   remove redundant keys from element specific keys, e.g. the ones from
   `EditorTabs` that are almost duplicates of the `HeaderTab` key group.
4. remove deprecated XML keys:
   4.1 `TAB_SELECTED` - Replaced by the UI key
       `ui.DefaultTabs.background`.
   4.2 `TAB_SELECTED_INACTIVE` - Replaced by the UI key
       `ui.DefaultTabs.inactiveUnderlineColor`.
   4.3 `TAB_UNDERLINE` - Replaced by the UI key
       `ui.DefaultTabs.underlineColor`.
   4.4 `TAB_UNDERLINE_INACTIVE` - Not styled anymore.

[1]: https://plugins.jetbrains.com/docs/intellij/themes-extras.html?from=jetbrains.org
[2]: https://blog.jetbrains.com/idea/2019/03/brighten-up-your-day-add-color-to-intellij-idea
[3]: #43
[4]: https://github.com/arcticicestudio/nord-jetbrains/blob/ae716da0e52a512c3803fb4f42ab3b3c68370548/resources/themes/nord.xml#L5042-L5053
[5]: #99


Co-authored-by: Sven Greb <[email protected]>

Closes GH-185
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants