Najważniejsze informacje
Dwa tygodnie temu wypuściliśmy playground. Ten tydzień przyniósł dalsze prace: wygładziliśmy trzy szorstkie krawędzie, zanim mogliśmy uznać temat za zamknięty. Cookie są teraz w pełni zgodne z RFC 6265, przycisk rozwijania przenosi response do prawdziwego fullscreen overlay zamiast rozciągać komórkę grida, a całość w końcu działa na telefonie.
Co nowego
Cookie są teraz zgodne z RFC 6265
Przez dwa tygodnie w cookie jar ukrywał się cichy błąd. Serwery upstream wysyłają Set-Cookie: ...; Domain=.example.com, aby włączyć dopasowywanie cookie do poddomen (kropka na początku oznacza: „to cookie wędruje z domeną główną i każdą poddomeną”). Nasz parser usuwał tę kropkę i gubił informację o tym, że atrybut Domain w ogóle został ustawiony. W rezultacie nasz jar nie potrafił odróżnić cookie typu host-only (brak atrybutu Domain) od domain cookie. Dwa widoczne skutki:
- Widok raw zwracał
Domain=example.com(bez kropki), więc po skopiowaniu cookie do polecenia curl, witryna docelowa traktowała je jako host-only i nie odsyłała do poddomen. - Przekazywanie cookie w produkcie Browser opierało się na mało stabilnym zgadywaniu, jaki rodzaj cookie zainstalować w przeglądarce, co zawodziło za każdym razem, gdy w tym samym jarze znajdowała się domena główna i poddomena.
Dodaliśmy wartość boolean hostOnly do każdego sparsowanego cookie. Obecność atrybutu Domain, z kropką lub bez, oznacza hostOnly: false i cookie pasuje do hosta i jego poddomen. Brak atrybutu Domain oznacza hostOnly: true i cookie pozostaje przypisane do konkretnego hosta. Widok raw zwraca Domain=.example.com dla domain cookies i całkowicie pomija Domain dla tych typu host-only, dzięki czemu skopiowanie ich z jara pozwala na bezproblemowy roundtrip. Widok parsed pokazuje małą etykietę HO przy wierszach host-only, co okazuje się rzadkim przypadkiem, gdy zacznie się je monitorować. Istniejące jary zapisane przed poprawką zachowują stare, szerokie dopasowanie, więc nic po cichu nie znika.
Tryb rozszerzony to prawdziwy fullscreen overlay
Stary przycisk rozwijania rozciągał kartę response wewnątrz struktury dokumentu. Oznaczało to, że wysoki response zwiększał wysokość strony, w sekcji body pojawiał się pasek przewijania, a panel request nad response przesuwał się nieznacznie przy przełączaniu. Same panele response były ograniczone do 480-560 pikseli, więc głębokie drzewo JSON pozostawiało pustą przestrzeń pod kartą na monitorze 1440p.
Teraz to overlay z position: fixed zakotwiczony między prawą krawędzią paska bocznego a krawędzią viewportu, od góry do dołu. Sekcja body otrzymuje overflow: hidden, więc strona przestaje przewijać się pod spodem. Wewnątrz overlay aktywny panel używa calc(100vh - 280px), a cookie jar otrzymał ten sam model przewijania. Klawisz ESC przywraca widok dzielony (split view). Tytuł przycisku brzmi teraz „Expand to full screen” lub „Collapse to split view”, więc nie trzeba już zgadywać. Ikona od początku była symbolem czterech strzałek, co powinniśmy byli jasno opisać od samego początku.
Playground działa na telefonach
Przed wdrożeniem warstw responsywnych musieliśmy naprawić dwa błędy mobilne. Etykieta przycisku Send trzymała się lewej krawędzi zamiast środka, a po wyrenderowaniu response na stronie pojawiał się poziomy pasek przewijania, ponieważ szeroki element potomny (długi URL, drzewo JSON, surowy blok HTML pre) zmuszał kolumnę grida do rozciągania się poza viewport. Oba problemy zostały rozwiązane: Send centruje się poprawnie, a kolumna grida używa minmax(0, 1fr), dzięki czemu szerokie elementy przewijają się wewnątrz własnej karty, zamiast rozpychać stronę na boki.
Do tego doszły warstwy responsywne, których wcześniej nie dokończyliśmy:
- Poniżej 1023px przycisk Expand ukrywa się (grid ma już tylko jedną kolumnę).
- Poniżej 767px marginesy wewnętrzne (paddings) ulegają zmniejszeniu, menu wyboru metody kurczy się do 96px, a selektor klucza API staje się elastyczny.
- Poniżej 640px wiersz URL dzieli się na dwa (metoda i Send na górze, URL pod spodem), przyciski narzędziowe response powiększają się do obszarów dotykowych 32px, zakładki przewijają się poziomo, a tabela cookie staje się kartą grida z ułożonymi pionowo polami name, value, path i expiry.
- Poniżej 374px (obszar iPhone SE) dodatkowe zmniejszenie elementów pozwala zachować pełną dostępność.
Z kolei tooltipy z podpowiedziami otwierają się teraz po dotknięciu na urządzeniach typu pointer-coarse i zamykają po ponownym dotknięciu tego samego elementu wyzwalającego. Przetestowaliśmy to w tym tygodniu w pociągu na pożyczonym iPhone SE i wszystko mieści się bez żadnego poziomego przesuwania.
Tak właśnie wygląda przejście od narzędzia w wersji „demo” do „czegoś, czego naprawdę chce się używać”. Spokojniejszy czas niż tydzień premiery, ale to właśnie w tym tygodniu playground przestał nas irytować.