1 files changed, 110 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js
new file mode 100644
index 000000000..caee745c9
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js
@@ -0,0 +1,110 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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
+
+let { Toolbox } = require("devtools/client/framework/toolbox");
+
+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(function* () {
+  // This test needs specific initial size of the sidebar.
+  yield pushPref("devtools.toolsidebar-width.inspector", 350);
+  yield pushPref("devtools.toolsidebar-height.inspector", 150);
+
+  let { inspector, toolbox } = yield 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";
+
+  yield toolbox.switchHost(Toolbox.HostType.WINDOW);
+  let hostWindow = toolbox.win.parent;
+  let originalWidth = hostWindow.outerWidth;
+  let originalHeight = hostWindow.outerHeight;
+  hostWindow.resizeTo(640, 300);
+
+  info("Testing transitions ltr");
+  yield pushPref("intl.uidirection.en-US", "ltr");
+  yield testBreadcrumbTransitions(hostWindow, inspector);
+
+  info("Testing transitions rtl");
+  yield pushPref("intl.uidirection.en-US", "rtl");
+  yield testBreadcrumbTransitions(hostWindow, inspector);
+
+  hostWindow.resizeTo(originalWidth, originalHeight);
+});
+
+function* testBreadcrumbTransitions(hostWindow, inspector) {
+  let breadcrumbs = inspector.panelDoc.getElementById("inspector-breadcrumbs");
+  let startBtn = breadcrumbs.querySelector(".scrollbutton-up");
+  let endBtn = breadcrumbs.querySelector(".scrollbutton-down");
+  let container = breadcrumbs.querySelector(".html-arrowscrollbox-inner");
+  let breadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+
+  info("Selecting initial node");
+  yield selectNode(NODE_SEVEN, inspector);
+
+  // So just need to wait for a duration
+  yield breadcrumbsUpdated;
+  let initialCrumb = container.querySelector("button[checked]");
+  is(isElementInViewport(hostWindow, initialCrumb), true,
+     "initial element was visible");
+
+  for (let 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);
+    }
+
+    yield breadcrumbsUpdated;
+    let selector = "button[title=\"" + node.title + "\"]";
+    let relevantCrumb = container.querySelector(selector);
+    is(isElementInViewport(hostWindow, relevantCrumb), true,
+       node.title + " crumb is visible");
+  }
+}
+
+function isElementInViewport(window, el) {
+  let 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");
+});