chore: use details/summary for datalayers boxes in browser

umap/static/umap/js/modules/browser.js

@@ -63,25 +63,19 @@ export default class Browser {
   }
 
   addDataLayer(datalayer, parent) {
-    let className = `datalayer ${datalayer.getHidableClass()}`
-    if (this.mode !== 'layers') className += ' show-list'
-    const [container, { headline, toolbox, toggle, label }] =
-      Utils.loadTemplateWithRefs(`
-      <div class="${className}" id="${this.datalayerId(datalayer)}">
-        <h5 data-ref=headline>
-          <i class="icon icon-16 datalayer-toggle-list" data-ref=toggle></i>
+    const open = this.mode !== 'layers' ? ' open' : ''
+    const [container, { headline, toolbox, label }] = Utils.loadTemplateWithRefs(`
+      <details class="datalayer ${datalayer.getHidableClass()}" id="${this.datalayerId(datalayer)}"${open}>
+        <summary data-ref=headline>
           <span data-ref=toolbox></span>
           <span class="datalayer-name" data-id="${datalayer.id}" data-ref=label></span>
           <span class="datalayer-counter"></span>
-        </h5>
+        </summary>
         <ul></ul>
-      </div>
+      </details>
     `)
     datalayer.renderToolbox(toolbox)
     parent.appendChild(container)
-    const toggleList = () => parent.classList.toggle('show-list')
-    toggle.addEventListener('click', toggleList)
-    label.addEventListener('click', toggleList)
     this.updateDatalayer(datalayer)
   }
 

umap/static/umap/map.css

@@ -547,12 +547,6 @@ a.umap-control-caption,
 .umap-browser .datalayer i {
     cursor: pointer;
 }
-.umap-browser .datalayer ul {
-    display: none;
-}
-.umap-browser .show-list ul {
-    display: block;
-}
 
 .umap-browser .off .feature {
     display: none;
@@ -567,7 +561,7 @@ a.umap-control-caption,
 .umap-browser.dark .datalayer ul {
     border: 1px solid #232729;
 }
-.umap-browser h5 {
+.umap-browser summary {
     margin-bottom: 0;
     overflow: hidden;
     padding-inline-start: 5px;
@@ -575,16 +569,10 @@ a.umap-control-caption,
     line-height: 30px;
     background-color: var(--color-lightGray);
 }
-.umap-browser .off h5 {
+.umap-browser .off summary {
     color: #b3b3b3;
 }
-.umap-browser.dark h5 {
-    background-color: #232729;
-    color: white;
-}
-.umap-browser h5 span {
-    margin-inline-start: 10px;
-}
+
 .umap-browser li {
     padding: 2px 0;
     white-space: nowrap;
@@ -627,9 +615,6 @@ a.umap-control-caption,
     margin-inline-end: 5px;
     background-position: -145px -70px;
 }
-.umap-browser .show-list .datalayer-toggle-list {
-    background-position: -145px -45px;
-}
 .umap-browser .filters summary {
     background: none;
     border: 1px solid var(--color-lightGray);
@@ -662,7 +647,7 @@ a.umap-control-caption,
     color: var(--text-color);
 }
 .umap-browser .main-toolbox {
-    padding-left: 4px; /* Align with toolbox below  */
+    padding-left: 1.3rem; /* Align with toolbox below  */
     border-top: 1px solid var(--color-mediumGray);
     margin-top: var(--box-margin);
     padding-top: 3px;

umap/tests/integration/test_edit_map.py

@@ -175,7 +175,7 @@ def test_sortkey_impacts_datalayerindex(map, live_server, page):
 
     # By default, features are sorted by name  (Third, Second, First)
     page.get_by_role("button", name="Open browser").click()
-    page.get_by_role("heading", name="Show/hide layer").locator("i").click()
+    page.locator(".umap-browser .datalayer-name").click()
 
     first_listed_feature = page.locator(".umap-browser .datalayer ul > li").nth(0)
     second_listed_feature = page.locator(".umap-browser .datalayer ul > li").nth(1)

umap/tests/integration/test_facets_browser.py

@@ -243,7 +243,7 @@ def test_facets_search_are_persistent_when_closing_panel(live_server, page, map)
 
     # Now let's filter
     odd.click()
-    expect(page.locator("summary")).to_have_attribute("data-badge", " ")
+    expect(page.locator(".filters summary")).to_have_attribute("data-badge", " ")
     expect(page.locator(".umap-control-browse")).to_have_attribute("data-badge", " ")
     expect(markers).to_have_count(2)
     expect(panel.get_by_text("Point 2")).to_be_hidden()
@@ -264,7 +264,7 @@ def test_facets_search_are_persistent_when_closing_panel(live_server, page, map)
     expect(panel.get_by_text("Point 3")).to_be_visible()
 
     # Close panel
-    expect(panel.locator("summary")).to_have_attribute("data-badge", " ")
+    expect(panel.locator(".filters summary")).to_have_attribute("data-badge", " ")
     expect(page.locator(".umap-control-browse")).to_have_attribute("data-badge", " ")
     panel.get_by_role("button", name="Close").click()
     page.get_by_role("button", name="Open browser").click()

umap/tests/integration/test_import.py

@@ -904,7 +904,7 @@ def test_import_from_datasets(page, live_server, tilelayer, settings):
     page.get_by_role("button", name="Import data", exact=True).click()
     expect(page.locator(".leaflet-marker-icon")).to_be_visible()
     page.get_by_role("button", name="Open browser").click()
-    expect(page.locator("h5").get_by_text("Good data")).to_be_visible()
+    expect(page.locator("summary").get_by_text("Good data")).to_be_visible()
 
 
 def test_import_osm_relation(tilelayer, live_server, page):

umap/tests/integration/test_map.py

@@ -1,4 +1,3 @@
-import os
 import re
 
 import pytest
@@ -46,7 +45,7 @@ def test_default_view_without_datalayer_should_use_default_center(
     page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
     # Hash is defined, so map is initialized
     expect(page).to_have_url(re.compile(r".*#7/48\..+/13\..+"))
-    layers = page.locator(".umap-browser .datalayer h5")
+    layers = page.locator(".umap-browser .datalayer summary")
     expect(layers).to_have_count(1)
 
 
@@ -60,7 +59,7 @@ def test_default_view_latest_without_datalayer_should_use_default_center(
     page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
     # Hash is defined, so map is initialized
     expect(page).to_have_url(re.compile(r".*#7/48\..+/13\..+"))
-    layers = page.locator(".umap-browser .datalayer h5")
+    layers = page.locator(".umap-browser .datalayer summary")
     expect(layers).to_have_count(1)
 
 
@@ -74,7 +73,7 @@ def test_default_view_data_without_datalayer_should_use_default_center(
     page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
     # Hash is defined, so map is initialized
     expect(page).to_have_url(re.compile(r".*#7/48\..+/13\..+"))
-    layers = page.locator(".umap-browser .datalayer h5")
+    layers = page.locator(".umap-browser .datalayer summary")
     expect(layers).to_have_count(1)
 
 
@@ -84,7 +83,7 @@ def test_default_view_latest_with_marker(map, live_server, datalayer, page):
     page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
     # Hash is defined, so map is initialized
     expect(page).to_have_url(re.compile(r".*#7/48\..+/14\..+"))
-    layers = page.locator(".umap-browser .datalayer h5")
+    layers = page.locator(".umap-browser .datalayer summary")
     expect(layers).to_have_count(1)
     expect(page.locator(".leaflet-popup")).to_be_visible()
 
@@ -113,7 +112,7 @@ def test_default_view_latest_with_line(map, live_server, page):
     map.save()
     page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
     expect(page).to_have_url(re.compile(r".*#8/48\..+/2\..+"))
-    layers = page.locator(".umap-browser .datalayer h5")
+    layers = page.locator(".umap-browser .datalayer summary")
     expect(layers).to_have_count(1)
 
 
@@ -144,7 +143,7 @@ def test_default_view_latest_with_polygon(map, live_server, page):
     map.save()
     page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
     expect(page).to_have_url(re.compile(r".*#8/48\..+/2\..+"))
-    layers = page.locator(".umap-browser .datalayer h5")
+    layers = page.locator(".umap-browser .datalayer summary")
     expect(layers).to_have_count(1)
 
 
@@ -173,7 +172,7 @@ def test_remote_layer_should_not_be_used_as_datalayer_for_created_features(
     toggle = page.get_by_role("button", name="Open browser")
     expect(toggle).to_be_visible()
     toggle.click()
-    layers = page.locator(".umap-browser .datalayer h5")
+    layers = page.locator(".umap-browser .datalayer summary")
     expect(layers).to_have_count(1)
     map_el = page.locator("#map")
     add_marker = page.get_by_title("Draw a marker")

umap/tests/integration/test_websocket_sync.py

@@ -397,7 +397,7 @@ def test_should_sync_datalayers(new_page, asgi_live_server, tilelayer):
 
     # Make sure this new marker is in Layer 2 for peerB
     # Show features for this layer in the brower.
-    peerB.get_by_role("heading", name="Layer 2").locator(".datalayer-name").click()
+    peerB.locator("summary").filter(has_text="Layer 2").click()
     expect(peerB.locator("li").filter(has_text="Layer 2")).to_be_visible()
     peerB.locator(".panel.left").get_by_role("button", name="Show/hide layer").nth(
         1
@@ -534,7 +534,7 @@ def test_create_and_sync_map(new_page, asgi_live_server, tilelayer, login, user)
 
     # Make sure only one layer has been created on peer B
     peerB.get_by_role("button", name="Open browser").click()
-    expect(peerB.locator("h5").get_by_text("Layer 1")).to_be_visible()
+    expect(peerB.locator("summary").get_by_text("Layer 1")).to_be_visible()
     peerB.get_by_role("button", name="Close").click()
 
     # Save and quit edit mode again