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

"use strict";

// Test editing various markup-containers' attribute fields, in particular
// attributes with long values and quotes

const TEST_URL = URL_ROOT + "doc_markup_edit.html";
/*eslint-disable */
const LONG_ATTRIBUTE =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const LONG_ATTRIBUTE_COLLAPSED =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEF\u2026UVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ";
/* eslint-enable */

add_task(async function () {
  const { inspector } = await openInspectorForURL(TEST_URL);

  await inspector.markup.expandAll();
  await testCollapsedLongAttribute(inspector);
  await testModifyInlineStyleWithQuotes(inspector);
  await testEditingAttributeWithMixedQuotes(inspector);
});

async function testCollapsedLongAttribute(inspector) {
  info("Try to modify the collapsed long attribute, making sure it expands.");

  info("Adding test attributes to the node");
  let onMutation = inspector.once("markupmutation");
  await setContentPageElementAttribute("#node24", "class", "");
  await onMutation;

  onMutation = inspector.once("markupmutation");
  await setContentPageElementAttribute("#node24", "data-long", LONG_ATTRIBUTE);
  await onMutation;

  await assertAttributes("#node24", {
    id: "node24",
    class: "",
    "data-long": LONG_ATTRIBUTE,
  });

  const { editor } = await focusNode("#node24", inspector);
  const attr = editor.attrElements.get("data-long").querySelector(".editable");

  // Check to make sure it has expanded after focus
  attr.focus();
  EventUtils.sendKey("return", inspector.panelWin);
  const input = inplaceEditor(attr).input;
  is(input.value, `data-long="${LONG_ATTRIBUTE}"`);
  EventUtils.sendKey("escape", inspector.panelWin);

  setEditableFieldValue(attr, input.value + ' data-short="ABC"', inspector);
  await inspector.once("markupmutation");

  const visibleAttrText = editor.attrElements
    .get("data-long")
    .querySelector(".attr-value").textContent;
  is(visibleAttrText, LONG_ATTRIBUTE_COLLAPSED);

  await assertAttributes("#node24", {
    id: "node24",
    class: "",
    "data-long": LONG_ATTRIBUTE,
    "data-short": "ABC",
  });
}

async function testModifyInlineStyleWithQuotes(inspector) {
  info('Modify inline style containing "');

  await assertAttributes("#node26", {
    id: "node26",
    style:
      'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F");',
  });

  const onMutated = inspector.once("markupmutation");
  const { editor } = await focusNode("#node26", inspector);
  const attr = editor.attrElements.get("style").querySelector(".editable");

  attr.focus();
  EventUtils.sendKey("return", inspector.panelWin);

  const input = inplaceEditor(attr).input;
  let value = input.value;

  is(
    value,
    "style='background-image: url(\"moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F\");'",
    "Value contains actual double quotes"
  );

  value = value.replace(/mozilla\.org/, "mozilla.com");
  input.value = value;

  EventUtils.sendKey("return", inspector.panelWin);

  await onMutated;

  await assertAttributes("#node26", {
    id: "node26",
    style:
      'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.com%2F");',
  });
}

async function testEditingAttributeWithMixedQuotes(inspector) {
  info("Modify class containing \" and '");

  await assertAttributes("#node27", {
    id: "node27",
    class: "Double \" and single '",
  });

  const onMutated = inspector.once("markupmutation");
  const { editor } = await focusNode("#node27", inspector);
  const attr = editor.attrElements.get("class").querySelector(".editable");

  attr.focus();
  EventUtils.sendKey("return", inspector.panelWin);

  const input = inplaceEditor(attr).input;
  let value = input.value;

  is(value, 'class="Double " and single \'"', "Value contains "");

  value = value.replace(/Double/, """).replace(/single/, "'");
  input.value = value;

  EventUtils.sendKey("return", inspector.panelWin);

  await onMutated;

  await assertAttributes("#node27", {
    id: "node27",
    class: "\" \" and ' '",
  });
}