Added: Tab's custom properties

- Custom title (inline editing) (#185)
- Custom color (change via context menu)

Author: mbnuqw

src/_locales/dict.common.ts

@@ -733,6 +733,22 @@ export const commonTranslations: Translations = {
     de: 'Andere Tabs schließen',
     zh_CN: '关闭其他标签页',
   },
+  'menu.tab.edit': {
+    en: 'Configure...',
+    ru: 'Настроить...',
+  },
+  'menu.tab.edit_title': {
+    en: 'Edit title',
+    ru: 'Редактировать заголовок',
+  },
+  'menu.tab.colorize_': {
+    en: 'Set color',
+    ru: 'Задать цвет',
+  },
+  'menu.tab.colorize_colors': {
+    en: 'Color...',
+    ru: 'Цвет...',
+  },
   // - Tabs panel
   'menu.tabs_panel.mute_all_audible': {
     en: 'Mute all audible tabs',

src/_locales/dict.sidebar.ts

@@ -512,6 +512,46 @@ export const sidebarTranslations: Translations = {
     ru: 'Сохранить',
     de: 'Speichern',
   },
+
+  // ---
+  // -- Colors
+  // -
+  'colors.toolbar': {
+    en: 'Default',
+    ru: 'Стандартный',
+  },
+  'colors.blue': {
+    en: 'Blue',
+    ru: 'Синий',
+  },
+  'colors.turquoise': {
+    en: 'Turquoise',
+    ru: 'Бирюзовый',
+  },
+  'colors.green': {
+    en: 'Green',
+    ru: 'Зеленый',
+  },
+  'colors.yellow': {
+    en: 'Yellow',
+    ru: 'Желтый',
+  },
+  'colors.orange': {
+    en: 'Orange',
+    ru: 'Оранжевый',
+  },
+  'colors.red': {
+    en: 'Red',
+    ru: 'Красный',
+  },
+  'colors.pink': {
+    en: 'Pink',
+    ru: 'Розовый',
+  },
+  'colors.purple': {
+    en: 'Purple',
+    ru: 'Фиолетовый',
+  },
 }
 
 if (!window.translations) window.translations = sidebarTranslations

src/defaults/menu.ts

@@ -11,12 +11,17 @@ export const TABS_MENU: MenuConf = [
     name: '%menu.tab.reopen_in_sub_menu_name',
     opts: ['reopenInNewWin', 'reopenInWin', 'reopenInCtr', 'reopenInNewCtr'],
   },
+  {
+    name: '%menu.tab.colorize_',
+    opts: ['colorizeTab'],
+  },
   'separator-2',
   'pin',
   'duplicate',
   'discard',
   'copyTabsUrls',
   'copyTabsTitles',
+  'editTabTitle',
   'separator-3',
   'group',
   'flatten',

src/page.setup/components/menu-editor.vue

@@ -176,6 +176,8 @@ const TABS_MENU_OPTS: Record<string, string> = {
   discard: 'menu.tab.discard',
   copyTabsUrls: 'menu.copy_urls',
   copyTabsTitles: 'menu.copy_titles',
+  editTabTitle: 'menu.tab.edit_title',
+  colorizeTab: 'menu.tab.colorize_colors',
   group: 'menu.tab.group',
   flatten: 'menu.tab.flatten',
   clearCookies: 'menu.tab.clear_cookies',

src/services/menu.options.tabs.ts

@@ -1,5 +1,5 @@
 import * as Utils from 'src/utils'
-import { ASKID, CONTAINER_ID, Err, NEWID } from 'src/defaults'
+import { ASKID, COLOR_OPTS, CONTAINER_ID, Err, NEWID } from 'src/defaults'
 import { MenuOption, Window, Tab } from 'src/types'
 import { translate } from 'src/dict'
 import { Tabs } from 'src/services/tabs.fg'
@@ -422,6 +422,33 @@ export const tabsMenuOptions: Record<string, () => MenuOption | MenuOption[] | u
     }
   },
 
+  colorizeTab: () => {
+    const opts: MenuOption[] = []
+    const selected = Selection.get()
+    let usedColor
+    if (selected.length === 1) usedColor = Tabs.byId[selected[0]]?.customColor ?? 'toolbar'
+    for (const color of COLOR_OPTS) {
+      if (usedColor && usedColor === color.color) continue
+      const title = translate('colors.' + color.color)
+      opts.push({
+        label: title,
+        color: color.color as browser.ColorName,
+        icon: color.value === 'toolbar' ? 'icon_none' : 'circle',
+        onClick: () => Tabs.setCustomColor(selected, color.value),
+      })
+    }
+
+    if (opts.length) return opts
+  },
+
+  editTabTitle: () => {
+    return {
+      label: translate('menu.tab.edit_title'),
+      icon: 'icon_edit',
+      onClick: () => Tabs.editTabTitle(Selection.get()),
+    }
+  },
+
   // ---
   // -- Panel options
   // -