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
|
/* 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";
loader.lazyRequireGetter(
this,
"openDocLink",
"resource://devtools/client/shared/link.js",
true
);
class InactiveCssTooltipHelper {
constructor() {
this.addTab = this.addTab.bind(this);
}
/**
* Fill the tooltip with inactive CSS information.
*
* @param {String} propertyName
* The property name to be displayed in bold.
* @param {String} text
* The main text, which follows property name.
*/
async setContent(data, tooltip) {
const fragment = this.getTemplate(data, tooltip);
const { doc } = tooltip;
tooltip.panel.innerHTML = "";
tooltip.panel.addEventListener("click", this.addTab);
tooltip.once("hidden", () => {
tooltip.panel.removeEventListener("click", this.addTab);
});
// Because Fluent is async we need to manually translate the fragment and
// then insert it into the tooltip. This is needed in order for the tooltip
// to size to the contents properly and for tests.
await doc.l10n.translateFragment(fragment);
doc.l10n.pauseObserving();
tooltip.panel.appendChild(fragment);
doc.l10n.resumeObserving();
// Size the content.
tooltip.setContentSize({ width: 267, height: Infinity });
}
/**
* Get the template that the Fluent string will be merged with. This template
* looks something like this but there is a variable amount of properties in the
* fix section:
*
* <div class="devtools-tooltip-inactive-css">
* <p data-l10n-id="inactive-css-not-grid-or-flex-container"
* data-l10n-args="{"property":"align-content"}">
* </p>
* <p data-l10n-id="inactive-css-not-grid-or-flex-container-fix">
* <span data-l10n-name="link" class="link"></span>
* </p>
* </div>
*
* @param {Object} data
* An object in the following format: {
* fixId: "inactive-css-not-grid-item-fix-2", // Fluent id containing the
* // Inactive CSS fix.
* msgId: "inactive-css-not-grid-item", // Fluent id containing the
* // Inactive CSS message.
* property: "color", // Property name
* }
* @param {HTMLTooltip} tooltip
* The tooltip we are targetting.
*/
getTemplate(data, tooltip) {
const XHTML_NS = "http://www.w3.org/1999/xhtml";
const { fixId, msgId, property, display, learnMoreURL } = data;
const { doc } = tooltip;
const documentURL =
learnMoreURL || `https://developer.mozilla.org/docs/Web/CSS/${property}`;
this._currentTooltip = tooltip;
this._currentUrl = `${documentURL}?utm_source=devtools&utm_medium=inspector-inactive-css`;
const templateNode = doc.createElementNS(XHTML_NS, "template");
// eslint-disable-next-line
templateNode.innerHTML = `
<div class="devtools-tooltip-inactive-css">
<p data-l10n-id="${msgId}"
data-l10n-args='${JSON.stringify({ property, display })}'>
</p>
<p data-l10n-id="${fixId}">
<span data-l10n-name="link" class="link"></span>
</p>
</div>`;
return doc.importNode(templateNode.content, true);
}
/**
* Hide the tooltip, open `this._currentUrl` in a new tab and focus it.
*
* @param {DOMEvent} event
* The click event originating from the tooltip.
*
*/
addTab(event) {
// The XUL panel swallows click events so handlers can't be added directly
// to the link span. As a workaround we listen to all click events in the
// panel and if a link span is clicked we proceed.
if (event.target.className !== "link") {
return;
}
const tooltip = this._currentTooltip;
tooltip.hide();
openDocLink(this._currentUrl);
}
destroy() {
this._currentTooltip = null;
this._currentUrl = null;
}
}
module.exports = InactiveCssTooltipHelper;
|
