browser_inspector_breadcrumbs_visibility.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test that the start and end buttons on the breadcrumb trail bring the right

// crumbs into the visible area, for both LTR and RTL

const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");

const TEST_URI = URL_ROOT + "doc_inspector_breadcrumbs_visibility.html";

const NODE_ONE = "div#aVeryLongIdToExceedTheBreadcrumbTruncationLimit";

const NODE_TWO = "div#anotherVeryLongIdToExceedTheBreadcrumbTruncationLimit";

const NODE_THREE = "div#aThirdVeryLongIdToExceedTheTruncationLimit";

const NODE_FOUR = "div#aFourthOneToExceedTheTruncationLimit";

const NODE_FIVE = "div#aFifthOneToExceedTheTruncationLimit";

const NODE_SIX = "div#aSixthOneToExceedTheTruncationLimit";

const NODE_SEVEN = "div#aSeventhOneToExceedTheTruncationLimit";

const NODES = [

  { action: "start", title: NODE_SIX },

  { action: "start", title: NODE_FIVE },

  { action: "start", title: NODE_FOUR },

  { action: "start", title: NODE_THREE },

  { action: "start", title: NODE_TWO },

  { action: "start", title: NODE_ONE },

  { action: "end", title: NODE_TWO },

  { action: "end", title: NODE_THREE },

  { action: "end", title: NODE_FOUR },

  { action: "end", title: NODE_FIVE },

  { action: "end", title: NODE_SIX },

];

add_task(async function () {

  const { inspector, toolbox } = await openInspectorForURL(TEST_URI);

  // No way to wait for scrolling to end (Bug 1172171)

  // Rather than wait a max time; limit test to instant scroll behavior

  inspector.breadcrumbs.arrowScrollBox.scrollBehavior = "instant";

  await toolbox.switchHost(Toolbox.HostType.WINDOW);

  const hostWindow = toolbox.win.parent;

  const originalWidth = hostWindow.outerWidth;

  const originalHeight = hostWindow.outerHeight;

  const inspectorResized = inspector.once("inspector-resize");

  hostWindow.resizeTo(640, 300);

  await inspectorResized;

  info("Testing transitions ltr");

  await pushPref("intl.l10n.pseudo", "");

  await testBreadcrumbTransitions(hostWindow, inspector);

  info("Testing transitions rtl");

  await pushPref("intl.l10n.pseudo", "bidi");

  await testBreadcrumbTransitions(hostWindow, inspector);

  hostWindow.resizeTo(originalWidth, originalHeight);

});

async function testBreadcrumbTransitions(hostWindow, inspector) {

  const breadcrumbs = inspector.panelDoc.getElementById(

    "inspector-breadcrumbs"

);

  const startBtn = breadcrumbs.querySelector(".scrollbutton-up");

  const endBtn = breadcrumbs.querySelector(".scrollbutton-down");

  const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner");

  const breadcrumbsUpdated = inspector.once("breadcrumbs-updated");

  info("Selecting initial node");

  await selectNode(NODE_SEVEN, inspector);

  // So just need to wait for a duration

  await breadcrumbsUpdated;

  const initialCrumb = container.querySelector("button[checked]");

is(

    isElementInViewport(hostWindow, initialCrumb),

    true,

    "initial element was visible"

);

  for (const node of NODES) {

    info("Checking for visibility of crumb " + node.title);

    if (node.action === "end") {

      info("Simulating click of end button");

      EventUtils.synthesizeMouseAtCenter(endBtn, {}, inspector.panelWin);

    } else if (node.action === "start") {

      info("Simulating click of start button");

      EventUtils.synthesizeMouseAtCenter(startBtn, {}, inspector.panelWin);

    await breadcrumbsUpdated;

    const selector = 'button[title="' + node.title + '"]';

    const relevantCrumb = container.querySelector(selector);

is(

      isElementInViewport(hostWindow, relevantCrumb),

      true,

      node.title + " crumb is visible"

);

function isElementInViewport(window, el) {

  const rect = el.getBoundingClientRect();

  return (

    rect.top >= 0 &&

    rect.left >= 0 &&

    rect.bottom <= window.innerHeight &&

    rect.right <= window.innerWidth

);

registerCleanupFunction(function () {

  // Restore the host type for other tests.

  Services.prefs.clearUserPref("devtools.toolbox.host");

});