summaryrefslogtreecommitdiffstats
path: root/devtools/client/webconsole/test/browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js
blob: f2efd79227163f72793cb31750a5459ebfba97ac (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* 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";

const TEST_URI = "http://example.com/browser/devtools/client/webconsole/test" +
                 "/test-bug-782653-css-errors.html";

var nodes, hud, StyleEditorUI;

add_task(function* () {
  yield loadTab(TEST_URI);

  hud = yield openConsole();

  let styleEditor = yield testViewSource();
  yield onStyleEditorReady(styleEditor);

  nodes = hud = StyleEditorUI = null;
});

function testViewSource() {
  let deferred = promise.defer();

  waitForMessages({
    webconsole: hud,
    messages: [{
      text: "\u2018font-weight\u2019",
      category: CATEGORY_CSS,
      severity: SEVERITY_WARNING,
    },
    {
      text: "\u2018color\u2019",
      category: CATEGORY_CSS,
      severity: SEVERITY_WARNING,
    }],
  }).then(([error1Rule, error2Rule]) => {
    let error1Msg = [...error1Rule.matched][0];
    let error2Msg = [...error2Rule.matched][0];
    nodes = [error1Msg.querySelector(".message-location .frame-link"),
             error2Msg.querySelector(".message-location .frame-link")];
    ok(nodes[0], ".frame-link node for the first error");
    ok(nodes[1], ".frame-link node for the second error");

    let target = TargetFactory.forTab(gBrowser.selectedTab);
    let toolbox = gDevTools.getToolbox(target);
    toolbox.once("styleeditor-selected", (event, panel) => {
      StyleEditorUI = panel.UI;
      deferred.resolve(panel);
    });

    EventUtils.sendMouseEvent({ type: "click" }, nodes[0].querySelector(".frame-link-filename"));
  });

  return deferred.promise;
}

function onStyleEditorReady(panel) {
  let deferred = promise.defer();

  let win = panel.panelWindow;
  ok(win, "Style Editor Window is defined");
  ok(StyleEditorUI, "Style Editor UI is defined");

  function fireEvent(toolbox, href, line) {
    toolbox.once("styleeditor-selected", function (evt) {
      info(evt + " event fired");

      checkStyleEditorForSheetAndLine(href, line - 1).then(deferred.resolve);
    });

    EventUtils.sendMouseEvent({ type: "click" }, nodes[1].querySelector(".frame-link-filename"));
  }

  waitForFocus(function () {
    info("style editor window focused");

    let href = nodes[0].getAttribute("data-url");
    let line = nodes[0].getAttribute("data-line");
    ok(line, "found source line");

    checkStyleEditorForSheetAndLine(href, line - 1).then(function () {
      info("first check done");

      let target = TargetFactory.forTab(gBrowser.selectedTab);
      let toolbox = gDevTools.getToolbox(target);

      href = nodes[1].getAttribute("data-url");
      line = nodes[1].getAttribute("data-line");
      ok(line, "found source line");

      toolbox.selectTool("webconsole").then(function () {
        info("webconsole selected");
        fireEvent(toolbox, href, line);
      });
    });
  }, win);

  return deferred.promise;
}

function checkStyleEditorForSheetAndLine(href, line) {
  let foundEditor = null;
  for (let editor of StyleEditorUI.editors) {
    if (editor.styleSheet.href == href) {
      foundEditor = editor;
      break;
    }
  }

  ok(foundEditor, "found style editor for " + href);
  return performLineCheck(foundEditor, line);
}

function performLineCheck(editor, line) {
  let deferred = promise.defer();

  function checkForCorrectState() {
    is(editor.sourceEditor.getCursor().line, line,
       "correct line is selected");
    is(StyleEditorUI.selectedStyleSheetIndex, editor.styleSheet.styleSheetIndex,
       "correct stylesheet is selected in the editor");

    executeSoon(deferred.resolve);
  }

  info("wait for source editor to load");

  // Get out of the styleeditor-selected event loop.
  executeSoon(() => {
    editor.getSourceEditor().then(() => {
      // Get out of the editor's source-editor-load event loop.
      executeSoon(checkForCorrectState);
    });
  });

  return deferred.promise;
}