/* 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"; var EventEmitter = require("resource://devtools/shared/event-emitter.js"); var { StyleEditorUI } = ChromeUtils.importESModule( "resource://devtools/client/styleeditor/StyleEditorUI.sys.mjs" ); var { getString } = ChromeUtils.importESModule( "resource://devtools/client/styleeditor/StyleEditorUtil.sys.mjs" ); var StyleEditorPanel = function StyleEditorPanel(panelWin, toolbox, commands) { EventEmitter.decorate(this); this._toolbox = toolbox; this._commands = commands; this._panelWin = panelWin; this._panelDoc = panelWin.document; this._showError = this._showError.bind(this); }; exports.StyleEditorPanel = StyleEditorPanel; StyleEditorPanel.prototype = { get panelWindow() { return this._panelWin; }, /** * open is effectively an asynchronous constructor */ async open(options) { // Initialize the CSS properties database. const { cssProperties } = await this._toolbox.target.getFront( "cssProperties" ); // Initialize the UI this.UI = new StyleEditorUI( this._toolbox, this._commands, this._panelDoc, cssProperties ); this.UI.on("error", this._showError); this.UI.on("reloaded", () => this.emit("reloaded")); await this.UI.initialize(options); return this; }, /** * Show an error message from the style editor in the toolbox * notification box. * * @param {string} data * The parameters to customize the error message */ _showError(data) { if (!this._toolbox) { // could get an async error after we've been destroyed return; } let errorMessage = getString(data.key); if (data.append) { errorMessage += " " + data.append; } const notificationBox = this._toolbox.getNotificationBox(); const notification = notificationBox.getNotificationWithValue("styleeditor-error"); let level = notificationBox.PRIORITY_CRITICAL_LOW; if (data.level === "info") { level = notificationBox.PRIORITY_INFO_LOW; } else if (data.level === "warning") { level = notificationBox.PRIORITY_WARNING_LOW; } if (!notification) { notificationBox.appendNotification( errorMessage, "styleeditor-error", "", level ); } }, /** * Select a stylesheet. * * @param {StyleSheetResource} stylesheet * The resource for the stylesheet to find and select in editor. * @param {number} line * Line number to jump to after selecting. One-indexed * @param {number} col * Column number to jump to after selecting. One-indexed * @return {Promise} * Promise that will resolve when the editor is selected and ready * to be used. */ selectStyleSheet(stylesheet, line, col) { if (!this.UI) { return null; } return this.UI.selectStyleSheet(stylesheet, line - 1, col ? col - 1 : 0); }, /** * Given a location in an original file, open that file in the editor. * * @param {string} originalId * The original "sourceId" returned from the sourcemap worker. * @param {number} line * Line number to jump to after selecting. One-indexed * @param {number} col * Column number to jump to after selecting. One-indexed * @return {Promise} * Promise that will resolve when the editor is selected and ready * to be used. */ selectOriginalSheet(originalId, line, col) { if (!this.UI) { return null; } const originalSheet = this.UI.getOriginalSourceSheet(originalId); return this.UI.selectStyleSheet(originalSheet, line - 1, col ? col - 1 : 0); }, getStylesheetResourceForGeneratedURL(url) { if (!this.UI) { return null; } return this.UI.getStylesheetResourceForGeneratedURL(url); }, /** * Destroy the style editor. */ destroy() { if (this._destroyed) { return; } this._destroyed = true; this._toolbox = null; this._panelWin = null; this._panelDoc = null; this.UI.destroy(); this.UI = null; }, }; ChromeUtils.defineLazyGetter( StyleEditorPanel.prototype, "strings", function () { return Services.strings.createBundle( "chrome://devtools/locale/styleeditor.properties" ); } );