تضيف أدوات مطوري البرامج في Chrome الدعم لعناصر الطبقة العلوية، ما يسهّل على المطوّرين تصحيح أخطاء الرموز البرمجية الخاصة بهم بالاستعانة بعناصر الطبقة العليا.
توضّح هذه المقالة عناصر الطبقة العلوية، وكيف تساعد "أدوات مطوري البرامج" في عرض محتوى الطبقة العلوية لفهم وتصحيح الأخطاء في بنية DOM التي تتضمّن عناصر الطبقة العليا، وكيفية تطبيق دعم الطبقة العليا في "أدوات مطوري البرامج".
ما هي عناصر الطبقة العلوية والطبقة العليا؟
ما الذي يحدث داخليًا عند فتح <dialog> في شكل نموذج؟ 🤔
يتم وضعه في طبقة علوية. يتم عرض محتوى الطبقة العلوية فوق كل المحتوى الآخر. على سبيل المثال، يجب أن يظهر مربع حوار نمطي فوق كل محتوى DOM الآخر، ولذلك يعرض المتصفح هذا العنصر تلقائيًا في "طبقة علوية" بدلاً من إجبار المؤلفين على مواجهة مؤشر z يدويًا. يظهر عنصر الطبقة العلوية فوق عنصر ما حتى مع أعلى مؤشر z.
يمكن وصف الطبقة العليا بأنها "أعلى طبقة تكديس". يشتمل كل مستند على إطار عرض مرتبط واحد، وبالتالي طبقة علوية واحدة أيضًا. يمكن أن تكون هناك عناصر متعددة داخل الطبقة العليا في نفس الوقت. عندما يحدث ذلك، يوضعون فوق بعضها البعض، والأخير فوق بعضها. بعبارة أخرى، يتمّ وضع كل عناصر الطبقة العلوية في مكدس آخر في الجزء العلوي (LIFO) في الطبقة العلوية.
إنّ العنصر <dialog> ليس العنصر الوحيد الذي يعرضه المتصفّح في الطبقة العليا. عناصر الطبقة العليا حاليًا هي:
النوافذ المنبثقة ومربعات الحوار المشروطة والعناصر في وضع ملء الشاشة.
افحص تنفيذ مربّع الحوار التالي:
<main>
<button onclick="window.dialog.showModal();">Open Dialog</button>
</main>
<dialog id="dialog"></dialog>
في ما يلي عرض توضيحي يحتوي على مربعي حوار تم تطبيق أنماط عليهما على خلفياتهما (الخلفيات الخلفية موضّحة أدناه):
ما المقصود بالخلفية؟
لحسن الحظ، هناك طريقة لتخصيص المحتوى أسفل عنصر الطبقة العلوية.
يحتوي كل عنصر في الطبقة العلوية على عنصر CSS زائف يُسمى backdrop.
الخلفية الخلفية هي مربع بحجم إطار العرض الذي يتم عرضه مباشرة أسفل أي عنصر من عناصر الطبقة العلوية. يتيح العنصر الزائف ::backdrop إخفاء كل العناصر الواقعة أسفل العنصر أو نمطها أو إخفاؤها تمامًا عندما يكون العنصر الأعلى في الطبقة العليا.
عندما تنشئ عناصر متعددة بشكل مشروط، يرسم المتصفح الخلفية مباشرةً أسفل الجزء الأمامي من هذا العنصر وفوق العناصر الأخرى بملء الشاشة.
إليك كيفية تصميم الصور الخلفية:
/* The browser displays the backdrop only when the dialog.showModal() function opens the dialog.*/
dialog::backdrop {
background: rgba(255,0,0,.25);
}
كيف يمكن عرض أول صورة خلفية فقط؟
يحتوي كل عنصر من عناصر الطبقة العلوية على صورة خلفية تنتمي إلى مكدس من الطبقة العليا. تم تصميم هذه الخلفيات بحيث تتداخل بعضها مع بعض، لذا إذا لم يكن تعتيم الصورة الخلفية 100%، تكون الخلفيات الخلفية مرئية.
إذا أردت أن تكون أول صور خلفية في حزمة الطبقة العليا مرئية فقط، يمكنك تحقيق ذلك من خلال تتبُّع معرّفات العناصر في حزمة الطبقة العليا.
إذا لم يكن العنصر المضاف هو الأول في الطبقة العليا، تطبِّق الدالة التي يتم استدعاءها عند وضع العنصر في الطبقة العلوية فئة hiddenBackdrop على ::backdrop. تتم إزالة هذه الفئة عند إزالة العنصر من الطبقة العلوية.
تحقق من التعليمة البرمجية في هذا المثال التجريبي:
تصميم دعم الطبقة العلوية في "أدوات مطوري البرامج"
يساعد دعم أدوات مطوّري البرامج للطبقة العليا المطورين على فهم مفهوم الطبقة العلوية وتصور كيفية تغير محتوى الطبقة العليا. تساعد هذه الميزات المطوّرين في تحديد ما يلي:
- العناصر في الطبقة العليا في أي وقت وترتيبها.
- العنصر أعلى المكدس في أي نقطة.
بالإضافة إلى ذلك، يساعد دعم الطبقة العلوية في "أدوات مطوري البرامج" في تصوّر موضع العنصر الزائف في الخلفية في حزمة الطبقة العليا. على الرغم من أنها ليست عنصرًا في الشجرة، فهي تؤدي دورًا مهمًا في طريقة عمل الطبقة العلوية ويمكن أن تكون مفيدة للمطورين.
باستخدام ميزات دعم الطبقة العليا، يمكنك:
- راقب العناصر الموجودة في مكدس الطبقة العليا في أي وقت. يتغير مكدس تمثيل الطبقة العلوية ديناميكيًا عند إضافة العناصر أو إزالتها من الطبقة العليا.
- اطّلِع على موضع العنصر في حزمة الطبقة العليا.
- انتقِل من عنصر الطبقة العلوية أو عنصر صورة خلفية للعناصر في الشجرة إلى العنصر أو العنصر الزائف في الخلفية في حاوية تمثيل الطبقة العليا والخلف.
لنطّلع على كيفية استخدام هذه الميزات.
حاوية الطبقة العلوية
للمساعدة في عرض عناصر الطبقة العليا، تضيف أدوات مطوّري البرامج حاوية الطبقة العليا إلى شجرة العناصر. ويمكن وضعها بعد علامة الإغلاق </html>.
تتيح لك هذه الحاوية مراقبة العناصر في حزمة الطبقة العليا في أي وقت. حاوية الطبقة العليا هي قائمة بروابط لعناصر الطبقة العليا وخلفياتها. يتغير مكدس تمثيل الطبقة العلوية ديناميكيًا عند إضافة العناصر أو إزالتها من الطبقة العليا.
للعثور على عناصر الطبقة العليا داخل شجرة العناصر أو حاوية الطبقة العليا، انقر على الروابط من تمثيل عنصر الطبقة العليا في حاوية الطبقة العليا إلى العنصر نفسه في شجرة العناصر والعنصر الخلفي.
للانتقال من عنصر حاوية الطبقة العليا إلى عنصر شجرة الطبقة العلوية، انقر على الزر كشف بجانب العنصر في حاوية الطبقة العليا.
للانتقال من عنصر شجرة الطبقة العلوية إلى الرابط في حاوية الطبقة العليا، انقر على شارة الطبقة العليا بجوار العنصر.
يمكنك إيقاف أي شارة، بما في ذلك شارة الطبقة العليا. لإيقاف الشارات، انقر بزر الماوس الأيمن على أي شارة، واختَر إعدادات الشارات وامسح علامات الاختيار بجانب الشارات التي تريد إخفاءها.
ترتيب العناصر في مكدس الطبقة العليا
تعرض حاوية الطبقة العلوية العناصر كما تظهر في المكدس ولكن بترتيب عكسي. أعلى عنصر المكدس هو الأخير في قائمة العناصر لحاوية الطبقة العليا. وهذا يعني أنّ العنصر الأخير في قائمة حاويات الطبقة العليا هو العنصر الذي يمكنك التفاعل معه حاليًا في المستند.
تشير الشارات إلى جانب عناصر الشجرة إلى ما إذا كانت العناصر تنتمي إلى الطبقة العليا وتحتوي على رقم موضع العنصر في المكدس.
في لقطة الشاشة هذه، يتكون مكدس الطبقة العلوية من عنصرين، مع العنصر الثاني في أعلى المكدس. إذا أزلت العنصر الثاني، ينتقل العنصر الأول إلى الأعلى.
الصور الخلفية في حاوية الطبقة العليا
كما أسلفنا، يحتوي كل عنصر من عناصر الطبقة العلوية على عنصر CSS زائف يسمى الصورة الخلفية. يمكنك تصميم هذا العنصر، بحيث من المفيد أيضًا فحصه ومعرفة تمثيله.
في شجرة العناصر، يوجد عنصر خلفية قبل علامة الإغلاق للعنصر الذي ينتمي إليه. ولكن في حاوية الطبقة العليا، يتمّ إدراج رابط خلفية أعلى عنصر الطبقة العلوية الذي ينتمي إليه مباشرةً.
التغييرات على شجرة نموذج العناصر في المستند (DOM)
لم تكن الفئة ElementsTreeElement، وهي الفئة المسؤولة عن إنشاء عناصر شجرة DOM الفردية وإدارتها في "أدوات مطوّري البرامج"، كافية لتنفيذ حاوية من الطبقة العليا.
لعرض حاوية الطبقة العليا كعقدة في الشجرة، أضفنا فئة جديدة تنشئ عُقد عنصر شجرة في أدوات مطوّري البرامج. في السابق، كانت الفئة المسؤولة عن إنشاء شجرة عناصر أدوات مطوّري البرامج يتم إعدادها كل TreeElement باستخدام DOMNode، وهي فئة تحتوي على backendNodeId وغيرها من الخصائص المتعلقة بالخلفية. تعيين backendNodeId في الخلفية.
عقدة حاوية الطبقة العليا، التي تحتوي على قائمة من الروابط لعناصر الطبقة العليا، اللازمة لتعمل كعقدة عنصر شجرة عادية. ومع ذلك، فإن هذه العقدة ليست عقدة DOM "حقيقية"، ولا تحتاج الخلفية إلى إنشاء عقدة حاوية للطبقة العليا.
لإنشاء عقدة واجهة أمامية تمثل الطبقة العلوية، أضفنا نوعًا جديدًا من عُقد الواجهة الأمامية التي يتم إنشاؤها بدون DOMNode. عنصر حاوية الطبقة العليا هذا هو أول عقدة واجهة أمامية لا تحتوي على DOMNode، ما يعني أنها موجودة فقط على الواجهة الأمامية وأن الواجهة الخلفية لا "تعرف" بها. للحصول على نفس سلوك العُقد الأخرى، أنشأنا فئة TopLayerContainer جديدة تعمل على تمديد الفئة UI.TreeOutline.TreeElement المسؤولة عن سلوك العُقد الأمامية.
لتحقيق الموضع المطلوب، تربط الفئة التي تعرض عنصرًا العنصر TopLayerContainer باعتباره العنصر التابع التالي للعلامة <html>.
تشير شارة الطبقة العلوية الجديدة إلى أنّ العنصر في الطبقة العلوية ويعمل كرابط إلى اختصار هذا العنصر في العنصر TopLayerContainer.
التصميم الأولي
في البداية، كانت الخطة هي تكرار عناصر الطبقة العليا في حاوية الطبقة العليا بدلاً من إنشاء قائمة بالروابط إلى العناصر. لم يتم تنفيذ هذا الحل بسبب طريقة استرجاع العناصر الثانوية للعناصر في "أدوات مطوري البرامج". ويحتوي كل عنصر على مؤشر رئيسي يُستخدم في جلب العناصر الثانوية ومن المستحيل أن يكون لديك عدّة مؤشرات. ولذلك، لا يمكننا الحصول على عقدة يتم توسيعها بشكل صحيح وتحتوي على جميع العناصر الثانوية في أماكن متعددة في الشجرة. وبوجه عام، لم يتم إنشاء النظام مع وضع الأشجار الفرعية المكررة في الاعتبار.
كان الاختراق الذي وصلنا إليه هو إنشاء روابط إلى عُقد DOM الأمامية بدلاً من تكرار هذه العُقد. الفئة المسؤولة عن إنشاء روابط إلى العناصر في أدوات مطوّري البرامج هي ShortcutTreeElement، وهي فئة توسّع UI.TreeOutline.TreeElement. تتّبع دالة ShortcutTreeElement سلوك عناصر شجرة DOM الأخرى في أدوات مطوّري البرامج، ولكن ليس لها عقدة مقابلة في الخلفية، كما أنّها تتضمّن زرًا يؤدي إلى ElementsTreeElement.
يحتوي كل ShortcutTreeElement إلى عقدة الطبقة العلوية على عنصر ShortcutTreeElement ثانوي يرتبط بتمثيل عنصر زائف ::backdrop في شجرة نموذج العناصر في أدوات مطوّري البرامج.
التصميم الأولي:
تغييرات بروتوكول أدوات مطوّري البرامج في Chrome (CDP)
لتنفيذ إتاحة الطبقة العليا، يجب إجراء تغييرات على بروتوكول أدوات مطوّري البرامج في Chrome (CDP). بروتوكول CDP هو بروتوكول اتصال بين "أدوات مطوري البرامج" وChromium.
نحتاج إلى إضافة ما يلي:
- أمر للاتصال به من الواجهة الأمامية في أي وقت.
- حدث يتم تشغيله على الواجهة الأمامية من الواجهة الخلفية.
CDP: الأمر DOM.getTopLayerElements
لعرض عناصر الطبقة العلوية الحالية، نحتاج إلى أمر CDP تجريبي جديد يعرض قائمة بمعرفات العقد للعناصر الموجودة في الطبقة العلوية. تستدعي أدوات مطوّري البرامج هذا الأمر عند فتح أدوات مطوّري البرامج أو عند تغيير عناصر الطبقة العليا. يظهر هذا الأمر على النحو التالي:
# Returns NodeIds of the current top layer elements.
# Top layer renders closest to the user within a viewport, therefore, its elements always
# appear on top of all other content.
experimental command getTopLayerElements
returns
# NodeIds of the top layer elements.
array of NodeId nodeIds
CDP: حدث واحد (DOM.topLayerElementsUpdated)
للحصول على قائمة محدّثة بعناصر الطبقة العليا، نحتاج إلى كل تغيير في عناصر الطبقة العليا لتشغيل حدث CDP تجريبي. يُعلِم هذا الحدث الواجهة الأمامية بالتغيير الذي يتم بعد ذلك استدعاء الأمر DOM.getTopLayerElements وتلقّي قائمة العناصر الجديدة.
يبدو الحدث كما يلي:
# Called by the change of the top layer elements.
experimental event topLayerElementsUpdated
اعتبارات CDP
كانت هناك خيارات متعددة حول كيفية تنفيذ دعم CDP للطبقة العليا. هناك خيار آخر فكرنا فيه وهو إنشاء حدث يعرض قائمة عناصر الطبقة العليا بدلاً من إعلام الواجهة الأمامية بإضافة أو إزالة عنصر من الطبقة العلوية.
بدلاً من ذلك، يمكننا إنشاء حدثين بدلاً من الأمر: topLayerElementAdded وtopLayerElementRemoved. في هذه الحالة، سوف نتلقى عنصرًا وسنحتاج إلى إدارة صفيف عناصر الطبقة العليا في الواجهة الأمامية.
في الوقت الحالي، يستدعي حدث الواجهة الأمامية الأمر getTopLayerElements للحصول على قائمة بالعناصر التي تم تعديلها. إذا كنا سنرسل قائمة بالعناصر أو عنصر معين تسبب في التغيير في كل مرة يتم فيها تشغيل حدث ما، فيمكننا تجنب خطوة واحدة من استدعاء الأمر.
ومع ذلك، في هذه الحالة، ستفقد الواجهة الأمامية إمكانية التحكم في العناصر التي يتم دفعها.
لقد تم تنفيذ ذلك بهذه الطريقة، لأنه، في رأينا، من الأفضل أن تقرر الواجهة الأمامية وقت طلب عُقد الطبقة العلوية. على سبيل المثال، إذا تم تصغير الطبقة العلوية في واجهة المستخدم أو إذا كان المستخدم يستخدم لوحة "أدوات مطوري البرامج" لا تحتوي على شجرة العناصر، لن يكون من الضروري الحصول على العُقد الإضافية التي قد تتعمق أكثر في الشجرة.