Chrome DevTools में टॉप लेयर एलिमेंट के लिए सहायता जोड़ी जा रही है. इससे डेवलपर के लिए, अपने उस कोड को डीबग करना आसान हो जाता है जो टॉप लेयर एलिमेंट का इस्तेमाल करता है.
इस लेख में बताया गया है कि टॉप लेयर एलिमेंट क्या होते हैं, DevTools टॉप लेयर एलिमेंट वाले डीओएम स्ट्रक्चर को समझने और डीबग करने के लिए, टॉप लेयर के कॉन्टेंट को विज़ुअलाइज़ करने में कैसे मदद करते हैं, और DevTools टॉप लेयर एलिमेंट को कैसे लागू किया जाता है.
टॉप लेयर और टॉप लेयर एलिमेंट क्या हैं?
<dialog> को मॉडल के तौर पर खोलने पर, अंदरूनी तौर पर क्या होता है? 🤔
इसे सबसे ऊपर की लेयर में डाला जाता है. टॉप लेयर का कॉन्टेंट, अन्य सभी कॉन्टेंट के ऊपर रेंडर होता है. उदाहरण के लिए, एक मोडल डायलॉग, बाकी सभी डीओएम कॉन्टेंट के सबसे ऊपर दिखना चाहिए. इसलिए, ब्राउज़र इस एलिमेंट को 'मुख्य लेयर' में अपने-आप रेंडर करता है. ऐसा करने से, लेखकों को मैन्युअल तौर पर z-index का मुकाबला करने के लिए मजबूर नहीं होना पड़ता. सबसे ज़्यादा z-इंडेक्स होने पर भी किसी एलिमेंट के ऊपर एक टॉप लेयर एलिमेंट दिखता है.
सबसे ऊपरी लेयर को 'सबसे ज़्यादा स्टैकिंग लेयर' के तौर पर बताया जा सकता है. हर दस्तावेज़ में एक ही व्यूपोर्ट होता है, इसलिए एक टॉप लेयर भी होता है. एक ही समय पर सबसे ऊपर मौजूद लेयर में कई एलिमेंट हो सकते हैं. जब ऐसा होता है, तो वे एक-दूसरे के ऊपर स्टैक हो जाते हैं यानी सबसे ऊपर मौजूद. दूसरे शब्दों में कहें, तो टॉप लेयर के सभी एलिमेंट को टॉप लेयर में, लास्ट इन, फ़र्स्ट आउट (एलआईएफ़ओ) स्टैक में रखा जाता है.
<dialog> एलिमेंट ही ऐसा एलिमेंट नहीं है जिसे ब्राउज़र सबसे ऊपर की लेयर में रेंडर करता है. फ़िलहाल, सबसे ऊपर वाले लेयर एलिमेंट हैं:
पॉपओवर, मोडल डायलॉग, और फ़ुलस्क्रीन मोड में एलिमेंट.
डायलॉग बॉक्स को लागू करने की इस प्रक्रिया की जांच करें:
<main>
<button onclick="window.dialog.showModal();">Open Dialog</button>
</main>
<dialog id="dialog"></dialog>
यहां एक डेमो दिया गया है, जिसमें ऐसे डायलॉग दिए गए हैं जिनके बैकग्राउंड पर स्टाइल लागू की गई हैं. बैकड्रॉप नीचे बताए गए हैं:
बैकड्रॉप क्या होता है?
अच्छी बात यह है कि टॉप लेयर एलिमेंट के नीचे, कॉन्टेंट को पसंद के मुताबिक बनाने का एक तरीका मौजूद है.
सबसे ऊपर मौजूद लेयर के हर एलिमेंट में एक सीएसएस स्यूडो-एलिमेंट होता है, जिसे बैकड्रॉप कहते हैं.
बैकड्रॉप, व्यूपोर्ट के आकार का एक बॉक्स होता है, जिसे किसी भी टॉप लेयर एलिमेंट के नीचे रेंडर किया जाता है. ::backdrop के सूडो एलिमेंट की मदद से, एलिमेंट के नीचे मौजूद हर चीज़ को धुंधला किया जा सकता है, स्टाइल किया जा सकता है या पूरी तरह छिपाया जा सकता है. ऐसा तब होता है, जब एलिमेंट सबसे ऊपर मौजूद हो.
जब एक से ज़्यादा एलिमेंट को मॉडल किया जाता है, तो ब्राउज़र बैकग्राउंड को ऐसे एलिमेंट के सबसे नीचे और फ़ुलस्क्रीन एलिमेंट के सबसे ऊपर बनाता है.
यहां बताया गया है कि आप बैकड्रॉप को कैसे शैली देते हैं:
/* The browser displays the backdrop only when the dialog.showModal() function opens the dialog.*/
dialog::backdrop {
background: rgba(255,0,0,.25);
}
सिर्फ़ पहला बैकग्राउंड कैसे दिखाया जाए?
हर टॉप लेयर एलिमेंट की एक बैकग्राउंड होती है, जो किसी टॉप लेयर स्टैक से जुड़ी होती है. ये बैकड्रॉप एक-दूसरे को ओवरलैप करने के लिए डिज़ाइन किए गए हैं, इसलिए अगर किसी बैकग्राउंड की ओपैसिटी 100% नहीं है, तो बैकग्राउंड के नीचे दिखाई दें.
अगर टॉप लेयर स्टैक में सिर्फ़ पहली बैकड्रॉप दिखनी चाहिए, तो टॉप लेयर स्टैक में आइटम आइडेंटिफ़ायर को ट्रैक करके ऐसा किया जा सकता है.
अगर जोड़ा गया एलिमेंट, सबसे ऊपर की लेयर का पहला एलिमेंट नहीं है, तो एलिमेंट को टॉप लेयर पर लाने पर कॉल किया गया फ़ंक्शन, ::backdrop पर hiddenBackdrop क्लास लागू करता है. टॉप लेयर से एलिमेंट हटाए जाने पर, इस क्लास को हटा दिया जाता है.
उदाहरण के तौर पर दिए गए इस डेमो में यह कोड देखें:
DevTools में टॉप लेयर सपोर्ट डिज़ाइन
सबसे ऊपर मौजूद लेयर के लिए DevTools काम करने की सुविधा की मदद से, डेवलपर को टॉप लेयर का कॉन्सेप्ट समझने में मदद मिलती है. साथ ही, यह भी देखा जा सकता है कि टॉप लेयर के कॉन्टेंट में बदलाव कैसे होता है. इन सुविधाओं की मदद से, डेवलपर को इन चीज़ों की पहचान करने में मदद मिलती है:
- सबसे ऊपर लेयर के एलिमेंट और उनका क्रम.
- स्टैक के सबसे ऊपर मौजूद एलिमेंट.
इसके अलावा, DevTools टॉप लेयर सपोर्ट, सबसे ऊपर मौजूद लेयर स्टैक में बैकग्राउंड के छद्म-एलिमेंट की स्थिति को विज़ुअलाइज़ करने में मदद करता है. भले ही यह ट्री एलिमेंट न हो, लेकिन यह टॉप लेयर के काम करने के तरीके में अहम भूमिका निभाता है. साथ ही, यह डेवलपर के लिए काम का हो सकता है.
ऊपरी लेयर से जुड़ी सहायता सुविधाओं के साथ, ये काम किए जा सकते हैं:
- किसी भी समय देखें कि सबसे ऊपर मौजूद लेयर स्टैक में कौनसे एलिमेंट शामिल हैं. टॉप लेयर में एलिमेंट जोड़ने या हटाने पर, टॉप लेयर दिखाने वाला स्टैक डाइनैमिक तौर पर बदलता है.
- टॉप लेयर स्टैक में एलिमेंट की पोज़िशन देखें.
- ट्री में टॉप लेयर एलिमेंट या एलिमेंट के बैकग्राउंड pseudo-एलिमेंट से सीधे एलिमेंट पर जाएं. इसके बाद, सबसे ऊपर मौजूद लेयर दिखाने वाले कंटेनर में, एलिमेंट या बैकग्राउंड के सूडो एलिमेंट पर जाएं.
आइए, इन सुविधाओं को इस्तेमाल करने का तरीका जानें!
ऊपर की लेयर का कंटेनर
टॉप लेयर के एलिमेंट को विज़ुअलाइज़ करने के लिए, DevTools टॉप लेयर कंटेनर को एलिमेंट ट्री में जोड़ता है. यह क्लोज़िंग </html> टैग के बाद रहता है.
इस कंटेनर की मदद से, सबसे ऊपर मौजूद लेयर स्टैक में मौजूद एलिमेंट को कभी भी देखा जा सकता है. सबसे ऊपर वाली लेयर का कंटेनर, सबसे ऊपर मौजूद लेयर के एलिमेंट और उनके बैकड्रॉप के लिंक की सूची होती है. टॉप लेयर में एलिमेंट जोड़ने या हटाने पर, टॉप लेयर दिखाने वाला स्टैक डाइनैमिक तौर पर बदलता है.
एलिमेंट ट्री या टॉप लेयर कंटेनर में टॉप लेयर के एलिमेंट ढूंढने के लिए, टॉप लेयर कंटेनर में टॉप लेयर एलिमेंट निरूपित करने से लेकर एलिमेंट ट्री और पीछे के एक ही एलिमेंट के लिंक पर क्लिक करें.
टॉप लेयर कंटेनर एलिमेंट से टॉप लेयर ट्री एलिमेंट पर जाने के लिए, टॉप लेयर कंटेनर में एलिमेंट के बगल में मौजूद रिवील करें बटन पर क्लिक करें.
टॉप लेयर ट्री एलिमेंट से टॉप लेयर कंटेनर में लिंक पर जाने के लिए, एलिमेंट के बगल में मौजूद टॉप लेयर बैज पर क्लिक करें.
आपके पास सबसे ऊपर वाली लेयर के साथ-साथ, किसी भी बैज को बंद करने का विकल्प होता है. बैज को बंद करने के लिए, किसी भी बैज पर राइट क्लिक करें. इसके बाद, बैज की सेटिंग चुनें और आपको जिन बैज को छिपाना है उनके बगल में मौजूद सही का निशान हटाएं.
सबसे ऊपर वाली लेयर स्टैक में एलिमेंट का क्रम
टॉप लेयर कंटेनर, एलिमेंट को उसी क्रम में दिखाता है जैसा वे स्टैक में दिखते हैं. हालांकि, एलिमेंट का क्रम उलटा होता है. स्टैक एलिमेंट का ऊपरी हिस्सा, टॉप लेयर कंटेनर की एलिमेंट सूची में सबसे ऊपर होता है. इसका मतलब है कि टॉप लेयर की कंटेनर सूची का आखिरी एलिमेंट, वह एलिमेंट है जिसके साथ फ़िलहाल, दस्तावेज़ में इंटरैक्ट किया जा सकता है.
ट्री एलिमेंट के बगल में मौजूद बैज यह बताते हैं कि एलिमेंट टॉप लेयर से जुड़े हैं या नहीं और उनमें स्टैक में किसी एलिमेंट की पोज़िशन नंबर शामिल है या नहीं.
इस स्क्रीनशॉट में, टॉप लेयर स्टैक में दो एलिमेंट हैं और दूसरा एलिमेंट स्टैक के सबसे ऊपर है. अगर दूसरे एलिमेंट को हटाया जाता है, तो पहला एलिमेंट सबसे ऊपर चला जाता है.
सबसे ऊपर लेयर के कंटेनर में बैकड्रॉप
जैसा कि ऊपर बताया गया है, हर टॉप लेयर एलिमेंट में बैकड्रॉप नाम का एक सीएसएस सूडो-एलिमेंट होता है. इस एलिमेंट को स्टाइल किया जा सकता है. इसलिए, इसकी जांच करने और इसका प्रज़ेंटेशन देखने में मदद करें.
एलिमेंट ट्री में, एक बैकड्रॉप एलिमेंट, उससे जुड़े एलिमेंट के क्लोज़ टैग से पहले रहता है. हालांकि, सबसे ऊपर वाली लेयर के कंटेनर में, बैकग्राउंड लिंक उसके टॉप लेयर एलिमेंट के ठीक ऊपर मौजूद होता है.
डीओएम ट्री में हुए बदलाव
ElementsTreeElement, DevTools में अलग-अलग डीओएम ट्री एलिमेंट बनाने और उन्हें मैनेज करने के लिए ज़िम्मेदार क्लास, टॉप लेयर कंटेनर को लागू करने के लिए काफ़ी नहीं थी.
ट्री में, टॉप लेयर कंटेनर को नोड के तौर पर दिखाने के लिए, हमने एक नई क्लास जोड़ी है, जो DevTools ट्री एलिमेंट नोड बनाती है. पहले, DevTools एलिमेंट ट्री बनाने वाली क्लास को हर TreeElement में DOMNode के साथ शुरू किया जाता था. यह क्लास, backendNodeId और बैकएंड से जुड़ी अन्य प्रॉपर्टी वाली क्लास है. वहीं, backendNodeId को बैकएंड पर असाइन किया जाता है.
टॉप लेयर कंटेनर नोड, जिसमें टॉप लेयर एलिमेंट के लिंक की सूची होती है, जो सामान्य ट्री एलिमेंट नोड की तरह काम करने के लिए ज़रूरी होती है. हालांकि, यह नोड 'असली' DOM नोड नहीं है और बैकएंड को टॉप लेयर कंटेनर नोड बनाने की ज़रूरत नहीं है.
टॉप लेयर को दिखाने वाला फ़्रंटएंड नोड बनाने के लिए, हमने नए टाइप का फ़्रंटएंड नोड जोड़ा है, जिसे DOMNode के बिना बनाया जाता है. यह टॉप लेयर कंटेनर एलिमेंट ऐसा फ़्रंटएंड नोड होता है जिसमें DOMNode नहीं होता. इसका मतलब है कि यह सिर्फ़ फ़्रंटएंड पर मौजूद होता है. बैकएंड को इसके बारे में कोई जानकारी नहीं होती. दूसरे नोड जैसा व्यवहार करने के लिए, हमने एक नई TopLayerContainer क्लास बनाई है, जो UI.TreeOutline.TreeElement क्लास को बढ़ाती है. यह फ़्रंटएंड नोड का व्यवहार करने के लिए ज़िम्मेदार है.
अपनी पसंद के मुताबिक प्लेसमेंट पाने के लिए, किसी एलिमेंट को रेंडर करने वाली क्लास TopLayerContainer को <html> टैग के अगले सिबलिंग के तौर पर अटैच करती है.
एक नया टॉप लेयर बैज यह बताता है कि एलिमेंट सबसे ऊपर की लेयर में है और TopLayerContainer एलिमेंट में इस एलिमेंट के शॉर्टकट के लिंक के तौर पर काम करता है.
शुरुआती डिज़ाइन
पहले, प्लान था कि टॉप लेयर के एलिमेंट को एलिमेंट के लिंक की सूची बनाने के बजाय, टॉप लेयर के कंटेनर में डुप्लीकेट किया जाए. DevTools में एलिमेंट के बच्चों को फ़ेच करने का जो तरीका काम करता है उसकी वजह से, हमने इस समाधान को लागू नहीं किया. हर एलिमेंट में एक पैरंट पॉइंटर होता है, जिसका इस्तेमाल बच्चों को फ़ेच करने के लिए किया जाता है. साथ ही, इसमें एक से ज़्यादा पॉइंटर नहीं हो सकते. इसलिए, हमारे पास ऐसा नोड नहीं हो सकता जो सही तरीके से बड़ा हो रहा हो और ट्री में कई जगहों पर सभी बच्चों को शामिल कर सके. आम तौर पर, यह सिस्टम डुप्लीकेट सबट्री को ध्यान में रखकर नहीं बनाया गया था.
हमें जिस समझौता तक पहुंचा था, वह था उन नोड को डुप्लीकेट करने के बजाय फ़्रंटएंड DOM नोड के लिए लिंक बनाने का. DevTools में एलिमेंट के लिंक बनाने के लिए, ShortcutTreeElement क्लास है. यह UI.TreeOutline.TreeElement के दायरे में आती है. ShortcutTreeElement का व्यवहार अन्य DevTools DOM ट्री एलिमेंट जैसा ही है, लेकिन इसका बैकएंड पर कोई नोड नहीं है. साथ ही, इसमें ElementsTreeElement से लिंक करने वाला बटन है.
सबसे ऊपर लेयर नोड के हर ShortcutTreeElement में एक चाइल्ड ShortcutTreeElement होता है, जो DevTools DOM ट्री में ::backdrop स्यूडो-एलिमेंट को दिखाने से जुड़ा होता है.
शुरुआती डिज़ाइन:
Chrome DevTools प्रोटोकॉल (सीडीपी) में बदलाव
टॉप लेयर सपोर्ट को लागू करने के लिए, Chrome DevTools प्रोटोकॉल (सीडीपी) में बदलाव करना ज़रूरी है. सीडीपी, DevTools और Chromium के बीच कम्यूनिकेशन प्रोटोकॉल के तौर पर काम करता है.
हमें यह जानकारी जोड़नी होगी:
- किसी भी समय फ़्रंटएंड से कॉल करने के लिए एक निर्देश.
- बैकएंड साइड से फ़्रंटएंड पर ट्रिगर होने वाला इवेंट.
सीडीपी: DOM.getTopLayerElements कमांड
मौजूदा टॉप लेयर के एलिमेंट को दिखाने के लिए, हमें एक नए एक्सपेरिमेंटल सीडीपी कमांड की ज़रूरत है, जो टॉप लेयर में मौजूद एलिमेंट के नोड आईडी की सूची दिखाएं. DevTools खोले जाने पर या सबसे ऊपर मौजूद लेयर के एलिमेंट बदलने पर, DevTools इस निर्देश को कॉल करता है. निर्देश ऐसा दिख सकता है:
# 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
सीडीपी: DOM.topLayerElementsUpdated इवेंट
टॉप लेयर के एलिमेंट की अप-टू-डेट सूची पाने के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध सीडीपी इवेंट को ट्रिगर करने के लिए, हमें टॉप लेयर के हर एलिमेंट में बदलाव करने की ज़रूरत होती है. यह इवेंट, बदलाव के फ़्रंटएंड की जानकारी देता है. इसके बाद, DOM.getTopLayerElements कमांड को कॉल किया जाता है और नए एलिमेंट की सूची मिलती है.
यह इवेंट कुछ ऐसा दिखेगा:
# Called by the change of the top layer elements.
experimental event topLayerElementsUpdated
सीडीपी पर ध्यान देने वाली बातें
टॉप लेयर के सीडीपी सपोर्ट को लागू करने के कई विकल्प मौजूद थे. हमने एक अन्य विकल्प पर भी विचार किया. यह एक ऐसा इवेंट था जो किसी टॉप लेयर एलिमेंट को जोड़ने या हटाने के बारे में फ़्रंट एंड को बताने के बजाय, टॉप लेयर के एलिमेंट की सूची दिखाएगा.
इसके अलावा, हम निर्देश के बजाय दो इवेंट बना सकते हैं: topLayerElementAdded और topLayerElementRemoved. इस मामले में, हमें एक एलिमेंट मिलेगा और हमें फ़्रंट एंड में सबसे ऊपर मौजूद लेयर के एलिमेंट के अरे को मैनेज करना होगा.
फ़िलहाल, अपडेट किए गए एलिमेंट की सूची पाने के लिए, फ़्रंटएंड इवेंट getTopLayerElements कमांड को कॉल करता है. अगर हम उन एलिमेंट की सूची या किसी ऐसे एलिमेंट को भेजते जिनकी वजह से हर बार इवेंट ट्रिगर होता है, तो हम कमांड को कॉल करने से एक चरण तक रोक सकते थे.
हालांकि, इस मामले में फ़्रंटएंड, पुश किए जाने वाले एलिमेंट का कंट्रोल खो देगा.
हमने इसे इस तरह से लागू किया है, क्योंकि हमारी राय में, अगर फ़्रंटएंड यह तय करे कि टॉप लेयर नोड के लिए अनुरोध कब करना है, तो बेहतर होगा. उदाहरण के लिए, अगर यूज़र इंटरफ़ेस (यूआई) में टॉप लेयर को छोटा कर दिया गया है या उपयोगकर्ता ऐसे DevTools पैनल का इस्तेमाल कर रहा है जिसमें एलिमेंट ट्री नहीं है, तो अतिरिक्त नोड पाने की ज़रूरत नहीं है. ये नोड ट्री में ज़्यादा अंदर के बारे में हो सकते हैं.