/* 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 background-image URLs have image preview tooltips in the rule-view
// and computed-view

const PAGE_CONTENT = [
  '<style type="text/css">',
  '  body {',
  '    padding: 1em;',
  '    background-image: url(data:image/png;base64, );',
  '    background-repeat: repeat-y;',
  '    background-position: right top;',
  '  }',
  '  .test-element {',
  '    font-family: verdana;',
  '    color: #333;',
  '    background: url(chrome://global/skin/icons/warning-64.png) no-repeat left center;',
  '    padding-left: 70px;',
  '  }',
  '</style>',
  '<div class="test-element">test element</div>'
].join("\n");

add_task(function*() {
  yield addTab("data:text/html;charset=utf-8,rule view tooltip test");
  content.document.body.innerHTML = PAGE_CONTENT;
  let {toolbox, inspector, view} = yield openRuleView();

  info("Testing the background-image property on the body rule");
  yield testBodyRuleView(view);

  info("Selecting the test div node");
  yield selectNode(".test-element", inspector);
  info("Testing the the background property on the .test-element rule");
  yield testDivRuleView(view);

  info("Testing that image preview tooltips show even when there are fields being edited");
  yield testTooltipAppearsEvenInEditMode(view);

  info("Switching over to the computed-view");
  let onComputedViewReady = inspector.once("computed-view-refreshed");
  ({view} = yield openComputedView());
  yield onComputedViewReady;

  info("Testing that the background-image computed style has a tooltip too");
  yield testComputedView(view);
});

function* testBodyRuleView(view) {
  info("Testing tooltips in the rule view");
  let panel = view.tooltips.previewTooltip.panel;

  // Check that the rule view has a tooltip and that a XUL panel has been created
  ok(view.tooltips.previewTooltip, "Tooltip instance exists");
  ok(panel, "XUL panel exists");

  // Get the background-image property inside the rule view
  let {valueSpan} = getRuleViewProperty(view, "body", "background-image");
  let uriSpan = valueSpan.querySelector(".theme-link");

  yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);

  let images = panel.getElementsByTagName("image");
  is(images.length, 1, "Tooltip contains an image");
  ok(images[0].getAttribute("src").indexOf("iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHe") !== -1,
    "The image URL seems fine");
}

function* testDivRuleView(view) {
  let panel = view.tooltips.previewTooltip.panel;

  // Get the background property inside the rule view
  let {valueSpan} = getRuleViewProperty(view, ".test-element", "background");
  let uriSpan = valueSpan.querySelector(".theme-link");

  yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);

  let images = panel.getElementsByTagName("image");
  is(images.length, 1, "Tooltip contains an image");
  ok(images[0].getAttribute("src").startsWith("data:"), "Tooltip contains a data-uri image as expected");
}

function* testTooltipAppearsEvenInEditMode(view) {
  let panel = view.tooltips.previewTooltip.panel;

  info("Switching to edit mode in the rule view");
  let editor = yield turnToEditMode(view);

  info("Now trying to show the preview tooltip");
  let {valueSpan} = getRuleViewProperty(view, ".test-element", "background");
  let uriSpan = valueSpan.querySelector(".theme-link");
  yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);

  is(view.doc.activeElement, editor.input,
    "Tooltip was shown in edit mode, and inplace-editor still focused");
}

function turnToEditMode(ruleView) {
  let brace = ruleView.doc.querySelector(".ruleview-ruleclose");
  return focusEditableField(brace);
}

function* testComputedView(view) {
  let tooltip = view.tooltips.previewTooltip;
  ok(tooltip, "The computed-view has a tooltip defined");

  let panel = tooltip.panel;
  ok(panel, "The computed-view tooltip has a XUL panel");

  let {valueSpan} = getComputedViewProperty(view, "background-image");
  let uriSpan = valueSpan.querySelector(".theme-link");

  yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);

  let images = panel.getElementsByTagName("image");
  is(images.length, 1, "Tooltip contains an image");

  ok(images[0].getAttribute("src").startsWith("data:"), "Tooltip contains a data-uri in the computed-view too");
}
