Chrome Geliştirici Araçları, üst katman öğeleri için destek ekleyerek geliştiricilerin üst katman öğelerinden yararlanan kodlarında hata ayıklamasını kolaylaştırmaktadır.
Bu makalede en üst katman öğelerinin ne olduğu, Geliştirici Araçları'nın üst katman öğelerini içeren DOM yapısını anlamak ve hata ayıklamak için en üst katman içeriğinin görselleştirilmesine nasıl yardımcı olduğu ve Geliştirici Araçları üst katman desteğinin nasıl uygulandığı açıklanmaktadır.
Üst katman ve üst katman öğeleri nelerdir?
Bir <dialog> öğesini kalıcı olarak açtığınızda dahili olarak tam olarak ne olur? 🤔
En üst katmana yerleştirilir. Üst katman içeriği, diğer tüm içeriğin üzerinde oluşturulur. Örneğin, kalıcı bir iletişim kutusunun diğer tüm DOM içeriğinin üzerinde görünmesi gerekir; böylece tarayıcı bu öğeyi otomatik olarak bir "üst katman"da oluşturur Z-endeksi ile manuel olarak mücadele etmek yerine yazarları En yüksek Z-endeksine sahip olsa bile, bir öğenin üstünde bir üst katman öğesi görünür.
Üst katman, "en yüksek yığılan katman" olarak tanımlanabilir. Her belgenin ilişkili tek bir görüntü alanı ve dolayısıyla, tek bir üst katmanı vardır. Üst katmanın içinde aynı anda birden fazla öğe bulunabilir. Böyle bir durumda, içerik üreticiler üst üste yığılır. Sonuncusu en üstte olur. Diğer bir deyişle, üst katman öğelerinin tümü, üst katmanda bir son giren, ilk çıkar (LIFO) yığınına yerleştirilir.
<dialog> öğesi, tarayıcının bir üst katmanda oluşturduğu tek öğe değildir. Şu anda üst katman öğeleri şunlardır:
Pop-up'lar, kalıcı iletişim kutuları ve tam ekran modundaki öğeler.
Aşağıdaki iletişim kutusu uygulamasını inceleyin:
<main>
<button onclick="window.dialog.showModal();">Open Dialog</button>
</main>
<dialog id="dialog"></dialog>
Arka planlarına stiller uygulanmış birkaç iletişim kutusunun yer aldığı bir demoyu aşağıda bulabilirsiniz (arka planlar aşağıda açıklanmıştır):
Arka plan nedir?
Neyse ki üst katman öğesinin altındaki içeriği özelleştirmenin bir yolu var.
En üst katmandaki her öğenin arka plan olarak adlandırılan bir CSS sözde öğesi vardır.
Arka plan, herhangi bir üst katman öğesinin hemen altında görüntülenen, görüntü alanının boyutuna karşılık gelen bir kutudur. ::backdrop sözde öğesi, üst katmanda en üstteki öğe olduğunda öğenin altında bulunan her şeyi gizlemeyi, biçimlendirmeyi veya tamamen gizlemeyi mümkün kılar.
Birden çok öğeyi kalıcı hale getirdiğinizde, tarayıcı arka planı bu tür en öndeki öğenin hemen altına ve diğer tam ekran öğelerinin üstüne çizer.
Arka planı nasıl biçimlendireceğiniz aşağıda açıklanmıştır:
/* The browser displays the backdrop only when the dialog.showModal() function opens the dialog.*/
dialog::backdrop {
background: rgba(255,0,0,.25);
}
Yalnızca ilk arka plan nasıl gösterilir?
Her üst katman öğesinin, üst katman grubuna ait bir arka planı vardır. Bu arka planlar birbiriyle örtüşecek şekilde tasarlanmıştır. Bu nedenle, bir arka planın opaklığı %100 değilse, altındaki arka planlar görünür.
Yalnızca üst katman grubundaki ilk arka planın görünür olması gerekiyorsa bunu, üst katman grubundaki öğe tanımlayıcılarını takip ederek yapabilirsiniz.
Eklenen öğe üst katmandaki ilk öğe değilse öğe üst katmana yerleştirildiğinde çağrılan işlev, ::backdrop öğesine bir hiddenBackdrop sınıfı uygular. Öğe üst katmandan kaldırıldığında bu sınıf kaldırılır.
Şu örnek demodaki koda göz atın:
Geliştirici Araçları'nda en üst katman desteği tasarımı
En üst katman için sunulan Geliştirici Araçları desteği, geliştiricilerin üst katman kavramını anlamalarına ve üst katman içeriğinin nasıl değiştiğini görselleştirmelerine yardımcı olur. Bu özellikler, geliştiricilerin aşağıdakileri tespit etmesine yardımcı olur:
- Herhangi bir zamanda üst katmanda bulunan öğeler ve sıraları.
- Herhangi bir noktada yığının en üstündeki öğe.
Ayrıca, Geliştirici Araçları üst katman desteği, üst katman yığınındaki arka plan sözde öğesinin konumunu görselleştirmeye yardımcı olur. Bir ağaç öğesi olmasa da üst katmanın çalışma şeklinde önemli bir rol oynar ve geliştiriciler için faydalı olabilir.
Üst katman destek özellikleriyle şunları yapabilirsiniz:
- Herhangi bir zamanda üst katman yığınında hangi öğelerin bulunduğunu gözlemleyin. Üst katmana öğe eklendikçe veya üst katmandan öğe kaldırıldıkça, üst katman gösterim grubu dinamik bir şekilde değişir.
- Üst katman yığınındaki öğe konumunu görün.
- En üst katman veya öğelerden git ağaçta bulunan, üst katman temsil kapsayıcısındaki ve arka plandaki sözde öğeye arka plan sözde öğesi.
Bu özellikleri nasıl kullanacağınızı görelim.
Üst katman kapsayıcısı
Geliştirici Araçları, üst katman öğelerinin görselleştirmesine yardımcı olmak için öğeler ağacına bir üst katman kapsayıcısı ekler. Kapanış </html> etiketinden sonra gelir.
Bu kapsayıcı, üst katman grubundaki öğeleri istediğiniz zaman gözlemlemenize olanak tanır. Üst katman kapsayıcısı, üst katman öğelerine ve arka planlarına giden bağlantıların listesidir. Üst katmana öğe eklendikçe veya üst katmandan öğe kaldırıldıkça, üst katman gösterim grubu dinamik bir şekilde değişir.
Öğeler ağacındaki veya üst katman kapsayıcısındaki üst katman öğelerini bulmak için üst katman kapsayıcısındaki üst katman öğesi temsilinden öğe ağacındaki aynı öğeye giden ve arkadaki bağlantıları tıklayın.
Üst katman kapsayıcı öğesinden üst katman ağaç öğesine atlamak için üst katman kapsayıcıda bulunan öğenin yanında bulunan göster düğmesini tıklayın.
Üst katman ağaç öğesinden üst katman kapsayıcısındaki bağlantıya atlamak için öğenin yanındaki üst katman rozetini tıklayın.
Üst katman olanlar da dahil olmak üzere herhangi bir rozeti kapatabilirsiniz. Rozetleri devre dışı bırakmak için herhangi bir rozeti sağ tıklayın, Rozet ayarları'nı seçin ve gizlemek istediğiniz rozetlerin yanındaki onay işaretlerini kaldırın.
Üst katman grubundaki öğelerin sırası
Üst katman kapsayıcısı, öğeleri yığında göründükleri şekilde ancak ters sırada gösterir. Yığın öğesinin üst kısmı, üst katman kapsayıcısının öğe listesindeki son öğedir. Bu, üst katman kapsayıcı listesindeki son öğenin, dokümanda o sırada etkileşimde bulunabileceğiniz öğe olduğu anlamına gelir.
Ağaç öğelerinin yanındaki rozetler, öğelerin üst katmana ait olup olmadığını ve yığındaki bir öğenin konum numarasını içerip içermediğini gösterir.
Bu ekran görüntüsünde, üst katman yığını, ikinci öğe yığının en üstünde olmak üzere iki öğeden oluşmaktadır. İkinci öğeyi kaldırırsanız ilk öğe en üste taşınır.
Üst katman kapsayıcıdaki arka planlar
Yukarıda belirtildiği gibi, her üst katman öğesinin arka plan adı verilen bir CSS sözde öğesi vardır. Bu öğeyi biçimlendirebilirsiniz. Bu nedenle, öğeyi incelemek ve temsilini görmek de yararlı olacaktır.
Öğeler ağacında arka plan öğesi, ait olduğu öğenin kapanış etiketinden önce bulunur. Ancak üst katman kapsayıcıda bir arka plan bağlantısı, ait olduğu üst katman öğesinin hemen üzerinde listelenir.
DOM ağacında yapılan değişiklikler
Geliştirici Araçları'nda ayrı DOM ağacı öğeleri oluşturup yönetmekten sorumlu olan ElementsTreeElement sınıfı, üst katman kapsayıcısını uygulamak için yeterli değildi.
Üst katman kapsayıcısını ağaçta bir düğüm olarak görüntülemek için Geliştirici Araçları ağaç öğesi düğümleri oluşturan yeni bir sınıf ekledik. Daha önce, Geliştirici Araçları öğelerini oluşturmaktan sorumlu sınıf her TreeElement DOMNode ile, backendNodeId ve arka uçla ilgili başka özelliklere sahip bir sınıf ile başlatılıyordu. Sırasıyla backendNodeId, arka uçta atanır.
Üst katman öğelerinin bağlantılarının listesini içeren, normal bir ağaç öğesi düğümü gibi davranması gereken üst katman kapsayıcı düğümü. Ancak, bu düğüm "gerçek" değil DOM düğümünün ve arka ucun, üst katman kapsayıcı düğümünü oluşturması gerekmez.
En üst katmanı temsil eden bir ön uç düğümü oluşturmak için DOMNode olmadan oluşturulmuş yeni bir ön uç düğümü türü ekledik. Bu üst katman kapsayıcı öğesi, DOMNode öğesine sahip olmayan ilk ön uç düğümüdür; yani yalnızca ön uçta bulunur ve arka uç bunu "bilemez" hesap ekiplerinizle görüşün. Diğer düğümlerle aynı davranışa sahip olmak için ön uç düğümlerinin davranışından sorumlu olan UI.TreeOutline.TreeElement sınıfını genişleten yeni bir TopLayerContainer sınıfı oluşturduk.
İstenen yerleşimi elde etmek için, bir öğeyi oluşturan sınıf, <html> etiketinin sonraki eşdüzey öğe olarak TopLayerContainer öğesini ekler.
Yeni bir üst katman rozeti, öğenin üst katmanda olduğunu gösterir ve TopLayerContainer öğesindeki bu öğenin kısayoluna bağlantı sağlar.
İlk tasarım
İlk başta plan, öğelere ilişkin bir liste oluşturmak yerine üst katman öğelerini üst katman kapsayıcısına kopyalamaktı. Geliştirici Araçları'nda öğenin alt öğelerini getirme yönteminin çalışma şekli nedeniyle bu çözümü uygulamadık. Her öğede, alt öğeleri getirmek için kullanılan bir üst işaretçi vardır ve birden fazla işaretçinin olması mümkün değildir. Bu nedenle, düzgün bir şekilde genişleyen ve ağacın birden çok yerinde tüm alt öğeleri içeren bir düğüme sahip olamayız. Sistem genel olarak birbirinin aynısı alt ağaçlar düşünülerek tasarlanmamıştır.
Ulaştığımız güvenlik ihlali, bu düğümleri kopyalamak yerine ön uç DOM düğümlerine bağlantılar oluşturuyordu. Geliştirici Araçları'nda öğelere bağlantı oluşturmaktan sorumlu sınıf olan ShortcutTreeElement, UI.TreeOutline.TreeElement uzantısını genişletir. ShortcutTreeElement, diğer Geliştirici Araçları DOM ağacı öğeleriyle aynı davranışa sahiptir ancak arka uçta karşılık gelen bir düğüm yoktur ve ElementsTreeElement öğesine bağlantı veren bir düğme içerir.
Üst katman düğümüne giden her bir ShortcutTreeElement, Geliştirici Araçları DOM ağacındaki bir ::backdrop sözde öğesinin gösterimine bağlanan bir alt ShortcutTreeElement içerir.
İlk tasarım:
Chrome Geliştirici Araçları Protokolü (CDP) değişiklikleri
Üst katman desteğini uygulamak için Chrome Geliştirici Araçları Protokolü'nde (CDP) değişiklik yapılması gerekir. CDP, Geliştirici Araçları ile Chromium arasında bir iletişim protokolü görevi görür.
Şunları eklememiz gerekiyor:
- Ön uçtan herhangi bir zamanda çağrı yapmanızı sağlayan komut.
- Ön uçta arka uç tarafından tetiklenecek etkinlik.
CDP: DOM.getTopLayerElements komutu
Mevcut en üst katman öğelerini görüntülemek için, üst katmandaki öğelerin düğüm kimliklerinin listesini döndüren yeni bir deneysel CDP komutuna ihtiyacımız var. Geliştirici Araçları her açıldığında veya üst katman öğeleri değiştiğinde Geliştirici Araçları bu komutu çağırır. Komut aşağıdaki gibi görünür:
# 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 etkinlik
En üst katmandaki öğelerin güncel listesini almak için, deneysel bir CDP etkinliğini tetiklemek üzere üst katman öğelerinde yapılan her değişiklik gereklidir. Bu etkinlik, değişiklik ön ucuna bilgi verir ve daha sonra DOM.getTopLayerElements komutunu çağırıp yeni öğe listesini alır.
Etkinlik şöyle görünür:
# Called by the change of the top layer elements.
experimental event topLayerElementsUpdated
CDP ile ilgili dikkat edilmesi gereken noktalar
Üst katmanın CDP desteğinin nasıl uygulanacağıyla ilgili birçok seçenek bulunuyordu. Düşündüğümüz bir başka seçenek de, yalnızca bir üst katman öğesinin eklenmesi veya kaldırılması hakkında kullanıcı arabirimini bilgilendirmek yerine, üst katman öğelerinin listesini döndürecek bir etkinlik oluşturmaktı.
Alternatif olarak, komut yerine iki etkinlik de oluşturabiliriz: topLayerElementAdded ve topLayerElementRemoved. Bu durumda, bir öğe alırız ve kullanıcı arabirimindeki üst katman öğeleri dizisini yönetmemiz gerekir.
Şu anda, ön uç etkinliği güncellenen öğelerin listesini almak için getTopLayerElements komutunu çağırıyor. Bir etkinlik her tetiklendiğinde değişime neden olan bir öğe listesi veya belirli bir öğe gönderseydik komutu tek bir adımdan çağıramazdık.
Ancak bu durumda ön uç hangi öğelerin aktarılacağına ilişkin kontrolü kaybeder.
Bu şekilde uyguladık çünkü bize göre üst katman düğümlerinin ne zaman isteneceğine ön uç kararının karar vermesi daha iyi olacaktır. Örneğin, üst katman kullanıcı arayüzünde daraltılmışsa veya kullanıcı, öğe ağacının olmadığı bir Geliştirici Araçları paneli kullanıyorsa ağacın altında daha derinlere inebilecek ekstra düğümlere gerek yoktur.