Highlights
Мы запустили песочницу две недели назад. Эта неделя была посвящена доработкам, нужно было сгладить три острых угла, прежде чем считать задачу выполненной. Теперь cookie корректно соответствуют RFC 6265, кнопка развертывания открывает response в настоящем полноэкранном оверлее вместо растягивания ячейки сетки, и все это наконец-то работает на мобильных телефонах.
What's New
Cookies follow RFC 6265 now
В хранилище cookie (cookie jar) две недели скрывался баг. Вышестоящие сайты отправляют Set-Cookie: ...; Domain=.example.com, чтобы применить cookie к поддоменам (ведущая точка означает, что этот cookie передается как с основным доменом, так и со всеми поддоменами). Наш парсер вырезал эту точку и терял информацию о том, что атрибут Domain вообще был задан. В результате хранилище не могло отличить host-only cookie (без атрибута Domain) от domain cookie. Это привело к двум заметным последствиям:
- В режиме просмотра raw выводилось
Domain=example.com(без точки), поэтому при копировании cookie в команду cURL принимающий сайт обрабатывал его как host-only и не отправлял обратно на поддомены. - Передача cookie в продукте Browser опиралась на хрупкую догадку при выборе типа cookie для установки в браузере, что приводило к сбоям, если в одном хранилище находились одновременно основной домен и поддомен.
Мы добавили логическое значение hostOnly для каждого распарсенного cookie. Наличие атрибута Domain (с точкой или без) означает hostOnly: false, и cookie соответствует хосту и его поддоменам. Отсутствие атрибута Domain означает hostOnly: true, и cookie привязывается строго к указанному хосту. В режиме просмотра raw для domain cookies выводится Domain=.example.com, а для host-only они опускаются вовсе, поэтому копирование из хранилища создает cookie, который сохраняет корректность при повторном использовании. В режиме структурированного просмотра у строк host-only отображается небольшой бейдж HO, которые, как оказалось, встречаются довольно редко, если начать за ними наблюдать. Существующие хранилища, сохраненные до исправления, сохраняют прежнее поведение широкого соответствия, поэтому ничего не сломается без предупреждения.
Expand mode is a true fullscreen overlay
Раньше кнопка развертывания растягивала карточку response внутри потока документа. Из-за этого длинный response увеличивал высоту страницы, у body появлялась полоса прокрутки, а панель request над response слегка смещалась при переключении. Кроме того, сами панели response были ограничены высотой от 480 до 560 пикселей, поэтому глубокое дерево JSON оставляло пустое место внизу карточки на мониторах с разрешением 1440p.
Теперь это оверлей с position: fixed, закрепленный между правым краем боковой панели и краем области просмотра (viewport) сверху донизу. Элемент body получает overflow: hidden, поэтому страница перестает прокручиваться под оверлеем. Внутри оверлея активная панель использует calc(100vh - 280px), а хранилище cookie получило такую же модель прокрутки. Клавиша ESC возвращает интерфейс к разделенному виду. Текст подсказки для кнопки теперь гласит «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 скрывается (сетка уже перестроена в одну колонку).
- При ширине менее 767px уменьшаются внутренние отступы (paddings), выпадающий список методов сжимается до 96px, а выбор API-ключа адаптируется через flex.
- При ширине менее 640px строка URL разделяется на две (метод и кнопка Send сверху, URL снизу), кнопки инструментов response увеличиваются до областей нажатия в 32px, вкладки прокручиваются по горизонтали, а таблица cookie превращается в карточку grid, где имя, значение, путь и срок действия расположены друг под другом.
- При ширине менее 374px (зона iPhone SE) дополнительный этап сжатия позволяет сохранить доступность всех элементов.
А всплывающие подсказки (tooltips) теперь открываются по нажатию на устройствах с сенсорным экраном (pointer-coarse) и закрываются при повторном нажатии на тот же триггер. На этой неделе мы протестировали это в поезде на одолженном iPhone SE, все элементы отлично помещаются без горизонтального люфта.
Именно так выглядит превращение инструмента из просто демо-версии в то, чем действительно хочется пользоваться. Эта неделя прошла тише, чем неделя запуска, но именно сейчас песочница перестала нас раздражать.