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 üst katman öğelerinin ne olduğu, Üst katman öğelerini içeren DOM yapısını anlamak ve hata ayıklamak için Geliştirici Araçları'nın en üst katman içeriğini görselleştirmeye nasıl yardımcı olduğu ve DevTools üst katman desteğinin nasıl uygulandığı açıklanmaktadır.
Üst katman ve üst katman öğeleri nelerdir?
Bir <dialog>yı kalıcı iletişim kutusu olarak açtığınızda dahili olarak tam olarak ne olur? 🤔
Bir üst katmana yerleştirilir. Üst katman içeriği, diğer tüm içeriklerin üzerinde oluşturulur. Örneğin, kalıcı bir iletişim kutusunun diğer tüm DOM içeriğinin üstünde görünmesi gerekir. Dolayısıyla, tarayıcı, yazarları Z-endeksiyle manuel olarak savaşmaya zorlamak yerine, bu öğeyi otomatik olarak bir "üst katman"da oluşturur. En yüksek Z-endeksine sahip bir öğenin üzerinde bile bir üst katman öğesi görünür.
Üst katman "en yüksek yığma katman" olarak tanımlanabilir. Her dokümanın ilişkili tek bir görünümü ve dolayısıyla tek bir üst katmanı vardır. Birden çok öğe aynı anda üst katmanın içinde olabilir. Bu durumda birbirlerinin üzerine yığılırlar ve sonuncusu en üstte yer alır. Diğer bir deyişle, üst katman öğelerinin tümü, üst katmanda bir son giren, ilk çıkar (LIFO) yığını içine 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:
popover'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>
Burada, arka planlarına stil uygulanmış iki iletişim kutusunu içeren bir demo gösterilmektedir (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.
Ü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 oluşturulan görüntü alanı boyutunda bir kutudur. ::backdrop sözde öğesi, üst katmanda en üstte yer alan öğenin altında bulunan her şeyi gizlemeyi, stilini belirlemeyi veya tamamen gizlemeyi mümkün kılar.
Birden çok öğe modeli yaptığınızda, tarayıcı arka planı bu tür öğelerin hemen altına ve diğer tam ekran öğelerinin üstüne çizer.
Arka plan stilini şu şekilde ayarlayabilirsiniz:
/* 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?
Üst katmandaki her öğe, bir üst katman yığınına ait olan bir arka plana sahiptir. Bu arka planlar birbiriyle üst üste gelecek şekilde tasarlandığından, bir arka planın opaklığı %100 değilse altındaki arka planlar görünür.
Yalnızca üst katman yığınındaki ilk arka planın görünür olması gerekiyorsa bunu, üst katman yığınındaki öğe tanımlayıcılarını izleyerek 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 da kaldırılır.
Bu örnek demodaki kodu inceleyin:
Geliştirici Araçları'nda üst katman destek tasarımı
Üst katman için Geliştirici Araçları desteği, geliştiricilerin üst katman kavramını anlamasına ve üst katman içeriğinin nasıl değiştiğini görselleştirmesine yardımcı olur. Bu özellikler, geliştiricilerin aşağıdakileri tanımlamasına yardımcı olur:
- Herhangi bir zamanda üst katmandaki öğeler ve bunların sırası.
- Herhangi bir noktada grubun en üstündeki öğe.
Ayrıca, DevTools üst katman desteği sayesinde üst katman yığınındaki arka plan sözde öğesinin konumunun görselleştirilmesine yardımcı oluyor. Bir ağaç öğesi olmasa da, üst katmanın çalışma şeklinde önemli bir rol oynar ve geliştiriciler için yararlı olabilir.
Üst katman desteği özellikleriyle şunları yapabilirsiniz:
- Herhangi bir zamanda hangi öğelerin üst katman yığınında olduğunu gözlemleyin. Üst katman gösterim yığını, üst katmana öğe eklendiğinde veya katmandan öğe çıkarıldıkça dinamik olarak değişir.
- Üst katman yığınındaki öğe konumuna bakın.
- Ağaçta en üstteki katman öğesinin veya öğelerin arka plan sözde öğesinden, üst katman gösterim kapsayıcısındaki öğeye veya arka plan sözde öğesine atlayın.
Bu özellikleri nasıl kullanabileceğimize göz atalım.
Üst katman kapsayıcısı
Geliştirici Araçları, üst katman öğelerinin görselleştirilmesine yardımcı olmak için öğe ağacına bir üst katman kapsayıcısı ekler. </html> kapanış etiketinden sonra yer alır.
Bu kapsayıcı, üst katman yığınındaki öğeleri istediğiniz zaman gözlemlemenizi sağlar. Üst katman kapsayıcısı, en üst katmandaki öğelere ve bunların arka planlarına yönelik bağlantıların bir listesidir. Üst katman gösterim yığını, üst katmana öğe eklendiğinde veya katmandan öğe çıkarıldıkça dinamik olarak değişir.
Öğe ağacında veya en üst katman kapsayıcısında yer alan üst katman öğelerini bulmak için üst katman kapsayıcısındaki en üst katman öğesi gösteriminden öğe ağacında ve arkadaki aynı öğeye giden bağlantıları tıklayın.
Üst katman kapsayıcı öğesinden üst katman ağaç öğesine atlamak için üst katman kapsayıcısında öğenin yanında bulunan göster düğmesini tıklayın.
En üstteki 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 da dahil olmak üzere tüm rozetleri 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 kutularının işaretini kaldırın.
Öğeler üst katman yığınına göre sıralanır
Üst katman kapsayıcısı, öğeleri yığında göründükleri şekilde ancak ters sırada gösterir. Yığın öğesinin en üst kısmı, üst katman kapsayıcısının öğe listesindeki son öğedir. Diğer bir deyişle, üst katman kapsayıcı listesindeki son öğe, şu anda dokümanda etkileşimde bulunabileceğiniz öğedir.
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ı iki öğeden oluşur ve ikinci öğe grubun en üstünde yer alır. İkinci öğeyi kaldırırsanız ilk öğe en üste taşınır.
Üst katman kapsayıcısındaki arka planlar
Yukarıda belirtildiği gibi, her üst katman öğesinde arka plan adı verilen bir CSS sözde öğesi bulunur. Bu öğeye stil ekleyebilirsiniz. Bu nedenle, incelemeniz ve temsilini görmeniz de faydalı olur.
Öğe ağacında bir arka plan öğesi, ait olduğu öğenin kapanış etiketinden önce yer alır. Ancak üst katman kapsayıcısında, ait olduğu üst katman öğesinin hemen üzerinde bir arka plan bağlantısı listelenir.
DOM ağacındaki değişiklikler
Geliştirici Araçları'nda ayrı ayrı DOM ağacı öğeleri oluşturmaktan ve yönetmekten sorumlu sınıf olan ElementsTreeElement, bir üst katman kapsayıcısı 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ç öğe düğümleri oluşturan yeni bir sınıf ekledik. Önceden, Geliştirici Araçları öğe ağacını oluşturmaktan sorumlu sınıf, her TreeElement öğesini bir DOMNode ile başlatıyordu. Bu, backendNodeId ve arka uçla ilgili diğer özelliklere sahip bir sınıftır. Ardından, arka uçta backendNodeId atandı.
Normal bir ağaç öğesi düğümü gibi davranması için gereken, üst katman öğelerine yönelik bağlantıların bir listesini içeren üst katman kapsayıcı düğümü. Ancak bu düğüm "gerçek" bir DOM düğümü değildir ve arka ucun, üst katman kapsayıcı düğümünü oluşturması gerekmez.
Üst katmanı temsil eden bir ön uç düğümü oluşturmak için DOMNode olmadan oluşturulan yeni bir ön uç düğümü türü ekledik. Bu üst katman kapsayıcı öğesi, bir DOMNode içermeyen ilk ön uç düğümüdür. Yani yalnızca ön uçta bulunur ve arka uç bu düğümden haberdar olmaz. 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, TopLayerContainer öğesini <html> etiketinin sonraki kardeş öğesi olarak ekler.
Yeni üst katman rozeti, öğenin üst katmanda olduğunu gösterir ve TopLayerContainer öğesinde bu öğenin kısayolunun bağlantısı olarak işlev görür.
İlk tasarım
Plan başlangıçta, öğelere ilişkin bir bağlantı listesi oluşturmak yerine, üst katmandaki öğeleri en üst katman kapsayıcısına kopyalamaktı. Bu çözümü uygulamamızın nedeni, öğenin alt öğelerinin getirilmesinin Geliştirici Araçları'ndaki çalışma şeklidir. Her öğenin, alt öğeleri getirmek için kullanılan bir üst işaretçisi vardır ve birden fazla işaretçiye sahip olmak mümkün değildir. Bu nedenle, ağaçta birden çok yerde bulunan ve tüm alt öğeleri düzgün bir şekilde genişleten ve içeren bir düğüme sahip olamayız. Genel olarak sistem, yinelenen alt ağaçlar göz önünde bulundurularak oluşturulmamıştır.
Ulaştığımız uzlaşma, bu düğümleri kopyalamak yerine ön uç DOM düğümlerine bağlantılar oluşturmaktı. Geliştirici Araçları'nda öğelere bağlantılar oluşturmaktan sorumlu sınıf, UI.TreeOutline.TreeElement sınıfını genişleten ShortcutTreeElement'tir. 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 ve ElementsTreeElement öğesine bağlantı veren bir düğme yoktur.
Üst katman düğümündeki her ShortcutTreeElement, Geliştirici Araçları DOM ağacındaki bir ::backdrop sözde öğesinin temsiline bağlanan bir alt ShortcutTreeElement öğesine sahiptir.
İ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şiklikler yapılması gerekir. CDP, Geliştirici Araçları ile Chromium arasında bir iletişim protokolü olarak işlev görür.
Şunu eklememiz gerekir:
- Herhangi bir zamanda ön uçtan çağırmak için kullanılacak bir komut.
- Ön uçta arka uç tarafından tetiklenecek etkinlik.
CDP: DOM.getTopLayerElements komutu
Mevcut ü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 vardır. DevTools, Geliştirici Araçları açıldığında veya üst katman öğeleri değiştiğinde bu komutu çağırır. Komut şu şekilde 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, üst katman öğelerinde yapılan her değişikliğin deneysel bir CDP etkinliğini tetiklemesi gerekir. Bu etkinlik, değişikliği ön ucuna bildirir. Bu değişiklik, DOM.getTopLayerElements komutunu çağırır ve yeni öğeler listesini alır.
Etkinlik aşağıdaki gibi 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 uygulanabileceğiyle ilgili birden fazla seçenek vardı. Üzerinde düşündüğümüz bir başka seçenek de, yalnızca kullanıcı arabirimine bir üst katman öğesinin eklenmesi veya kaldırılmasıyla ilgili bilgi vermek yerine, en üst katmandaki öğelerin listesini döndürecek bir etkinlik oluşturmaktı.
Alternatif olarak, şu komut yerine iki etkinlik oluşturabiliriz: topLayerElementAdded ve topLayerElementRemoved. Bu durumda, bir öğe alabiliriz ve kullanıcı arabiriminde üst katman öğeleri dizisini yönetmemiz gerekir.
Şu anda bir ön uç etkinliği, güncellenen öğelerin listesini almak için getTopLayerElements komutunu çağırır. Bir etkinlik her tetiklendiğinde değişikliğe neden olan öğelerin listesini veya belirli bir öğeyi gönderirsek, komutu çağırmak zorunda kalmadan tek bir adımdan kaçınabiliriz.
Ancak bu durumda, ön uç hangi öğelerin aktarılacağı üzerindeki kontrolünü kaybeder.
Bu yaklaşımı bu şekilde uyguladık, çünkü bize göre, üst katman düğümlerini ne zaman isteyeceğine ön ucun karar vermesi daha iyi olacak. Örneğin, üst katman kullanıcı arayüzünde daraltılmışsa veya kullanıcı, öğe ağacı içermeyen bir Geliştirici Araçları paneli kullanıyorsa ağacın daha derinlerine inebilecek ekstra düğümler almaya gerek yoktur.