Edytor: licznik linii w zakładkach, szerszy scrollbar i dłuższe etykiety akcji
Większe zmiany (shadow DOM, dark mode, AI Helper) idą na nagłówki. Drobne poprawki UX nie — a to one zwykle zmieniają, jak codziennie korzystasz z narzędzia. W v3.2.80–82 zebraliśmy cztery rzeczy, które razem czynią pracę z edytorem reguł znacznie przyjemniejszą.
Licznik linii w zakładkach CSS / JS / Akcje (v3.2.82)
Każda zakładka edytora reguł — CSS, JS, Akcje — ma teraz badge z liczbą linii obok jej nazwy. Analogicznie do tego, co od dawna miała zakładka Akcje pokazując liczbę akcji.
Po co: gdy patrzysz na zestaw, od razu widzisz, gdzie jest „mięso". 87 linii CSS + 12 linii JS + 3 akcje — jeden rzut oka i wiesz, że ten zestaw jest średnio złożony, a większość logiki siedzi w CSS. Wcześniej musiałeś otworzyć każdą zakładkę, żeby ocenić.
Drobny detal techniczny: licznik aktualizuje się natychmiast podczas pisania (debounce 200 ms), więc badge nie miga przy każdym keystroke.
Szerszy scrollbar w oknach: 10 → 14 px (v3.2.80)
Wewnętrzny scrollbar okien deweloperskich (CSS pane, JS pane, JS Console, Output Console, AI Helper) miał 10 px szerokości — co kolidowało z 8-pikselowym uchwytem resize na prawej krawędzi. Łatwo było złapać uchwyt zamiast scrollbara i przez przypadek zmienić rozmiar okna.
Po zmianie scrollbar ma 14 px szerokości — wygodniej się go klikuje, a uchwyt resize wciąż jest dostępny, ale wyraźnie poniżej krawędzi scrollbara. Brak konfliktu, brak frustracji.
Etykiety akcji 8 → 12 znaków (v3.2.81)
Akcje w pasku miały hardcoded limit etykiety = 8 znaków. To było wystarczające na „Dark", „Hide" itp., ale przy pracy z AI Helperem często chciał on stworzyć dłuższą, bardziej opisową nazwę („Hide ads", „Wide column") — i był przycinany.
Nowy limit to 12 znaków. UI i backend są zsynchronizowane — AI Helper, edytor, render w pasku, panel ustawień — wszystkie mówią o tej samej długości. Etykiety mogą teraz nieść więcej kontekstu na to, co dana akcja robi.
Reorganizacja toolbar-a folderu (v3.2.80)
Toolbar nagłówka folderu (panel edycji folderu) miał wszystko w jednym rzędzie: Export, Import, Delete + Group, Bar, Window. Sześć przycisków obok siebie — wizualnie zlewały się ze sobą i trudno było szybko znaleźć, czego się szuka.
Nowy układ to dwa rzędy:
- Górny: Export / Import / Delete — operacje na folderze jako całości, nad polem URL patterns.
- Dolny: + Group / + Bar / + Window — tworzenie elementów potomnych, oddzielne od operacji na folderze.
Dwa logiczne grupy, jednoznacznie rozpoznawane przy szybkim spojrzeniu.
Pozostałe drobiazgi z tej serii
Razem z głównymi zmianami trafiły też mniejsze, ale przyjemne poprawki:
- Symetryczny padding kontenera
.rules-area14 px (v3.2.88) — wcześniej był 24 px po prawej, czyli asymetryczny relikt z wcześniejszej iteracji UI. - Scroll-preserve w edytorze przy sync z innego urządzenia (v3.2.82) — gdy inne urządzenie zmienia regułę, CodeMirror nie skoki na pozycję 0, zostaje tam, gdzie byłeś.
- Dropdown anchor button — drugie kliknięcie zamyka (v3.2.89) — naprawiony bug, gdzie dropdown otwierany przyciskiem dawał się zamknąć tylko klikiem poza, nie drugim klikiem przycisku.
Zobacz też
- Okna na froncie — opis wszystkich okien deweloperskich, których dotyczy szerszy scrollbar
- Skróty klawiaturowe JustZix — kompletna ściąga obsługi
- Panel edycji obok strony — alternatywny sposób na codzienne edytowanie reguł
Zainstaluj JustZix — i poczuj różnicę w detalach.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.