/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";

// Bug 1295081 Test searchbox clear button's display behavior is correct

const XHTML = `
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:svg="http://www.w3.org/2000/svg">
    <body>
      <svg:svg width="100" height="100">
        <svg:clipPath>
          <svg:rect x="0" y="0" width="10" height="5"></svg:rect>
        </svg:clipPath>
        <svg:circle cx="0" cy="0" r="5"></svg:circle>
      </svg:svg>
    </body>
  </html>
`;

const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);

// Type "d" in inspector-searchbox, Enter [Back space] key and check if the
// clear button is shown correctly
add_task(async function () {
  const { inspector } = await openInspectorForURL(TEST_URI);
  const { searchBox, searchClearButton, search } = inspector;

  await focusSearchBoxUsingShortcut(inspector.panelWin);

  info("Type d and the clear button will be shown");

  const command = once(searchBox, "input");
  let onSearchProcessingDone =
    inspector.searchSuggestions.once("processing-done");
  EventUtils.synthesizeKey("c", {}, inspector.panelWin);
  await command;

  info("Waiting for search query to complete and getting the suggestions");
  await onSearchProcessingDone;

  ok(
    !searchClearButton.hidden,
    "The clear button is shown when some word is in searchBox"
  );

  onSearchProcessingDone = inspector.searchSuggestions.once("processing-done");
  EventUtils.synthesizeKey("VK_BACK_SPACE", {}, inspector.panelWin);
  await command;

  info("Waiting for search query to complete and getting the suggestions");
  await onSearchProcessingDone;

  ok(
    searchClearButton.hidden,
    "The clear button is hidden when no word is in searchBox"
  );

  info("Check that clear button is keyboard accessible");
  onSearchProcessingDone = inspector.searchSuggestions.once("processing-done");
  EventUtils.synthesizeKey("w", {}, inspector.panelWin);
  await onSearchProcessingDone;

  ok(
    !searchClearButton.hidden,
    "The clear button is shown when some word is in searchBox"
  );

  info("Focus clear button with Tab");
  EventUtils.synthesizeKey("VK_TAB", {}, inspector.panelWin);
  is(
    inspector.panelDoc.activeElement,
    searchClearButton,
    "Search clear button is focused"
  );

  info("Hit Enter to clear search input");
  const onSearchCleared = search.once("search-cleared");
  EventUtils.synthesizeKey("VK_RETURN", {}, inspector.panelWin);
  await onSearchCleared;
  is(searchBox.value, "", "input was cleared");
  is(
    inspector.panelDoc.activeElement,
    searchBox,
    "input is focused after hitting the clear button"
  );
});
