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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
const {
HTMLTooltip,
} = require("resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js");
const XHTML_NS = "http://www.w3.org/1999/xhtml";
const L10N = new LocalizationHelper(
"devtools/client/locales/inspector.properties"
);
/**
* Tooltip displayed for when a CSS property is selected/highlighted.
* TODO: For now, the tooltip content only shows "No Associated Rule". In Bug 1528288,
* we will be implementing content for showing the source CSS rule.
*/
class RulePreviewTooltip {
constructor(doc) {
this.show = this.show.bind(this);
this.destroy = this.destroy.bind(this);
// Initialize tooltip structure.
this._tooltip = new HTMLTooltip(doc, {
type: "arrow",
consumeOutsideClicks: true,
useXulWrapper: true,
});
this.container = doc.createElementNS(XHTML_NS, "div");
this.container.className = "rule-preview-tooltip-container";
this.message = doc.createElementNS(XHTML_NS, "span");
this.message.className = "rule-preview-tooltip-message";
this.message.textContent = L10N.getStr(
"rulePreviewTooltip.noAssociatedRule"
);
this.container.appendChild(this.message);
// TODO: Implement structure for showing the source CSS rule.
this._tooltip.panel.innerHTML = "";
this._tooltip.panel.appendChild(this.container);
this._tooltip.setContentSize({ width: "auto", height: "auto" });
}
/**
* Shows the tooltip on a given element.
*
* @param {Element} element
* The target element to show the tooltip with.
*/
show(element) {
element.addEventListener("mouseout", () => this._tooltip.hide());
this._tooltip.show(element);
}
destroy() {
this._tooltip.destroy();
this.container = null;
this.message = null;
}
}
module.exports = RulePreviewTooltip;
|
