أبرز المستجدات
لقد أطلقنا playground قبل أسبوعين. وكان العمل هذا الأسبوع مخصصاً للمتابعة: ثلاثة جوانب غير مكتملة كانت بحاجة إلى تحسين قبل أن نعتبر العمل منتهياً. تتبع ملفات cookie الآن مواصفات RFC 6265 بشكل صحيح، ويقوم زر التوسيع بوضع response في تراكب حقيقي بملء الشاشة بدلاً من تمديد خلية الشبكة (grid cell)، ويعمل الأمر برمته أخيراً على الهاتف المحمول.
ما الجديد
ملفات cookie تتبع مواصفات RFC 6265 الآن
كان هناك خطأ برمجي صامت في cookie jar لمدة أسبوعين. ترسل المواقع البعيدة (upstream sites) الترويسة Set-Cookie: ...; Domain=.example.com لتفعيل مطابقة ملفات cookie مع النطاقات الفرعية (النقاط البادئة تعني "ينتقل ملف cookie هذا مع النطاق الأساسي وكل نطاق فرعي"). قام parser الخاص بنا بإزالة تلك النقطة وتجاهل حقيقة تعيين سمة Domain من الأساس. وكانت النتيجة jar لا يمكنه التمييز بين host-only cookie (بدون سمة Domain) و domain cookie. نتج عن ذلك أثران واضحان:
- أظهر العرض الخام (raw view) القيمة
Domain=example.com(بدون نقطة)، لذا عند نسخ cookie إلى أمر curl، سيعامله الموقع المستلم كـ host-only ولن يرسله مجدداً إلى النطاقات الفرعية. - اعتمد تسليم cookie في منتج Browser على تخمين هش لتحديد نوع cookie الذي يجب تثبيته في المتصفح، وقد فشل ذلك في كل مرة كان لديك فيها نطاق أساسي (apex) بالإضافة إلى نطاق فرعي في نفس jar.
أضفنا قيمة منطقية (boolean) باسم hostOnly في كل cookie تم تحليله. وجود سمة Domain، مع النقطة أو بدونها، يعني hostOnly: false ويطابق cookie المضيف بالإضافة إلى نطاقاته الفرعية. غياب سمة Domain يعني hostOnly: true ويبقى cookie مقيداً بالمضيف الفعلي تماماً. يصدر العرض الخام (raw view) القيمة Domain=.example.com لملفات domain cookies ويحذف Domain تماماً لملفات host-only، لذا فإن النسخ من jar ينتج cookie ينجح في عملية الذهاب والإياب (roundtripping). يعرض العرض المحلل (parsed view) شارة HO صغيرة على صفوف host-only، والتي تبين أنها حالة غير شائعة بمجرد البدء في مراقبتها. تحتفظ jars الحالية المحفوظة قبل الإصلاح بسلوك المطابقة الواسع القديم حتى لا يتم إسقاط أي شيء بصمت.
وضع التوسيع (Expand mode) هو تراكب حقيقي بملء الشاشة
يقوم زر التوسيع القديم بتمديد بطاقة response داخل تدفق المستند (document flow). وهذا يعني أن response الطويل يزيد من ارتفاع الصفحة، ويظهر شريط تمرير في body، وتنزاح لوحة request الموجودة فوق response قليلاً عند التبديل. كما أن لوحات response نفسها كانت تقتصر على 480 إلى 560 بكسل، لذا فإن شجرة JSON العميقة تترك مساحة بطاقة فارغة تحتها على شاشة بدقة 1440p.
الآن أصبح تراكباً بوضعية position: fixed ثابتاً بين الحافة اليمنى للشريط الجانبي وحافة إطار العرض (viewport)، من الأعلى إلى الأسفل. يحصل body على overflow: hidden حتى تتوقف الصفحة عن التمرير خلف التراكب. داخل التراكب، تستخدم اللوحة النشطة الصيغة calc(100vh - 280px) وحصلت cookie jar على نفس نموذج التمرير. يؤدي الضغط على زر ESC إلى العودة إلى العرض المنقسم (split view). يقرأ عنوان الزر الآن "Expand to full screen" أو "Collapse to split view" حتى لا يظل الأمر مجرد تخمين. كان الرمز عبارة عن شكل الأسهم الأربعة طوال الوقت، وهو ما كان ينبغي علينا توضيحه منذ البداية.
يعمل الـ playground على الهواتف المحمولة
كان هناك خطآن في نسخة الهاتف المحمول بحاجة إلى إصلاح قبل أن تصبح طبقات التصميم المتجاوب (responsive layers) ذات قيمة. كان ملصق زر Send يلتصق بالحافة اليسرى للزر بدلاً من التوسط، وبمجرد عرض response، تظهر في الصفحة شريط تمرير أفقي لأن عنصراً فرعياً عريضاً (مثل URL طويل، أو شجرة JSON، أو كتلة HTML pre خام) كان يجبر عمود الشبكة (grid column) على التوسع خارج إطار العرض (viewport). تم إصلاح المشكلتين: يتوسط زر Send بشكل صحيح، ويستخدم عمود الشبكة الصيغة minmax(0, 1fr) بحيث يتم تمرير العناصر الفرعية العريضة داخل بطاقتها الخاصة بدلاً من دفع الصفحة جانباً.
علاوة على ذلك، إليك طبقات التصميم المتجاوب التي لم ننتهِ منها تماماً:
- تحت دقة 1023px، يختفي زر التوسيع (حيث تكون الشبكة بالفعل في عمود واحد).
- تحت دقة 767px، تتقلص الهوامش الداخلية (paddings)، وتصغر القائمة المنسدلة للميثود (method) إلى 96px، ويتجاوب منتقي مفتاح API (أو API-key picker).
- تحت دقة 640px، يعاد ترتيب صف URL إلى صفين (الميثود وزر Send في الأعلى، وURL في الأسفل)، وتكبر أزرار أدوات response لتصبح أهداف لمس بحجم 32px، وتُمرر علامات التبويب (tabs) أفقياً، وتتحول جدول cookie إلى بطاقة شبكية تحتوي على الاسم، والقيمة، والمسار، وتاريخ انتهاء الصلاحية بشكل متراكم.
- تحت دقة 374px (منطقة هاتف iPhone SE)، تضمن مرحلة تقليص إضافية بقاء كل شيء في متناول اليد.
وتفتح الآن تلميحات المساعدة (hint tooltips) عند النقر على الأجهزة ذات المؤشر الخشن (pointer-coarse) وتختفي عند النقر مرة ثانية على نفس المشغل. لقد اختبرنا ذلك على هاتف iPhone SE مستعار في القطار هذا الأسبوع وكل شيء يناسب الشاشة دون أي اهتزاز أفقي.
هذا هو الشكل الذي تبدو عليه عملية نقل أداة من مجرد "نسخة تجريبية" إلى "شيء تستخدمه بالفعل". إنه أسبوع أهدأ من أسبوع الإطلاق، ولكنه الأسبوع الذي توقف فيه playground عن إحباطنا.