Destaques
Lançamos o playground duas semanas atrás. Esta semana foi de trabalho de acompanhamento: três arestas que precisavam ser aparadas antes de considerarmos o trabalho concluído. Os cookies agora seguem a RFC 6265 corretamente, o botão de expansão coloca a response em um overlay em tela cheia real em vez de esticar uma célula do grid, e tudo finalmente funciona em um celular.
Novidades
Cookies agora seguem a RFC 6265
O cookie jar teve um bug silencioso por duas semanas. Sites upstream enviam Set-Cookie: ...; Domain=.example.com para ativar a correspondência de subdomínios nos cookies (o ponto inicial diz "este cookie acompanha o apex e todos os subdomínios"). Nosso parser removeu esse ponto e perdeu o fato de que o atributo Domain estava definido. O resultado foi um jar que não conseguia diferenciar um cookie host-only (sem atributo Domain) de um cookie de domínio. Dois efeitos visíveis:
- A visualização bruta emitia
Domain=example.com(sem ponto), portanto, quando você copiava um cookie para um comando curl, o site de destino o tratava como host-only e não o enviava de volta para os subdomínios. - O envio de cookies do produto Browser dependia de uma suposição frágil para decidir que tipo de cookie instalar no navegador, e falhava sempre que você tinha um apex e um subdomínio no mesmo jar.
Adicionamos um booleano hostOnly em cada cookie analisado. O atributo Domain presente, com ou sem o ponto, significa hostOnly: false e o cookie corresponde ao host e seus subdomínios. O atributo Domain ausente significa hostOnly: true e o cookie permanece fixado ao host exato. A visualização bruta emite Domain=.example.com para cookies de domínio e omite completamente o Domain para os do tipo host-only, de modo que copiar do jar produz um cookie que sobrevive ao roundtrip. A visualização analisada mostra uma pequena tag HO nas linhas host-only, que acabam sendo o caso incomum quando você começa a observá-las. Os jars existentes salvos antes da correção mantêm o comportamento antigo de correspondência ampla para que nada seja descartado silenciosamente.
O modo expandido é um overlay em tela cheia real
O antigo botão de expansão esticava o card de response dentro do fluxo do documento. Isso significava que uma response alta aumentava a altura da página, o body ganhava uma barra de rolagem e o painel de request acima da response se deslocava ligeiramente quando você alternava. E os próprios painéis de response eram limitados a 480 ou 560 pixels, de modo que uma árvore JSON profunda deixava um espaço vazio no card abaixo dela em um monitor 1440p.
Agora é um overlay position: fixed ancorado entre a borda direita da barra lateral e a borda da viewport, de cima a baixo. O body recebe overflow: hidden para que a página pare de rolar atrás do overlay. Dentro do overlay, o painel ativo usa calc(100vh - 280px) e o cookie jar recebeu o mesmo modelo de rolagem. ESC recolhe de volta para a visualização dividida. O título do botão agora diz "Expandir para tela cheia" ou "Recolher para visualização dividida" para que deixe de ser uma adivinhação. O ícone sempre foi o glifo de quatro setas, o que deveríamos ter deixado claro desde o início.
O playground funciona em celulares
Dois bugs de mobile precisavam de correção antes que as camadas responsivas valessem a pena. O rótulo do botão Send estava colado na borda esquerda do botão em vez de centralizar e, assim que uma response era renderizada, a página ganhava uma barra de rolagem horizontal porque um elemento filho largo (uma URL longa, uma árvore JSON, um bloco pre de HTML bruto) estava forçando a coluna do grid a crescer além da viewport. Ambos foram corrigidos: o Send centraliza corretamente e a coluna do grid usa minmax(0, 1fr) para que os elementos filhos largos rolem dentro de seu próprio card em vez de empurrar a página para o lado.
Além disso, as camadas responsivas que nunca havíamos finalizado totalmente:
- Abaixo de 1023px, o botão Expand se oculta (o grid já é uma coluna única).
- Abaixo de 767px, os paddings encolhem, o dropdown de método diminui para 96px e o seletor de API-key se ajusta.
- Abaixo de 640px, a linha da URL é reorganizada em duas linhas (método e Send no topo, URL embaixo), os botões de ferramentas de response crescem para alvos de toque de 32px, as abas rolam horizontalmente e a tabela de cookies se torna um card de grid com nome, valor, caminho e expiração empilhados.
- Abaixo de 374px (território do iPhone SE), uma etapa extra de redução mantém tudo acessível.
E as tooltips de dica agora abrem com um toque em dispositivos pointer-coarse e fecham com um segundo toque no mesmo gatilho. Testamos em um iPhone SE emprestado no trem esta semana e tudo cabe sem oscilações horizontais.
É assim que se parece levar uma ferramenta de "demonstração" para "algo que você realmente usaria". Mais silenciosa do que a semana de lançamento, mas a semana em que o playground deixou de nos frustrar.