mirror of
https://github.com/fish-shell/fish-shell.git
synced 2026-04-23 02:41:14 -03:00
190d367bc4
Implicitly-universal variables have some downsides:
- It's surprising that "set fish_color_normal ..."
and "set fish_key_bindings fish_vi_key_bindings" propagate to other
shells and persist, especially since all other variables (and other
shells) would use the global scope.
- they don't play well with tracking configuration in Git.
- we don't know how to roll out updates to the default theme (which is
problematic since can look bad depending on terminal background
color scheme).
It's sort of possible to use only globals and unset universal variables
(because fish only sets them at first startup), but that requires
knowledge of fish internals; I don't think many people do that.
So:
- Set all color variables that are not already set as globals.
- To enable this do the following, once, after upgrading:
copy any existing universal color variables to globals, and:
- if existing universal color variables exactly match
the previous default theme, and pretend they didn't exist.
- else migrate the universals to ~/.config/fish/conf.d/fish_frozen_theme.fish,
which is a less surprising way of persisting this.
- either way, delete all universals to do the right thing for most users.
- Make sure that webconfig's "Set Theme" continues to:
- instantly update all running shells
- This is achieved by a new universal variable (but only for
notifying shells, so this doesn't actually need to be persisted).
In future, we could use any other IPC mechanism such as "kill -SIGUSR1"
or if we go for a new feature, "varsave" or "set --broadcast", see
https://github.com/fish-shell/fish-shell/issues/7317#issuecomment-701165897
https://github.com/fish-shell/fish-shell/pull/8455#discussion_r757837137.
- persist the theme updates, completely overriding any previous theme.
Use the same "fish_frozen_theme.fish" snippet as for migration (see above).
It's not meant to be edited directly. If people want flexibility
the should delete it.
It could be a universal variable instead of a conf snippet file;
but I figured that the separate file looks nicer
(we can have better comments etc.)
- Ask the terminal whether it's using dark or light mode, and use an
optimized default. Add dark/light variants to themes,
and the "unknown" variant for the default theme.
Other themes don't need the "unknown" variant;
webconfig already has a background color in context,
and CLI can require the user to specify variant explicitly if
terminal doesn't advertise colors.
- Every variable that is set as part of fish's default behavior
gets a "--label=default" tacked onto it.
This is to allow our fish_terminal_color_theme event handler to
know which variables it is allowed to update. It's also necessary
until we revert 7e3fac561d (Query terminal only just before reading
from it, 2025-09-25) because since commit, we need to wait until
the first reader_push() to get query results. By this time, the
user's config.fish may already have set variables.
If the user sets variables via either webconfig, "fish_config theme
{choose,save}", or directly via "set fish_color_...", they'd almost
always remove this label.
- For consistency, make default fish_key_bindings global
(note that, for better or worse, fish_add_path still remains as
one place that implicitly sets universal variables, but it's not
something we inject by default)
- Have "fish_config theme choose" and webconfig equivalents reset
all color variables. This makes much more sense than keeping a
hardcoded subset of "known colors"; and now that we don't really
expect to be deleting universals this way, it's actually possible
to make this change without much fear.
Should have split this into two commits (the changelog entries are
intertwined though).
Closes #11580
Closes #11435
Closes #7317
Ref: https://github.com/fish-shell/fish-shell/issues/12096#issuecomment-3632065704
355 lines
24 KiB
HTML
355 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="fishconfig">
|
|
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
|
|
<title>fish shell configuration</title>
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
<link rel="stylesheet" type="text/css" href="fishconfig.css" />
|
|
<link rel="stylesheet" type="text/css" media="print" href="fishconfig_print.css">
|
|
<script type="text/javascript" src="js/colorutils.js" defer></script>
|
|
<script type="text/javascript" src="js/main.js" defer></script>
|
|
<script type="text/javascript" src="js/alpine.js" defer></script>
|
|
</head>
|
|
|
|
<!-- TODO check that every x-for has a :key binding -->
|
|
<!-- TODO check that every template has single child -->
|
|
<!-- TODO try to reduce depth by either splitting routes or eliminating redundant wrappers -->
|
|
|
|
<body id="ancestor" x-data="{ currentTab: 'colors' }">
|
|
<main id="parent">
|
|
<div id="tab_parent">
|
|
<a :class="{'tab': true, 'selected_tab': currentTab =='colors'}" id="tab_colors"
|
|
@click="currentTab = 'colors'">colors</a>
|
|
<a :class="{'tab': true, 'selected_tab': currentTab == 'prompt'}" id="tab_prompt"
|
|
@click="currentTab = 'prompt'">prompt</a>
|
|
<a :class="{'tab': true, 'selected_tab': currentTab == 'functions'}" id="tab_functions"
|
|
@click="currentTab = 'functions'">functions</a>
|
|
<a :class="{'tab': true, 'selected_tab': currentTab == 'variables'}" id="tab_variables"
|
|
@click="currentTab = 'variables'">variables</a>
|
|
<a :class="{'tab': true, 'selected_tab': currentTab == 'history'}" id="tab_history"
|
|
@click="currentTab = 'history'">history</a>
|
|
<a :class="{'tab': true, 'selected_tab': currentTab == 'bindings'}" id="tab_bindings"
|
|
@click="currentTab = 'bindings'"><span class="print_only">fish shell </span>bindings</a>
|
|
</div>
|
|
<div id="tab_contents">
|
|
<template x-if="currentTab === 'colors'" x-data="colors">
|
|
<div>
|
|
<!-- ko with: color_picker -->
|
|
<div class="colorpicker_text_sample" :style="{'background-color': actualTerminalBackgroundColor}">
|
|
<span style="position: absolute; left: 10px; top: 3px"
|
|
:style="{'color': `#${text_color_for_color(actualTerminalBackgroundColor)}`}"
|
|
x-text="selectedColorScheme.name_with_color_theme"></span>
|
|
<br />
|
|
<div class="color_picker_background_cells">
|
|
<span style="display: block; text-align: right; line-height: 110%"
|
|
:style="{'color': `#${text_color_for_color(actualTerminalBackgroundColor)}`}">
|
|
Simulate background color
|
|
</span>
|
|
<template x-for="color in sampleTerminalBackgroundColors">
|
|
<label :style="{'background-color': color}">
|
|
<input type="radio" :value="color" x-model="overriddenTerminalBackgroundColor" hidden
|
|
:title="'Preview with this background color.\n\nfish cannot change the background color of your terminal. Refer to your terminal settings to set its background color.'">
|
|
</input>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
<!-- This is the sample text -->
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_command'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_command)}"
|
|
@click="selectColorSetting('fish_color_command')">/bright/vixens</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_param'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_param)}"
|
|
@click="selectColorSetting('fish_color_param')">jump</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_end'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_end)}"
|
|
@click="selectColorSetting('fish_color_end')">|</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_command'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_command)}"
|
|
@click="selectColorSetting('fish_color_command')">dozy</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_quote'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_quote)}"
|
|
@click="selectColorSetting('fish_color_quote')"> "fowl"</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_redirection'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_redirection)}"
|
|
@click="selectColorSetting('fish_color_redirection')">> quack</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_end'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_end)}"
|
|
@click="selectColorSetting('fish_color_end')">&</span>
|
|
<br>
|
|
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_command'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_command)}"
|
|
@click="selectColorSetting('fish_color_command')">echo</span>
|
|
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_error'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_error)}"
|
|
@click="selectColorSetting('fish_color_error')">'</span><span
|
|
:class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_quote'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_quote)}"
|
|
@click="selectColorSetting('fish_color_quote')">Errors are the portals to discovery</span>
|
|
|
|
<br>
|
|
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_comment'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_comment)}"
|
|
@click="selectColorSetting('fish_color_comment')"># This is a comment</span>
|
|
|
|
<br>
|
|
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_command'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_command)}"
|
|
@click="selectColorSetting('fish_color_command')">Th</span><span class="fake_cursor"><span
|
|
style="visibility: hidden">i</span></span><span
|
|
:class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'fish_color_autosuggestion'}"
|
|
:style="{ 'color': interpret_color(currentColorScheme().colors.fish_color_autosuggestion)}"
|
|
@click="selectColorSetting('fish_color_autosuggestion')">s is an autosuggestion</span>
|
|
|
|
|
|
<div style="position: absolute; right: 5px; bottom: 5px;">
|
|
|
|
<button class="customize_theme_button" :class="{button_highlight: customizationActive}"
|
|
:style="{'color': `#${text_color_for_color(actualTerminalBackgroundColor)}`}"
|
|
@click="toggleCustomizationActive">Customize</button>
|
|
|
|
<button class="save_button"
|
|
:style="{'color': `#${text_color_for_color(actualTerminalBackgroundColor)}`}"
|
|
x-show="showSaveButton" @click="setTheme" x-text="saveThemeButtonTitle"></button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div x-show="customizationActive">
|
|
<div style="margin: 10px 0 7px 35px;">Choose a color for <span
|
|
x-text="csUserVisibleTitle"></span>:</div>
|
|
<!-- TODO maybe add input[type=color] for 24bit terminals -->
|
|
<table class="colorpicker_term256" style="margin: 0px 20px;">
|
|
<tbody>
|
|
<template x-for="color_array in colorArraysArray">
|
|
<tr class="colorpicker_term256_row">
|
|
<template x-for="color in color_array">
|
|
<td class="colorpicker_term256_cell"
|
|
:style="{'background-color': interpret_color(color)}"
|
|
@click="changeSelectedTextColor(color)">
|
|
<div class="colorpicker_term256_selection_indicator"
|
|
x-show="currentColorScheme().colors[selectedColorSetting] == color"
|
|
:style="{'border-color': interpret_color(border_color_for_color(color))}">
|
|
</div>
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
<!-- /ko -->
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin: 10px 0 7px 35px;">Preview a theme below:</div>
|
|
|
|
<div class="color_scheme_choices_scrollview">
|
|
<div class="color_scheme_choices_list">
|
|
<template x-for="colorScheme in colorSchemes">
|
|
<div class="color_scheme_choice_container"
|
|
@click="changeSelectedColorScheme(colorScheme)">
|
|
<div class="color_scheme_choice_label">
|
|
<!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
|
|
<span x-text="colorScheme.name_with_color_themes"></span>
|
|
<a x-show="colorScheme.url" style="text-decoration: none; color: inherit;"
|
|
:href="colorScheme.url">➚</a>
|
|
</div>
|
|
<div class="colorpicker_text_sample_tight"
|
|
:style="{'background-color': default_color_scheme(colorScheme).preferred_background}">
|
|
<span
|
|
:style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_command)}">/bright/vixens</span>
|
|
<span :style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_param)}">jump</span>
|
|
<span :style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_end)}">|</span>
|
|
<span :style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_command)}">dozy</span>
|
|
<span :style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_quote)}"> "fowl" </span>
|
|
<span :style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_redirection)}">>
|
|
quack</span>
|
|
<span :style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_end)}">&</span>
|
|
<br>
|
|
<span :style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_command)}">echo</span>
|
|
<span :style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_error)}">'</span><span
|
|
:style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_quote)}">Errors are the
|
|
portals to discovery</span>
|
|
<br>
|
|
<span :style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_comment)}"># This is a
|
|
comment</span>
|
|
<br>
|
|
<span :style="{'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_command)}">Th</span><span
|
|
class="fake_cursor"><span style="visibility: hidden">i</span></span><span
|
|
:style="{ 'color': interpret_color(default_color_scheme(colorScheme).colors.fish_color_autosuggestion)}">s is an
|
|
autosuggestion</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Investigate potential race condition with selectedPrompt (e.g. replace x-if with x-show) -->
|
|
<template x-if="currentTab === 'prompt'" x-data="prompt">
|
|
<div class="height_limiter">
|
|
<!-- The first 'sample' prompt is the current one; the remainders are samples. This ought to be cleaned up. -->
|
|
<div class="current_prompt" style="min-height: 7.5em;"
|
|
:style="{'background-color': actualTerminalBackgroundColor}">
|
|
<div class="prompt_demo_choice_label" style="color: #FFF;" x-text="selectedPrompt.name"></div>
|
|
<div style='display: flex'>
|
|
<div x-html='selectedPrompt.demo' style='flex-grow: 1' class="prompt_demo unbordered"></div>
|
|
<template x-if="selectedPrompt.right">
|
|
<div title="right prompt for {{selectedPrompt.name }}" x-html='selectedPrompt.right'
|
|
class="prompt_demo unbordered" @click="selectPrompt(selectedPrompt)">
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div style="position: absolute; right: 5px; bottom: 5px;">
|
|
<button class="save_button" x-show="showSaveButton" style="color: #CCC" @click="setPrompt()"
|
|
x-text="savePromptButtonTitle"></button>
|
|
</div>
|
|
</div>
|
|
<div style="margin: 10px 15px 7px 15px; padding-bottom: 10px; border-bottom: solid 1px #999">Preview
|
|
a
|
|
prompt below:</div>
|
|
<div class="prompt_choices_scrollview">
|
|
<div class="prompt_choices_list">
|
|
<template x-for="p in samplePrompts" :key="p.name">
|
|
<div>
|
|
<div class="prompt_demo_choice_label" x-text="p.name"></div>
|
|
<template x-if="p.right">
|
|
<div style="display: flex;">
|
|
<div x-html="p.demo" class="prompt_demo" style="flex-grow: 1"
|
|
@click="selectPrompt(p)"></div>
|
|
<div title="right prompt for {{p.name}}" x-html="p.right || ''"
|
|
class="prompt_demo" @click="selectPrompt(p)"></div>
|
|
</div>
|
|
</template>
|
|
<template x-if="!p.right">
|
|
<div x-html="p.demo" class="prompt_demo" @click="selectPrompt(p)">
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="currentTab === 'functions'" x-data="functions">
|
|
<div class="function_tab">
|
|
<div class="function-list">
|
|
<template x-for="func in functions">
|
|
<!-- TODO use ul/li -->
|
|
<div>
|
|
<div id="master_{{func}}"
|
|
:class="{'master_element': true, 'selected_master_elem': func == selectedFunction }"
|
|
@click="selectFunction(func)">
|
|
<span class="master_element_text" x-text="func"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="function-body">
|
|
<div class="detail_function" x-html="functionDefinition"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template x-if="currentTab === 'variables'" x-data="variables">
|
|
<div>
|
|
<div id="table_filter_container">
|
|
<input id="table_filter_text_box" class="filter_text_box text_box_transient"
|
|
placeholder="Filter" x-model="query">
|
|
</div>
|
|
<table class="data_table">
|
|
<template x-for="v in filteredVars" :key="v.name">
|
|
<tr class="data_table_row" tabindex="0" x-data="{ focused: false }"
|
|
@focusin="focused = true" @focusout="focused = false">
|
|
<td class="data_table_cell no_overflow" style="text-align: right; padding-right: 30px;"
|
|
x-text="v.name"></td>
|
|
<!-- Small hack to select/unselect variables -->
|
|
<td :class="{ 'data_table_cell': true, 'no_overflow': !focused }"
|
|
style="text-align: left; padding-right: 30px;" x-text="v.value"></td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="currentTab === 'history'" x-data="history">
|
|
<div>
|
|
<div id="table_filter_container">
|
|
<table class="paginator">
|
|
<tr>
|
|
<td class="prev">
|
|
<button type="button" @click="prevPage" :disabled="currentPage == 0">« Prev</button>
|
|
</td>
|
|
<td class="desc" x-text="currentPageDescription"></td>
|
|
<td class="next">
|
|
<button type="button" @click="nextPage"
|
|
:disabled="(currentPage+1)*itemsPerPage >= filteredItems.length">Next »</button>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
<input id="table_filter_text_box" class="filter_text_box text_box_transient"
|
|
placeholder="Filter" x-model.debounce="query">
|
|
</div>
|
|
<table class="data_table">
|
|
<!-- TODO maybe use history index as keys here? -->
|
|
<template
|
|
x-for="item in filteredItems.slice(currentPage * itemsPerPage, (currentPage+1) * itemsPerPage)"
|
|
:key="item">
|
|
<tr>
|
|
<td :class="{'history_text': true, 'no_overflow': selectedItems.indexOf(item) < 0}"
|
|
@click="selectItem(item)" x-text="item"></td>
|
|
<td class="history_delete">
|
|
<button type="button" class="delete_button" title="Delete"
|
|
@click="deleteHistoryItem(item)">×</button>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template x-if="currentTab === 'bindings'" x-data="bindings"
|
|
x-init="bindings = await (await fetch('bindings/')).json()">
|
|
<div>
|
|
<div id="table_filter_container">
|
|
<input id="table_filter_text_box" class="filter_text_box text_box_transient"
|
|
placeholder="Filter" x-model="query">
|
|
</div>
|
|
<table class="data_table">
|
|
<template x-for="b in filteredBindings" :key="b.command">
|
|
<tr class="data_table_row" tabindex="0" x-data="{ focused: false }"
|
|
@focusin="focused = true" @focusout="focused = false">
|
|
<td :class="{ 'data_table_cell': true, 'no_overflow': !focused }"
|
|
style="text-align: right; padding-right: 30px;" x-text="b.command"></td>
|
|
<!-- Small hack to select/unselect variables -->
|
|
<td :class="{ 'data_table_cell': true, 'no_overflow': !focused }"
|
|
style="text-align: left; padding-right: 30px;">
|
|
<template x-for="variety in b.bindings" :key="variety.readable_binding">
|
|
<div>
|
|
<span x-text="variety.readable_binding"></span>
|
|
<template x-for="raw in variety.raw_bindings" :key="raw">
|
|
<div class="raw_binding" x-show="focused" x-text="raw"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|