← Все статьи

API и хелперы

Контекстное меню на заголовках panes — правый клик = шрифт, размер, отсоединить, отключить

15 мая 2026 · автор JustZix Team

Pane на экране. Ты хочешь отцепить его от snap-группы. Или сменить ему шрифт на Fira Code. Или отключить его, чтобы он на момент пропал. Без контекстного меню тебе пришлось бы идти на страницу опций (3 клика), редактировать pane, сохранять, возвращаться на страницу. С контекстным меню (с v2.13.42 для панелей, v2.13.55 для CSS panes, v2.13.70 для всех panes со шрифтами) — правый клик на заголовке, 1 секунда.

Что в контекстном меню

Правый клик на .jz-pane-header (узкая полоса наверху pane, та самая, за которую ты хватаешь для перетаскивания) открывает плавающее меню с 4 секциями:

Всё применяется мгновенно — никакого F5, никакой кнопки сохранения. Смена шрифта на «Fira Code» → ты сразу видишь лигатуры (===, !==, →), если шрифт установлен в системе.

Работает для всех 4 типов panes + панели

Контекстное меню унифицировано — один showBarContextMenu(id, x, y) обрабатывает 5 типов элементов. Определение типа по префиксу ID:

• ab_* → Панель действий — все опции кроме шрифта/размера
• cp_* → CSS pane — полное меню
• jp_* → JS pane — полное меню
• jc_* → JS Console — полное меню
• oc_* → Output Console — полное меню

У панелей действий нет шрифта/размера (их содержимое — кнопки, не текст для чтения). У CSS panes/JS panes — есть, потому что там ты читаешь/пишешь код.

Сценарий 1 — отсоединить snap-соединение

У тебя группа: Панель действий + CSS pane + Output Console, защёлкнутые вертикально. Ты хочешь вытащить Output Console, чтобы переместить её на другой монитор. Без контекстного меню — пришлось бы перетащить её на >20px от группы, но тогда snap отсоединяется «лениво», и позиция может оказаться достаточно близкой для повторного защёлкивания.

С контекстным меню — правый клик на заголовке Output Console → «Отсоединить все соединения». Соединения исчезли. Теперь Output Console можно перетащить куда угодно без риска повторного snap. Бонус: «Отсоединить от CSS pane» (по соединению) оставляет другие соединения нетронутыми — полезно для групп из 3 элементов, где ты хочешь разорвать только один край.

Сценарий 2 — скрыть pane на момент

Ты делаешь рефакторинг CSS. CSS pane открыт с таблицей стилей в 200 строк. Приходит письмо — ты хочешь ответить в Gmail в той же вкладке. Pane визуально мешает.

• CSS pane → «Отключить этот CSS pane»: pane пропал. Постоянно — F5 его не возвращает. Включи снова через попап виджета (клик на иконке JustZix на панели инструментов), или chrome → JustZix → «CSS-окна» → чекбокс.
• Панель действий → «Скрыть до перезагрузки»: панель пропала только в этой вкладке, до следующего F5. Легче, переключатель «только сейчас».

Намеренная разница: у panes (CSS/JS/Console/OC) есть «Отключить» = постоянно (их роль — «это должно быть видимо всегда»). У панелей есть «Скрыть до перезагрузки» = эфемерно (панели видимы по умолчанию, поэтому отключение = «не сейчас»).

Сценарий 3 — шрифт Fira Code для CSS-редактора

Шрифт по умолчанию для pane.body — системный моно — читаемый, но без лигатур. Если у тебя локально установлен Fira Code:

1. Правый клик на заголовке CSS pane → Шрифт → «Fira Code».
2. Редактор сразу рендерит лигатуры: => как →, !== как ≠, >= как ≥.
3. Изменение по pane — у каждого CSS pane / JS pane / Console может быть свой шрифт.

Предлагаемый список: Default (системный моно), Fira Code, JetBrains Mono, Cascadia Code, Consolas, Menlo, ui-monospace. Если в системе нет шрифта — браузер делает фолбэк на monospace (то же, что Default). Никаких ошибок, никаких предупреждений — изящно.

Сценарий 4 — размер 10px для мини-дашборда

Ты строишь личный дашборд для 4K-монитора. CSS pane + JS pane + Output Console защёлкнуты снизу справа, каждый 300×200px. Размер шрифта по умолчанию (~13px) приводит к тому, что текст плохо помещается.

Правый клик → Размер → 10px. Три раза (каждый pane отдельно). Теперь в 200px высоты помещается ~16 строк вместо ~12. Мини-дашборд становится плотным на информацию.

Наоборот для доступности: размер 18-20px даёт больше комфорта пользователям с проблемами зрения, ценой плотности информации.

Сценарий 5 — кастомизация по pane

Три CSS panes в одной вкладке:

• «Production styles» — Fira Code 13px (комфорт)
• «Quick fixes» — Consolas 12px (мелкий, для сниппетов в 5 строк)
• «Color palette» — ui-monospace 14px (по умолчанию, раз содержимое — только hex-коды)

У каждого pane своя конфигурация постоянного хранилища. F5 → всё возвращается в свой шрифт/размер. Между вкладками тоже (chrome.storage.local).

Ловушки

• Правый клик ДОЛЖЕН быть на .jz-pane-header (узкая полоса вверху). Правый клик на теле pane (textarea) открывает нативное меню браузера (Вырезать/Копировать/Вставить/Инспектировать). Намеренно — тело это «рабочая зона», заголовок «зона управления».
• У панелей действий НЕТ шрифта/размера. Панель действий — это кнопки, не текст. Чтобы увеличить текст кнопок → используй поля color + кастомный CSS в своих правилах.
• Фолбэк шрифта тихий. Если пользователь выбирает «Fira Code», не установив его, браузер обычно тихо делает фолбэк на monospace. Проверь в Настройки → Конфиденциальность → Настройки сайтов → Шрифты, есть ли у браузера доступ к системным шрифтам (на некоторых конфигурациях ограничен).
• Отключение CSS pane постоянно. Легко забыть, что ты скрыл pane → потом удивляешься, почему CSS не применяется. Места для повторного включения: попап виджета (клик на иконке JustZix), chrome → JustZix → подменю «CSS-окна», или options.html.
• Отсоединение snap НЕ удаляет метаданные соединения. Если ты перетащишь pane обратно на <20px от его старого соседа, snap возвращается. Намеренно — отсоединение это «ad-hoc сдвиг», не постоянное разъединение.

Что делать дальше

Контекстное меню — это «второй слой UI» — быстрые изменения без обхода в опции. Идеально для опытных пользователей, проводящих часы в день с панелями JustZix. Смотри также:

• Snap-соединения — полная механика групп, тех, от которых ты отсоединяешься
• Глобальные горячие клавиши Ctrl+Shift+L/S/K/H — почему правого клика не всем достаточно
• Мини-IDE во вкладке — полная карта UI

Установи JustZix — полностью бесплатно, без аккаунта, без сервера.