mirror of
https://github.com/roytam1/basilisk55.git
synced 2026-05-26 15:02:46 +00:00
94 lines
2.7 KiB
JavaScript
94 lines
2.7 KiB
JavaScript
/* 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 {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
|
|
const {MdnDocsWidget} = require("devtools/client/shared/widgets/MdnDocsWidget");
|
|
const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
|
|
const XHTML_NS = "http://www.w3.org/1999/xhtml";
|
|
|
|
const TOOLTIP_WIDTH = 418;
|
|
const TOOLTIP_HEIGHT = 308;
|
|
|
|
/**
|
|
* Tooltip for displaying docs for CSS properties from MDN.
|
|
*
|
|
* @param {Document} toolboxDoc
|
|
* The toolbox document to attach the CSS docs tooltip.
|
|
*/
|
|
function CssDocsTooltip(toolboxDoc) {
|
|
this.tooltip = new HTMLTooltip(toolboxDoc, {
|
|
type: "arrow",
|
|
consumeOutsideClicks: true,
|
|
autofocus: true,
|
|
useXulWrapper: true,
|
|
stylesheet: "chrome://devtools/content/shared/widgets/mdn-docs.css",
|
|
});
|
|
this.widget = this.setMdnDocsContent();
|
|
this._onVisitLink = this._onVisitLink.bind(this);
|
|
this.widget.on("visitlink", this._onVisitLink);
|
|
|
|
// Initialize keyboard shortcuts
|
|
this.shortcuts = new KeyShortcuts({ window: this.tooltip.topWindow });
|
|
this._onShortcut = this._onShortcut.bind(this);
|
|
|
|
this.shortcuts.on("Escape", this._onShortcut);
|
|
}
|
|
|
|
CssDocsTooltip.prototype = {
|
|
/**
|
|
* Load CSS docs for the given property,
|
|
* then display the tooltip.
|
|
*/
|
|
show: function (anchor, propertyName) {
|
|
this.tooltip.once("shown", () => {
|
|
this.widget.loadCssDocs(propertyName);
|
|
});
|
|
this.tooltip.show(anchor);
|
|
},
|
|
|
|
hide: function () {
|
|
this.tooltip.hide();
|
|
},
|
|
|
|
_onShortcut: function (shortcut, event) {
|
|
if (!this.tooltip.isVisible()) {
|
|
return;
|
|
}
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
this.hide();
|
|
},
|
|
|
|
_onVisitLink: function () {
|
|
this.hide();
|
|
},
|
|
|
|
/**
|
|
* Set the content of this tooltip to the MDN docs widget. This is called when the
|
|
* tooltip is first constructed.
|
|
* The caller can use the MdnDocsWidget to update the tooltip's UI with new content
|
|
* each time the tooltip is shown.
|
|
*
|
|
* @return {MdnDocsWidget} the created MdnDocsWidget instance.
|
|
*/
|
|
setMdnDocsContent: function () {
|
|
let container = this.tooltip.doc.createElementNS(XHTML_NS, "div");
|
|
container.setAttribute("class", "mdn-container theme-body");
|
|
this.tooltip.setContent(container, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
|
|
return new MdnDocsWidget(container);
|
|
},
|
|
|
|
destroy: function () {
|
|
this.widget.off("visitlink", this._onVisitLink);
|
|
this.widget.destroy();
|
|
|
|
this.shortcuts.destroy();
|
|
this.tooltip.destroy();
|
|
}
|
|
};
|
|
|
|
module.exports = CssDocsTooltip;
|