Highlights
Wir haben das Playground vor zwei Wochen veröffentlicht. Diese Woche stand im Zeichen der Nachbereitung: drei Ecken und Kanten, die wir abschleifen mussten, bevor wir es als fertig bezeichnen konnten. Cookies folgen jetzt korrekt RFC 6265, der Expand-Button öffnet die Response in einem echten Fullscreen-Overlay, anstatt eine Grid-Zelle zu strecken, und das Ganze funktioniert endlich auf dem Smartphone.
Was neu ist
Cookies folgen jetzt RFC 6265
Der Cookie-Jar hatte zwei Wochen lang einen unauffälligen Bug. Upstream-Seiten senden Set-Cookie: ...; Domain=.example.com, um Cookies für das Subdomain-Matching zu aktivieren (der führende Punkt bedeutet „dieser Cookie wird an die Apex-Domain und jede Subdomain gesendet“). Unser Parser hat diesen Punkt entfernt und dabei die Information verloren, dass das Domain-Attribut überhaupt gesetzt war. Das Ergebnis war ein Jar, der nicht zwischen einem Host-only-Cookie (ohne Domain-Attribut) und einem Domain-Cookie unterscheiden konnte. Zwei sichtbare Auswirkungen:
- Die Raw-Ansicht gab
Domain=example.com(ohne Punkt) aus. Wenn du also einen Cookie in einen curl-Befehl kopiert hast, behandelte die Zielseite ihn als Host-only und sendete ihn nicht an Subdomains zurück. - Die Cookie-Übergabe des Browser-Produkts verließ sich auf eine fragile Schätzung, um zu entscheiden, welche Art von Cookie im Browser installiert werden soll, was fehlschlug, sobald du eine Apex-Domain und eine Subdomain im selben Jar hattest.
Wir haben bei jedem geparsten Cookie einen hostOnly-Boolean hinzugefügt. Wenn das Domain-Attribut vorhanden ist (mit oder ohne Punkt), bedeutet das hostOnly: false und der Cookie matcht auf den Host plus seine Subdomains. Fehlt das Domain-Attribut, bedeutet das hostOnly: true und der Cookie bleibt fest an den exakten Host gebunden. Die Raw-Ansicht gibt Domain=.example.com für Domain-Cookies aus und lässt Domain für Host-only-Cookies komplett weg. Das Kopieren aus dem Jar erzeugt also einen Cookie, der das Roundtripping übersteht. Die geparste Ansicht zeigt ein kleines HO-Badge in Host-only-Zeilen, was sich als seltener Fall herausstellt, sobald man darauf achtet. Bestehende Jars, die vor dem Fix gespeichert wurden, behalten das alte Wide-Match-Verhalten bei, sodass nichts unbemerkt verloren geht.
Der Expand-Modus ist ein echtes Fullscreen-Overlay
Der alte Expand-Button streckte die Response-Card innerhalb des Dokumentenflusses. Das bedeutete, dass eine lange Response die Seitenhöhe vergrößerte, der Body einen Scrollbalken bekam und sich das Request-Panel über der Response beim Umschalten leicht verschob. Zudem waren die Response-Panes selbst auf 480 bis 560 Pixel begrenzt, sodass ein tiefer JSON-Tree auf einem 1440p-Monitor leeren Platz unter der Card hinterließ.
Jetzt ist es ein position: fixed-Overlay, das von oben bis unten zwischen der rechten Kante der Sidebar und der Kante des Viewports verankert ist. Der Body erhält overflow: hidden, damit die Seite hinter dem Overlay nicht mehr scrollt. Innerhalb des Overlays nutzt das aktive Pane calc(100vh - 280px) und der Cookie-Jar hat dasselbe Scroll-Modell erhalten. ESC klappt die Ansicht wieder in die Split-View zusammen. Der Button-Titel lautet nun „Expand to full screen“ oder „Collapse to split view“, sodass man nicht mehr raten muss. Das Icon war die ganze Zeit das Vier-Pfeile-Glyph, was wir von Anfang an hätten klarer machen sollen.
Das Playground funktioniert auf Smartphones
Zwei Mobile-Bugs mussten behoben werden, bevor sich die responsiven Layer überhaupt lohnten. Das Label des Send-Buttons klebte am linken Rand des Buttons, anstatt sich zu zentrieren. Sobald eine Response gerendert wurde, bekam die Seite zudem einen horizontalen Scrollbalken, weil ein breites Child-Element (eine lange URL, ein JSON-Tree, ein roher HTML-pre-Block) die Grid-Spalte zwang, über den Viewport hinauszuwachsen. Beides behoben: Send zentriert sich jetzt richtig und die Grid-Spalte nutzt minmax(0, 1fr), sodass breite Child-Elemente innerhalb ihrer eigenen Card scrollen, anstatt die Seite zur Seite zu schieben.
Darüber hinaus die responsiven Layer, die wir nie ganz fertiggestellt hatten:
- Unter 1023px wird der Expand-Button ausgeblendet (das Grid ist bereits einspaltig).
- Unter 767px verringern sich die Paddings, das Method-Dropdown schrumpft auf 96px, der API-Key-Picker wird flexibel.
- Unter 640px bricht die URL-Zeile in zwei Zeilen um (Methode und Send oben, URL darunter), die Response-Tool-Buttons vergrößern sich auf 32px große Touch-Targets, Tabs scrollen horizontal und die Cookie-Tabelle wird zu einer Grid-Card mit untereinander angeordnetem Namen, Wert, Pfad und Ablaufdatum.
- Unter 374px (iPhone-SE-Bereich) sorgt ein zusätzlicher Verkleinerungsschritt dafür, dass alles erreichbar bleibt.
Und Hinweis-Tooltips öffnen sich jetzt bei Fingertipp auf Pointer-Coarse-Geräten und schließen sich bei einem zweiten Tippen auf denselben Trigger. Wir haben es diese Woche in der Bahn auf einem geliehenen iPhone SE getestet und alles passt ohne horizontales Wackeln.
So sieht es aus, wenn man ein Tool von einer „Demo“ zu etwas macht, das du tatsächlich benutzen willst. Ruhiger als die Launch-Woche, aber die Woche, in der uns das Playground nicht mehr frustriert hat.