Highlights
Пуснахме playground преди две седмици. Тази седмица беше посветена на последваща работа: три груби ръба, които трябваше да бъдат изгладени, преди да можем да кажем, че сме готови. Cookies сега следват RFC 6265 правилно, бутонът за разширяване поставя response в истински fullscreen overlay, вместо да разтяга клетка от мрежата, и цялото нещо най-накрая работи на телефон.
What's New
Cookies follow RFC 6265 now
В cookie jar имаше скрит бъг в продължение на две седмици. Upstream сайтовете изпращат Set-Cookie: ...; Domain=.example.com, за да включат cookies в съвпадение на поддомейни (водещата точка означава "това cookie пътува с основния домейн и всеки поддомейн"). Нашият parser премахваше тази точка и губеше факта, че атрибутът Domain изобщо е бил зададен. Резултатът беше jar, който не можеше да направи разлика между host-only cookie (без атрибут Domain) и domain cookie. Два видими ефекта:
- Изгледът raw view излъчваше
Domain=example.com(без точка), така че когато копирате cookie в cURL команда, получаващият сайт го третираше като host-only и не го изпращаше обратно към поддомейните. - Предаването на cookie в продукта Browser разчиташе на крехко предположение, за да реши какъв тип cookie да инсталира в браузъра, и се проваляше всеки път, когато имахте основен домейн плюс поддомейн в същия jar.
Добавихме булева стойност hostOnly за всяко анализирано cookie. Наличието на атрибут Domain, със или без точката, означава hostOnly: false и това cookie съвпада с хоста плюс неговите поддомейни. Липсата на атрибут Domain означава hostOnly: true и това cookie остава фиксирано към точния хост. Изгледът raw view излъчва Domain=.example.com за domain cookies и напълно пропуска Domain за тези, които са host-only, така че копирането от jar създава cookie, което оцелява при двупосочно преобразуване. Анализираният изглед показва малка значка HO на редовете за host-only, които се оказват по-редкият случай, след като започнете да ги наблюдавате. Съществуващите jars, запазени преди корекцията, запазват старото поведение за широко съвпадение, така че нищо не отпада тихо.
Expand mode is a true fullscreen overlay
Старият бутон за разширяване разтягаше картата с response в рамките на потока на документа. Това означаваше, че висок response добавяше височина към страницата, в body се появяваше лента за превъртане, а панелът за request над response се изместваше леко при превключване. Освен това самите панели за response бяха ограничени до 480 или 560 пиксела, така че дълбоко JSON дърво оставяше празна височина на картата под него на 1440p монитор.
Сега това е position: fixed overlay, закотвен между десния ръб на страничната лента и ръба на viewport, от горе до долу. Body получава overflow: hidden, така че страницата спира да се превърта зад overlay. Вътре в overlay активният панел използва calc(100vh - 280px), а cookie jar получи същия модел на превъртане. ESC свива обратно към split view. Заглавието на бутона сега гласи "Expand to full screen" или "Collapse to split view", така че вече не е необходимо да се гадае. Иконата през цялото време беше глифът с четири стрелки, което трябваше да изясним още от самото начало.
The playground works on phones
Два мобилни бъга трябваше да бъдат отстранени, преди да има смисъл да се правят адаптивните слоеве. Етикетът на бутона Send се залепваше за левия ръб на бутона, вместо да се центрира, и след като се рендерираше response, страницата получаваше хоризонтална лента за превъртане, тъй като широк дъщерен елемент (дълъг URL, JSON дърво, суров HTML pre блок) принуждаваше grid колоната да се разшири извън viewport. И двата са коригирани: Send се центрира правилно, а grid колоната използва minmax(0, 1fr), така че широките дъщерни елементи се превъртат в собствената си карта, вместо да избутват страницата настрани.
Освен това, адаптивните слоеве, които така и не завършихме напълно:
- Под 1023px бутонът Expand се скрива (grid вече е в една колона).
- Под 767px paddings се свиват, падащото меню за метода се свива до 96px, а селекторът за API-key се адаптира гъвкаво.
- Под 640px редът за URL се пренарежда в два реда (метод и Send отгоре, URL отдолу), бутоните с инструменти за response нарастват до 32px сензорни цели, разделите се превъртат хоризонтално, а таблицата с cookies се превръща в grid карта с подредени едно под друго име, стойност, път и срок на валидност.
- Под 374px (територията на iPhone SE) допълнителна стъпка на свиване поддържа всичко достъпно.
А подсказките (hint tooltips) вече се отварят при докосване на устройства с груб показалец (pointer-coarse) и се затварят при второ докосване на същия trigger. Тествахме го на зает iPhone SE във влака тази седмица и всичко пасва без хоризонтално клатене.
Ето как изглежда превръщането на един инструмент от "демо" в "нещо, което действително бихте използвали". По-тихо от седмицата на стартирането, но това е седмицата, в която playground спря да ни изнервя.