tor-browser

browser_markup_scrollable_badge_click.js (5487B)

---

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

// Tests that the correct elements show up and get highlighted in the markup view when the
// scrollable badge is clicked.

const TEST_URI = `
 <style type="text/css">
   .parent {
       width: 200px;
       height: 200px;
       overflow: scroll;
   }
   .fixed {
       width: 50px;
       height: 50px;
   }
   .shift {
       margin-left: 300px;
   }
   .has-before::before {
     content: "-";
   }
 </style>
 <div id="top" class="parent">
   <div id="child1" class="fixed shift">
       <div id="child2" class="fixed"></div>
   </div>
   <div id="child3" class="shift has-before">
       <div id="child4" class="fixed"></div>
   </div>
 </div>
`;

add_task(async function () {
 const { inspector } = await openInspectorForURL(
   "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
 );

 const container = await getContainerForSelector("#top", inspector);
 const scrollableBage = container.elt.querySelector(".scrollable-badge");
 is(
   scrollableBage.getAttribute("aria-pressed"),
   "false",
   "Scrollable badge is not pressed by default"
 );

 info(
   "Clicking on the scrollable badge so that the overflow causing elements show up in the markup view."
 );
 scrollableBage.click();

 await waitForContainers(["#child1", "#child3", "#child4"], inspector);

 await checkOverflowHighlight(
   ["#child1", "#child4"],
   ["#child2", "#child3"],
   inspector
 );

 ok(scrollableBage.classList.contains("active"), "Scrollable badge is active");
 is(
   scrollableBage.getAttribute("aria-pressed"),
   "true",
   "Scrollable badge is pressed"
 );

 checkTelemetry("devtools.markup.scrollable.badge.clicked", "", 1, "scalar");

 info(
   "Changing CSS so elements update their overflow highlights accordingly."
 );
 await toggleClass(inspector);

 // By default, #child2 will not be visible in the markup view,
 // so expand its parent to make it visible.
 const child1 = await getContainerForSelector("#child1", inspector);
 await expandContainer(inspector, child1);

 await checkOverflowHighlight(
   ["#child2", "#child3"],
   ["#child1", "#child4"],
   inspector
 );

 info(
   "Clicking on the scrollable badge again so that all the overflow highlight gets removed."
 );
 scrollableBage.click();

 await checkOverflowHighlight(
   [],
   ["#child1", "#child2", "#child3", "#child4"],
   inspector
 );

 ok(
   !scrollableBage.classList.contains("active"),
   "Scrollable badge is not active"
 );
 is(
   scrollableBage.getAttribute("aria-pressed"),
   "false",
   "Scrollable badge is not pressed anymore"
 );

 checkTelemetry("devtools.markup.scrollable.badge.clicked", "", 2, "scalar");

 info("Triggering badge with the keyboard");
 scrollableBage.focus();
 EventUtils.synthesizeKey("VK_RETURN", {}, scrollableBage.ownerGlobal);
 await checkOverflowHighlight(
   ["#child2", "#child3"],
   ["#child1", "#child4"],
   inspector
 );
 ok(
   scrollableBage.classList.contains("active"),
   "badge can be activated with the keyboard"
 );
 is(
   scrollableBage.getAttribute("aria-pressed"),
   "true",
   "Scrollable badge is pressed"
 );

 EventUtils.synthesizeKey("VK_RETURN", {}, scrollableBage.ownerGlobal);
 await checkOverflowHighlight(
   [],
   ["#child1", "#child2", "#child3", "#child4"],
   inspector
 );
 ok(
   !scrollableBage.classList.contains("active"),
   "Scrollable badge can be deactivated with the keyboard"
 );
 is(
   scrollableBage.getAttribute("aria-pressed"),
   "false",
   "Scrollable badge is not pressed anymore"
 );

 info("Double-click on the scrollable badge");
 EventUtils.sendMouseEvent({ type: "dblclick" }, scrollableBage);
 ok(
   container.expanded,
   "Double clicking on the badge did not collapse the container"
 );
});

async function getContainerForSelector(selector, inspector) {
 const nodeFront = await getNodeFront(selector, inspector);
 return getContainerForNodeFront(nodeFront, inspector);
}

async function waitForContainers(selectors, inspector) {
 for (const selector of selectors) {
   info(`Wait for markup container of ${selector}`);
   await asyncWaitUntil(() => getContainerForSelector(selector, inspector));
 }
}

async function elementHasHighlight(selector, inspector) {
 const container = await getContainerForSelector(selector, inspector);
 return container?.tagState.classList.contains("overflow-causing-highlighted");
}

async function checkOverflowHighlight(
 selectorWithHighlight,
 selectorWithNoHighlight,
 inspector
) {
 for (const selector of selectorWithHighlight) {
   ok(
     await elementHasHighlight(selector, inspector),
     `${selector} contains overflow highlight`
   );
 }
 for (const selector of selectorWithNoHighlight) {
   ok(
     !(await elementHasHighlight(selector, inspector)),
     `${selector} does not contain overflow highlight`
   );
 }
}

async function toggleClass(inspector) {
 const onStateChanged = inspector.walker.once("overflow-change");

 await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
   content.document.querySelector("#child1").classList.toggle("fixed");
   content.document.querySelector("#child3").classList.toggle("fixed");
 });

 await onStateChanged;
}