يتيح أدوات مطوري البرامج في 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 زائف يسمى الخلفية. يمكنك تصميم هذا العنصر، لذا من المفيد فحصه ومعرفة تمثيله.
في شجرة العناصر، يوجد عنصر خلفية قبل علامة الإغلاق للعنصر الذي ينتمي إليه. ومع ذلك، في حاوية الطبقة العليا، يتم إدراج رابط الخلفية أعلى عنصر الطبقة العلوية التي ينتمي إليه مباشرةً.
تغييرات في شجرة نموذج العناصر في المستند
إنّ الفئة 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 زائف في شجرة عناصر DOM الخاصة بأدوات مطوّري البرامج.
التصميم الأولي:
التغييرات التي تم إجراؤها على بروتوكول أدوات مطوّري البرامج في Chrome
لتنفيذ الدعم من الطبقة العليا، يجب إجراء تغييرات على بروتوكول أدوات مطوّري البرامج في Chrome. تعمل بروتوكول CDP كبروتوكول اتصال بين "أدوات مطوري البرامج" وChrome.
نحتاج إلى إضافة ما يلي:
- أمر للاتصال من الواجهة الأمامية في أي وقت.
- يشير ذلك المصطلح إلى حدث يتم تشغيله في الواجهة الأمامية من الخلفية.
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 للحصول على قائمة بالعناصر المعدّلة. إذا كنا نريد إرسال قائمة من العناصر أو عنصر محدد يتسبب في التغيير في كل مرة يتم تشغيل حدث، يمكننا تجنب خطوة واحدة من استدعاء الأمر.
ومع ذلك، في هذه الحالة، ستفقد الواجهة الأمامية التحكم في العناصر التي يتم دفعها.
لقد قمنا بتنفيذه بهذه الطريقة، لأنه من الأفضل، في رأينا، أن تقرر الواجهة الأمامية وقت طلب عقد الطبقة العليا. على سبيل المثال، إذا تم تصغير الطبقة العلوية في واجهة المستخدم أو كان المستخدم يستخدم لوحة في "أدوات مطوري البرامج" لا تحتوي على شجرة العناصر، لن تكون هناك حاجة إلى الوصول إلى العُقد الإضافية التي يمكن أن تكون أكثر عمقًا في الشجرة.