Highlights
Lanzamos el playground hace dos semanas. Esta semana fue de trabajo de seguimiento: tres asperezas que necesitábamos pulir antes de poder darlo por terminado. Las cookies ahora siguen el RFC 6265 correctamente, el botón de expandir coloca la response en una superposición de pantalla completa real en lugar de estirar una celda de la cuadrícula, y todo finalmente funciona en un teléfono.
What's New
Cookies follow RFC 6265 now
El cookie jar tuvo un error silencioso durante dos semanas. Los sitios upstream envían Set-Cookie: ...; Domain=.example.com para habilitar la coincidencia de subdominios en las cookies (el punto inicial indica "esta cookie viaja con el apex y cada subdominio"). Nuestro parser eliminó ese punto y perdió el hecho de que el atributo Domain estaba configurado. El resultado fue un jar que no podía distinguir entre una cookie de tipo host-only (sin atributo Domain) y una cookie de dominio. Dos efectos visibles:
- La vista raw emitía
Domain=example.com(sin punto), por lo que al copiar una cookie en un comando cURL, el sitio receptor la trataba como host-only y no la enviaba de vuelta a los subdominios. - La transferencia de cookies del producto Browser dependía de una suposición frágil para decidir qué tipo de cookie instalar en el navegador, y fallaba cada vez que tenías un apex y un subdominio en el mismo jar.
Añadimos un booleano hostOnly en cada cookie analizada. La presencia del atributo Domain, con o sin el punto, significa hostOnly: false y la cookie coincide con el host más sus subdominios. La ausencia del atributo Domain significa hostOnly: true y la cookie permanece vinculada al host exacto. La vista raw emite Domain=.example.com para las cookies de dominio y omite Domain por completo para las de tipo host-only, por lo que copiar desde el jar produce una cookie que sobrevive al roundtrip. La vista analizada muestra una pequeña etiqueta HO en las filas host-only, que resultan ser el caso poco común una vez que comienzas a observarlas. Los jars existentes guardados antes de la corrección mantienen el comportamiento anterior de coincidencia amplia para que nada se pierda silenciosamente.
Expand mode is a true fullscreen overlay
El antiguo botón de expandir estiraba la tarjeta de la response dentro del flujo del documento. Eso significaba que una response alta aumentaba la altura de la página, el body adquiría una barra de desplazamiento y el panel de la request arriba de la response se desplazaba ligeramente al alternar. Además, los propios paneles de la response se limitaban a un máximo de 480 a 560 píxeles, por lo que un árbol JSON profundo dejaba un espacio vacío debajo de la tarjeta en un monitor de 1440p.
Ahora es una superposición position: fixed anclada entre el borde derecho de la barra lateral y el borde del viewport, de arriba a abajo. El body recibe overflow: hidden para que la página deje de desplazarse detrás de la superposición. Dentro de la superposición, el panel activo usa calc(100vh - 280px) y el cookie jar obtuvo el mismo modelo de desplazamiento. ESC vuelve a colapsar a la vista dividida. El título del botón ahora dice "Expand to full screen" o "Collapse to split view" para que deje de ser una adivinanza. El icono fue el glifo de cuatro flechas todo el tiempo, algo que deberíamos haber aclarado desde el principio.
The playground works on phones
Había que corregir dos errores móviles antes de que valiera la pena implementar las capas adaptables. La etiqueta del botón Send se quedaba pegada al borde izquierdo del botón en lugar de centrarse, y una vez que se renderizaba una response, la página adquiría una barra de desplazamiento horizontal porque un elemento hijo ancho (una URL larga, un árbol JSON, un bloque pre de HTML raw) obligaba a la columna de la cuadrícula a crecer más allá del viewport. Ambos corregidos: Send se centra correctamente y la columna de la cuadrícula usa minmax(0, 1fr) para que los elementos hijos anchos se desplacen dentro de su propia tarjeta en lugar de empujar la página hacia los lados.
Además de eso, las capas adaptables que nunca terminamos de completar:
- Por debajo de 1023px, el botón Expand se oculta (la cuadrícula ya es de una sola columna).
- Por debajo de 767px, los paddings se reducen, el menú desplegable de métodos se reduce a 96px y el selector de API-key se flexibiliza.
- Por debajo de 640px, la fila de la URL se reorganiza en dos filas (el método y Send arriba, la URL abajo), los botones de herramientas de la response crecen a objetivos táctiles de 32px, las pestañas se desplazan horizontalmente y la tabla de cookies se convierte en una tarjeta de cuadrícula con el nombre, valor, ruta y expiración apilados.
- Por debajo de 374px (el territorio del iPhone SE), una fase de reducción adicional mantiene todo accesible.
Y los tooltips de sugerencias ahora se abren al tocar en dispositivos pointer-coarse y se descartan con un segundo toque en el mismo activador. Lo probamos en un iPhone SE prestado en el tren esta semana y todo cabe sin bamboleo horizontal.
Así es como se ve llevar una herramienta de "demo" a "algo que realmente usarías". Más tranquilo que la semana de lanzamiento, pero fue la semana en que el playground dejó de frustrarnos.