亮点
我们在两周前发布了 playground. 本周进行了后续工作: 在宣布完工前需要打磨的三个粗糙边缘. cookie 现已正确遵循 RFC 6265, 展开按钮将响应放入真正的全屏浮层, 而不是拉伸网格单元, 而且整个应用终于可以在手机上运行了.
最新动态
Cookie 现已遵循 RFC 6265
cookie jar 存在一个潜伏了两周的 bug. 上游站点发送 Set-Cookie: ...; Domain=.example.com 以使 cookie 支持子域名匹配 (前导点表示"此 cookie 随顶级域名和所有子域名发送"). 我们的解析器剥离了该点, 并丢失了 Domain 属性已被设置的事实. 结果导致 jar 无法区分 host-only cookie (无 Domain 属性) 和 domain cookie. 两个可见的影响:
- raw 视图输出了
Domain=example.com(无点), 因此当您将 cookie 复制到 curl 命令中时, 接收站点会将其视为 host-only, 且不会将其发回子域名. - Browser 产品的 cookie 移交依赖于脆弱的猜测来决定在浏览器中安装哪种 cookie, 只要您在同一个 jar 中有顶级域名和子域名, 它就会出错.
我们在每个解析的 cookie 上添加了一个 hostOnly 布尔值. 存在 Domain 属性 (无论是否有点) 意味着 hostOnly: false, 该 cookie 匹配主机及其子域名. 缺少 Domain 属性意味着 hostOnly: true, 该 cookie 固定在精确主机上. raw 视图为 domain cookie 输出 Domain=.example.com, 并且为 host-only cookie 完全省略 Domain, 因此从 jar 中复制出来的 cookie 可以在往返中幸存. 解析视图在 host-only 行上显示一个小的 HO 徽章, 一旦您开始观察它们, 就会发现这是不常见的情况. 在修复前保存的现有 jar 保留了旧的宽匹配行为, 因此没有任何东西被静默丢弃.
展开模式是真正的全屏浮层
旧的展开按钮在文档流内拉伸了响应卡片. 这意味着过高的响应会增加页面高度, body 会出现滚动条, 并且在切换时响应上方的请求面板会略微偏移. 此外, 响应窗格本身的上限为 480 到 560 像素, 因此在 1440p 显示器上, 较深的 JSON 树会在其下方留下空白卡片高度.
现在它是一个 position: fixed 浮层, 从上到下锚定在侧边栏右边缘和视口边缘之间. body 获取 overflow: hidden, 因此页面停止在浮层后面滚动. 在浮层内, 活动窗格使用 calc(100vh - 280px), 并且 cookie jar 也获得了相同的滚动模型. ESC 退回拆分视图. 按钮标题现在显示为 "Expand to full screen" 或 "Collapse to split view", 因此不再需要猜测. 该图标一直都是四箭头字形, 我们早该从一开始就说明这一点.
playground 可以在手机上运行
在值得做响应式层之前需要修复两个移动端 bug. Send 按钮的标签贴在按钮的左边缘而不是居中, 并且一旦呈现响应, 页面就会出现水平滚动条, 因为过宽的子元素 (长 URL, JSON 树, 原始 HTML pre 块) 会迫使网格列增长超过视口. 两者都已修复: Send 正确居中, 网格列使用 minmax(0, 1fr), 这样过宽的子元素会在自己的卡片内滚动, 而不会向侧面推动页面.
除此之外, 我们从未完全完成响应式层:
- 在 1023px 以下, 展开按钮隐藏 (网格已经是单列).
- 在 767px 以下, 内边距收紧, method 下拉菜单缩小到 96px, API 密钥选择器变为弹性布局.
- 在 640px 以下, URL 行重新排列为两行 (method 和 Send 在上, URL 在下), 响应工具按钮增长到 32px 触摸目标, 选项卡水平滚动, cookie 表变为堆叠名称, 值, 路径和过期时间的网格卡片.
- 在 374px 以下 (iPhone SE 尺寸), 额外的缩小过程确保所有内容都触手可及.
并且在指针粗糙的设备上, 提示 tooltip 现在点击即可打开, 并在第二次点击同一触发器时关闭. 本周我们在火车上用借来的 iPhone SE 对其进行了测试, 一切都很合适, 没有水平抖动.
这就是将工具从"演示版"变成"您实际使用的东西"的样子. 虽然比发布周安静, 但就在这一周, playground 不再让我们感到沮丧.