Add a spec for per-profile tab colors (#7134)
Co-authored-by: Mike Griese <zadjii@gmail.com> ## Summary of the Pull Request This spec is a subset of #5772, but specific to per-profile tab colors. We've had enough requests for that in the last few days that I want to pull that feature out into it's own spec, so we can get that approved and implemented in a future-proof way. > This spec describes a way to specify tab colors in a profile in a way that will > be forward compatible with theming the Terminal. This spec will be largely > dedicated to the design of a single setting, but within the context of theming. > ## PR Checklist * [x] Specs: #1337 * [x] References: #5772 * [x] I work here ## Detailed Description of the Pull Request / Additional comments _\*<sup>\*</sup><sub>\*</sub> read the spec <sub>\*</sub><sup>\*</sup>\*_
This commit is contained in:
Mike Griese
GitHub
parent
158a1708a6
commit
14c94f5963
|
|
@ -0,0 +1,146 @@
|
|||
---
|
||||
author: Mike Griese @zadjii-msft
|
||||
created on: 2020-07-31
|
||||
last updated: 2020-08-03
|
||||
issue id: #1337
|
||||
---
|
||||
# Per-Profile Tab Colors
|
||||
|
||||
## Abstract
|
||||
|
||||
This spec describes a way to specify tab colors in a profile in a way that will
|
||||
be forward compatible with theming the Terminal. This spec will be largely
|
||||
dedicated to the design of a single setting, but within the context of theming.
|
||||
|
||||
## Inspiration
|
||||
|
||||
Following the addition of the Tab Color Picker in [#3789], we've had numerous
|
||||
requests for the ability to set the color of a tab directly within a profile.
|
||||
While largely we're tracking theming in [#3327], including the specification of
|
||||
a tab color, the theming spec ([#5772] )is very large and will take a while to
|
||||
revise and approve. This spec is intended to pull a single point out from that
|
||||
spec to make it more easily reviewable, and implement it in a way that will
|
||||
continue working when we add support for themes in the future.
|
||||
|
||||
## Solution Design
|
||||
|
||||
To enable per-profile tab colors, we'll add a single setting: `tabColor`. For
|
||||
now<sup>[[1](#user-content-footnote-1)]</sup>, this setting will accept any
|
||||
`#rrggbb` color string.
|
||||
|
||||
Since each profile creates a `Pane` with a `TermControl`, we'll need to store
|
||||
this color not in the `Tab`, but somewhere below `Pane`, so that when you switch
|
||||
between Panes in a tab with different `tabColor`s, the color will update
|
||||
automatically. When a new `TermControl` is created, we'll store this color in the
|
||||
`TermControl`'s `Terminal` core. This is to support the future possibility of
|
||||
setting the tab color via VT sequences.
|
||||
|
||||
A Tab's color will be the result of layering a variety of sources, from the bottom up:
|
||||
|
||||
Color | | Set by
|
||||
-- | -- | --
|
||||
Runtime Color | _optional_ |Color Picker / `setTabColor` action
|
||||
Control Tab Color | _optional_ | Profile's `tabColor`, or a color set by VT
|
||||
Theme Tab Background | _optional_ | `tab.backgroundColor` in the theme
|
||||
Tab Default Color | **default** | TabView in XAML
|
||||
|
||||
Some examples:
|
||||
* **Scenario 1**: The user has set `"tabColor": "#ff0000"` in their profile.
|
||||
When they create tabs with that profile, instead of appearing in the default
|
||||
color for the TabView, they'll be `#ff0000`.
|
||||
* **Scenario 2**: The user has set `"tabColor": "#ff0000"` in their profile.
|
||||
When they try to set the color for that tab (with the color picker) to
|
||||
`#0000ff`, the tab's color is updated to reflect this new blue color. When
|
||||
they clear the runtime color (with the color picker), the tab will return to
|
||||
`#ff0000`.
|
||||
* **Scenario 3**: The user has two profiles with colors set, one to `"tabColor":
|
||||
"#ff0000"`, and the other with `"tabColor": "#00ff00"`. If they open these
|
||||
profiles in two panes side-by side, the tab's color will update to reflect the
|
||||
color from the currently-focused control.
|
||||
* **Scenario 4**: The user has two profiles with colors set, one to `"tabColor":
|
||||
"#ff0000"`, and the other with `"tabColor": "#00ff00"`. If they open these
|
||||
profiles in two panes side-by side, and try to set the color for that tab
|
||||
(with the color picker) to `#0000ff`, the tab's color is updated to reflect
|
||||
this new blue color. Regardless of which pane is focused, the tab will be
|
||||
blue.
|
||||
* **Scenario 5**: The user has set `"tabColor": "#ff0000"` in their profile
|
||||
("Profile A"), and `"tab.backgroundColor": "#00ff00"`in their theme. When they
|
||||
create tabs with "Profile A", the tabs will appear red. Other tabs (for
|
||||
profiles without `tabColor` set) will appear green, using the color from the
|
||||
theme.
|
||||
|
||||
|
||||
## UI/UX Design
|
||||
|
||||
In general, this is going to look exactly like the colored tabs look now.
|
||||
|
||||
|
||||
|
||||
## Capabilities
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td><strong>Accessibility</strong></td>
|
||||
<td>
|
||||
N/A
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Security</strong></td>
|
||||
<td>
|
||||
N/A
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Reliability</strong></td>
|
||||
<td>
|
||||
No expected change
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Compatibility</strong></td>
|
||||
<td>
|
||||
This entire spec outlines how this feature is designed with a emphasis on future
|
||||
compatibility. As such, there are no expected regressions in the future when we
|
||||
do add support for themes.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Performance, Power, and Efficiency</strong></td>
|
||||
<td>
|
||||
No expected change
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Potential Issues
|
||||
|
||||
None expected.
|
||||
|
||||
## Footnotes
|
||||
|
||||
<a id="footnote-1"><a>[1]: When full theming support is added, themes will
|
||||
provide support for setting colors as one of a variety of values:
|
||||
|
||||
* An `#rrggbb` string
|
||||
* The system accent color
|
||||
* The current background color of the Terminal
|
||||
* A value from a given resource key from XAML
|
||||
|
||||
When support for these other types of "smart" colors is added, then the profile
|
||||
`tabColor` setting will also gracefully accept these values.
|
||||
|
||||
## Future considerations
|
||||
|
||||
* It's not out of the realm of possibility that someone might want to color each
|
||||
_pane_'s color at runtime. In that case, the runtime color would be stored in
|
||||
the `Pane`, not the `Tab`.
|
||||
|
||||
|
||||
|
||||
<!-- Footnotes -->
|
||||
|
||||
[#1337]: https://github.com/microsoft/terminal/issues/1337
|
||||
[#3789]: https://github.com/microsoft/terminal/issues/3789
|
||||
[#3327]: https://github.com/microsoft/terminal/issues/3327
|
||||
[#5772]: https://github.com/microsoft/terminal/pull/5772
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 816 KiB |
Loading…
Reference in New Issue