← Все статьи

Окна во фронтенде

Плавающая кнопка JustZix — капля из 3 букв с hover-состоянием, snap, попап-меню

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

Плавающая кнопка — это маленькая капля из 3 букв, которую ты видишь на каждой странице, где у JustZix есть активное правило. Это вход во весь UI JustZix — клик открывает попап с переключателями, drag позволяет переместить её, snap соединяет её с панелями действий. Визуально маленькая, но конденсирует много функциональности. Эта статья раскрывает её изнутри.

Метка из 3 букв по папке

У каждой папки в JustZix (главная единица группировки правил) есть необязательная иконка — максимум 3 символа, автоматически в ВЕРХНЕМ РЕГИСТРЕ. Плавающая кнопка показывает иконку первой совпадающей папки (по префиксу URL):

folder.icon = 'qa'      → метка «QA»
folder.icon = 'dev'     → метка «DEV»
folder.icon = '🐛'      → метка «🐛» (emoji обрезан до 3 символов)
folder.icon = (пусто)   → метка «ZIX» (по умолчанию)

Идея: у опытного пользователя 5-10 папок по проектам, у каждой свой маркер из 3 букв. Видеть «QA» на плавающей кнопке означает, что QA-правила активны. Визуальная обратная связь до любого взаимодействия.

4 визуальных состояния — цвет + прозрачность

Состояние обновляется автоматически при storage onChanged — переключи правило откуда угодно (страница опций, попап-виджет, контекстное меню Chrome) → плавающая кнопка сразу меняет вид.

Анатомия клика — попап-виджет

Левый клик на плавающей кнопке → открывается попап-виджет рядом с ней. Виджет содержит:

• Глобальная пауза — pauseToggle сверху, один клик = выключить всё расширение
• Секция Папки — чекбокс по папке, совпадающей с URL, переключатель on/off по папке (постоянный)
• Секция Панели действий — переключает видимость каждой панели отдельно (сессия по вкладке)
• Секция Окна CSS/JS/Console — чекбокс по pane (постоянный)
• Ссылка «Открыть Опции» — полный редактор в новой вкладке

Клик вне закрывает попап (слушатель событий на уровне document). Клик по чекбоксу активирует setBarHidden / setCssPaneEnabled / setFolderEnabled — все сцеплены через Promise, чтобы избежать гонок.

Snap-соединения с панелями и panes

Плавающая кнопка участвует в snap-соединениях как псевдоэлемент с ID '__float'. Механика идентична panes:

1. Перетащи плавающую кнопку рядом с панелью действий (≤20px) → snap, два элемента = группа
2. Перетащи любой элемент группы → вся группа двигается вместе
3. Правый клик на плавающей кнопке → контекстное меню с опциями «Отсоединить от X»

Сценарий: плавающая кнопка как «якорная ручка» для всей группы. Панели + Output Console защёлкнуты к плавающей кнопке → перетаскивание плавающей кнопки = двигаешь весь дашборд.

Правый клик = контекстное меню

Тот же механизм, что у панелей / CSS panes — контекстное меню по элементу. У плавающей кнопки есть:

• «Скрыть до перезагрузки» — плавающая кнопка пропадает до следующего F5. Постоянный OFF требует страницы опций (намеренно не в контекстном меню — чтобы пользователи не путали «скрыть» с «выключить всё расширение»)
• «Отсоединить от X» — по snap-соединению. Плюс «Отсоединить все соединения»

Никакого шрифта/размера — плавающая кнопка фиксированного размера (32×32px). Там нет текста для кастомизации кроме метки из 3 букв (которая берётся из folder.icon).

Сценарий 1 — визуальный индикатор scope

У тебя 3 папки: «ALL» (работает везде), «GHB» (только github), «GMA» (только gmail). У каждой свой цвет (зелёный, чёрный, красный) и иконка из 3 букв. Посещаешь github.com → плавающая кнопка показывает чёрный «GHB». Посещаешь gmail.com → красный «GMA». Без проверки попап-виджета ты видишь scope.

Сценарий 2 — быстрая глобальная пауза

Звонок Skype, демонстрация новой фичи кому-то в продакшене, JustZix может мешать. Клик на плавающей кнопке → переключатель «Глобальная пауза» → расширение выключает все правила. После демо → кликни снова → включено. Без захода в chrome://extensions.

Сценарий 3 — скрытие по странице до перезагрузки

Правило «Force dark mode» совпадает и с сайтом твоего банка — у которого уже есть своя тёмная тема. Плавающая кнопка закрывает логотип банка. Правый клик на плавающей кнопке → «Скрыть до перезагрузки» → плавающая кнопка пропадает только в этой вкладке, до F5. Правила всё ещё работают, скрыт только UI.

Сценарий 4 — позиция по доменам

Позиция плавающей кнопки постоянна в chrome.storage.sync. По умолчанию снизу справа (якорь BR). Перетащи → сохрани → следующий визит на этот домен возвращает её туда, где ты оставил. Позиция по ID элемента, но все страницы разделяют ID '__float' — поэтому позиция глобальна между доменами. Если хочешь по странице → используй snap с панелью, которая специфична для scope.

Ловушки

• Иконка из 3 букв — обрезана до 3 символов. «qa-team» → «QA-» (с дефисом). Лучшая практика: 1-3 буквенно-цифровых символа. Одиночный emoji = OK (например, 🐛 → «🐛»), но мульти-символьный emoji (👨‍💻 = 5 кодпоинтов) обрезается странно.
• folder.icon по умолчанию «ZIX», даже когда ты не определяешь кастомную — когда-то было «JZ» (2 символа), с v2.13 это «ZIX», выровнено с брендом.
• Глобальная пауза vs выключение по папке. Глобальная пауза не обнуляет состояние включения по папкам — снимая паузу, папки возвращаются в состояние, в котором были. Выключение по папке постоянно, независимо от глобальной паузы.
• Позиция плавающей кнопки в sync-хранилище может рассинхронизироваться между устройствами, если ты быстро перетаскиваешь на одном и открываешь вкладку на другом. Eventual consistency Chrome ~1-2 сек.
• Snap плавающей кнопки не двусторонний. Позиция плавающей кнопки глобальна, у панелей позиция по состоянию окна. Snap работает визуально, но если ты переместишь плавающую кнопку на другую вкладку, панели за ней не последуют (они scope-locked к своей вкладке).

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

Плавающая кнопка — это «точка входа» для всего UI JustZix — все остальные элементы (панели, panes) более контекстны. Смотри также:

• Snap-соединения — плавающая кнопка как якорь для группы
• Контекстное меню на заголовках panes — параллельный механизм
• Мини-IDE во вкладке — полная карта UI

Установи JustZix — плавающая кнопка появится сама, как только ты добавишь первое правило.