2013-04-25 20:46:13 +04:00
|
|
|
/* vim:set ts=2 sw=2 sts=2 et: */
|
|
|
|
/* 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";
|
|
|
|
|
|
|
|
this.EXPORTED_SYMBOLS = ["StyleEditorUI"];
|
|
|
|
|
|
|
|
const Ci = Components.interfaces;
|
|
|
|
const Cu = Components.utils;
|
|
|
|
|
2015-02-18 05:39:00 +03:00
|
|
|
const {require, loader} = Cu.import("resource://devtools/shared/Loader.jsm", {});
|
|
|
|
const Services = require("Services");
|
|
|
|
const {NetUtil} = Cu.import("resource://gre/modules/NetUtil.jsm", {});
|
|
|
|
const {OS} = Cu.import("resource://gre/modules/osfile.jsm", {});
|
|
|
|
const {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
|
|
|
|
const EventEmitter = require("devtools/shared/event-emitter");
|
2016-02-11 15:29:47 +03:00
|
|
|
const {gDevTools} = require("devtools/client/framework/devtools");
|
2016-01-15 18:34:45 +03:00
|
|
|
/* import-globals-from StyleEditorUtil.jsm */
|
2015-10-14 02:18:43 +03:00
|
|
|
Cu.import("resource://devtools/client/styleeditor/StyleEditorUtil.jsm");
|
2015-02-18 05:39:00 +03:00
|
|
|
const {SplitView} = Cu.import("resource://devtools/client/shared/SplitView.jsm", {});
|
|
|
|
const {StyleSheetEditor} = Cu.import("resource://devtools/client/styleeditor/StyleSheetEditor.jsm");
|
|
|
|
loader.lazyImporter(this, "PluralForm", "resource://gre/modules/PluralForm.jsm");
|
2016-01-15 18:34:45 +03:00
|
|
|
const {PrefObserver, PREF_ORIG_SOURCES} =
|
|
|
|
require("devtools/client/styleeditor/utils");
|
2014-05-22 14:04:47 +04:00
|
|
|
const csscoverage = require("devtools/server/actors/csscoverage");
|
2015-02-18 05:39:00 +03:00
|
|
|
const {console} = require("resource://gre/modules/Console.jsm");
|
2015-08-26 16:05:13 +03:00
|
|
|
const promise = require("promise");
|
2015-02-18 05:39:00 +03:00
|
|
|
const {ResponsiveUIManager} =
|
|
|
|
Cu.import("resource://devtools/client/responsivedesign/responsivedesign.jsm", {});
|
2013-04-25 20:46:13 +04:00
|
|
|
|
|
|
|
const LOAD_ERROR = "error-load";
|
|
|
|
const STYLE_EDITOR_TEMPLATE = "stylesheet";
|
2014-08-21 00:41:07 +04:00
|
|
|
const SELECTOR_HIGHLIGHTER_TYPE = "SelectorHighlighter";
|
2014-05-26 21:52:24 +04:00
|
|
|
const PREF_MEDIA_SIDEBAR = "devtools.styleeditor.showMediaSidebar";
|
2014-06-20 02:03:41 +04:00
|
|
|
const PREF_SIDEBAR_WIDTH = "devtools.styleeditor.mediaSidebarWidth";
|
|
|
|
const PREF_NAV_WIDTH = "devtools.styleeditor.navSidebarWidth";
|
2013-04-25 20:46:13 +04:00
|
|
|
|
|
|
|
/**
|
|
|
|
* StyleEditorUI is controls and builds the UI of the Style Editor, including
|
|
|
|
* maintaining a list of editors for each stylesheet on a debuggee.
|
|
|
|
*
|
|
|
|
* Emits events:
|
|
|
|
* 'editor-added': A new editor was added to the UI
|
2013-05-13 06:05:32 +04:00
|
|
|
* 'editor-selected': An editor was selected
|
2013-04-25 20:46:13 +04:00
|
|
|
* 'error': An error occured
|
|
|
|
*
|
2013-12-07 11:52:32 +04:00
|
|
|
* @param {StyleEditorFront} debuggee
|
|
|
|
* Client-side front for interacting with the page's stylesheets
|
|
|
|
* @param {Target} target
|
|
|
|
* Interface for the page we're debugging
|
2013-04-25 20:46:13 +04:00
|
|
|
* @param {Document} panelDoc
|
|
|
|
* Document of the toolbox panel to populate UI in.
|
|
|
|
*/
|
2013-12-07 11:52:32 +04:00
|
|
|
function StyleEditorUI(debuggee, target, panelDoc) {
|
2013-04-25 20:46:13 +04:00
|
|
|
EventEmitter.decorate(this);
|
|
|
|
|
|
|
|
this._debuggee = debuggee;
|
2013-12-07 11:52:32 +04:00
|
|
|
this._target = target;
|
2013-04-25 20:46:13 +04:00
|
|
|
this._panelDoc = panelDoc;
|
|
|
|
this._window = this._panelDoc.defaultView;
|
|
|
|
this._root = this._panelDoc.getElementById("style-editor-chrome");
|
|
|
|
|
|
|
|
this.editors = [];
|
2013-06-14 00:56:36 +04:00
|
|
|
this.selectedEditor = null;
|
2014-02-06 19:06:47 +04:00
|
|
|
this.savedLocations = {};
|
2013-04-25 20:46:13 +04:00
|
|
|
|
2014-06-20 15:52:48 +04:00
|
|
|
this._onOptionsPopupShowing = this._onOptionsPopupShowing.bind(this);
|
|
|
|
this._onOptionsPopupHiding = this._onOptionsPopupHiding.bind(this);
|
2013-04-25 20:46:13 +04:00
|
|
|
this._onStyleSheetCreated = this._onStyleSheetCreated.bind(this);
|
2013-12-07 11:52:32 +04:00
|
|
|
this._onNewDocument = this._onNewDocument.bind(this);
|
2014-05-26 21:52:24 +04:00
|
|
|
this._onMediaPrefChanged = this._onMediaPrefChanged.bind(this);
|
|
|
|
this._updateMediaList = this._updateMediaList.bind(this);
|
2013-12-07 11:52:32 +04:00
|
|
|
this._clear = this._clear.bind(this);
|
2013-04-25 20:46:13 +04:00
|
|
|
this._onError = this._onError.bind(this);
|
2015-04-14 02:16:16 +03:00
|
|
|
this._updateOpenLinkItem = this._updateOpenLinkItem.bind(this);
|
|
|
|
this._openLinkNewTab = this._openLinkNewTab.bind(this);
|
2013-04-25 20:46:13 +04:00
|
|
|
|
2014-01-14 19:13:47 +04:00
|
|
|
this._prefObserver = new PrefObserver("devtools.styleeditor.");
|
|
|
|
this._prefObserver.on(PREF_ORIG_SOURCES, this._onNewDocument);
|
2014-05-26 21:52:24 +04:00
|
|
|
this._prefObserver.on(PREF_MEDIA_SIDEBAR, this._onMediaPrefChanged);
|
2013-04-25 20:46:13 +04:00
|
|
|
}
|
2015-11-19 08:24:54 +03:00
|
|
|
this.StyleEditorUI = StyleEditorUI;
|
2013-04-25 20:46:13 +04:00
|
|
|
|
|
|
|
StyleEditorUI.prototype = {
|
|
|
|
/**
|
|
|
|
* Get whether any of the editors have unsaved changes.
|
|
|
|
*
|
|
|
|
* @return boolean
|
|
|
|
*/
|
2014-01-28 19:08:41 +04:00
|
|
|
get isDirty() {
|
2013-04-25 20:46:13 +04:00
|
|
|
if (this._markedDirty === true) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return this.editors.some((editor) => {
|
2013-10-24 09:01:02 +04:00
|
|
|
return editor.sourceEditor && !editor.sourceEditor.isClean();
|
2013-04-25 20:46:13 +04:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Mark the style editor as having or not having unsaved changes.
|
|
|
|
*/
|
|
|
|
set isDirty(value) {
|
|
|
|
this._markedDirty = value;
|
|
|
|
},
|
|
|
|
|
2013-06-14 00:56:36 +04:00
|
|
|
/*
|
|
|
|
* Index of selected stylesheet in document.styleSheets
|
|
|
|
*/
|
|
|
|
get selectedStyleSheetIndex() {
|
|
|
|
return this.selectedEditor ?
|
|
|
|
this.selectedEditor.styleSheet.styleSheetIndex : -1;
|
|
|
|
},
|
|
|
|
|
2014-01-28 19:08:41 +04:00
|
|
|
/**
|
2014-08-21 00:41:07 +04:00
|
|
|
* Initiates the style editor ui creation, the inspector front to get
|
|
|
|
* reference to the walker and the selector highlighter if available
|
2014-01-28 19:08:41 +04:00
|
|
|
*/
|
2015-03-26 14:30:35 +03:00
|
|
|
initialize: Task.async(function* () {
|
|
|
|
yield this.initializeHighlighter();
|
|
|
|
|
|
|
|
this.createUI();
|
|
|
|
|
|
|
|
let styleSheets = yield this._debuggee.getStyleSheets();
|
|
|
|
yield this._resetStyleSheetList(styleSheets);
|
|
|
|
|
|
|
|
this._target.on("will-navigate", this._clear);
|
|
|
|
this._target.on("navigate", this._onNewDocument);
|
|
|
|
}),
|
|
|
|
|
|
|
|
initializeHighlighter: Task.async(function* () {
|
|
|
|
let toolbox = gDevTools.getToolbox(this._target);
|
|
|
|
yield toolbox.initInspector();
|
|
|
|
this._walker = toolbox.walker;
|
|
|
|
|
|
|
|
let hUtils = toolbox.highlighterUtils;
|
|
|
|
if (hUtils.supportsCustomHighlighters()) {
|
|
|
|
try {
|
|
|
|
this._highlighter =
|
|
|
|
yield hUtils.getHighlighterByType(SELECTOR_HIGHLIGHTER_TYPE);
|
|
|
|
} catch (e) {
|
|
|
|
// The selectorHighlighter can't always be instantiated, for example
|
|
|
|
// it doesn't work with XUL windows (until bug 1094959 gets fixed);
|
|
|
|
// or the selectorHighlighter doesn't exist on the backend.
|
|
|
|
console.warn("The selectorHighlighter couldn't be instantiated, " +
|
|
|
|
"elements matching hovered selectors will not be highlighted");
|
2014-08-21 00:41:07 +04:00
|
|
|
}
|
2015-03-26 14:30:35 +03:00
|
|
|
}
|
|
|
|
}),
|
2014-01-28 19:08:41 +04:00
|
|
|
|
2013-04-25 20:46:13 +04:00
|
|
|
/**
|
|
|
|
* Build the initial UI and wire buttons with event handlers.
|
|
|
|
*/
|
|
|
|
createUI: function() {
|
|
|
|
let viewRoot = this._root.parentNode.querySelector(".splitview-root");
|
|
|
|
|
|
|
|
this._view = new SplitView(viewRoot);
|
|
|
|
|
2014-06-14 14:49:00 +04:00
|
|
|
wire(this._view.rootElement, ".style-editor-newButton", () =>{
|
2013-12-07 11:52:32 +04:00
|
|
|
this._debuggee.addStyleSheet(null).then(this._onStyleSheetCreated);
|
2014-06-14 14:49:00 +04:00
|
|
|
});
|
2013-04-25 20:46:13 +04:00
|
|
|
|
2014-06-14 14:49:00 +04:00
|
|
|
wire(this._view.rootElement, ".style-editor-importButton", ()=> {
|
2013-04-25 20:46:13 +04:00
|
|
|
this._importFromFile(this._mockImportFile || null, this._window);
|
2014-06-14 14:49:00 +04:00
|
|
|
});
|
2014-01-14 19:13:47 +04:00
|
|
|
|
2014-06-20 15:52:48 +04:00
|
|
|
this._optionsButton = this._panelDoc.getElementById("style-editor-options");
|
2015-04-14 02:16:16 +03:00
|
|
|
this._panelDoc.addEventListener("contextmenu", () => {
|
|
|
|
this._contextMenuStyleSheet = null;
|
|
|
|
}, true);
|
|
|
|
|
|
|
|
this._contextMenu = this._panelDoc.getElementById("sidebar-context");
|
|
|
|
this._contextMenu.addEventListener("popupshowing",
|
|
|
|
this._updateOpenLinkItem);
|
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
this._optionsMenu =
|
|
|
|
this._panelDoc.getElementById("style-editor-options-popup");
|
2014-06-03 13:47:00 +04:00
|
|
|
this._optionsMenu.addEventListener("popupshowing",
|
2014-06-20 15:52:48 +04:00
|
|
|
this._onOptionsPopupShowing);
|
|
|
|
this._optionsMenu.addEventListener("popuphiding",
|
|
|
|
this._onOptionsPopupHiding);
|
2014-01-14 19:13:47 +04:00
|
|
|
|
2014-06-03 13:47:00 +04:00
|
|
|
this._sourcesItem = this._panelDoc.getElementById("options-origsources");
|
2014-01-14 19:13:47 +04:00
|
|
|
this._sourcesItem.addEventListener("command",
|
|
|
|
this._toggleOrigSources);
|
2015-04-14 02:16:16 +03:00
|
|
|
|
2014-06-03 13:47:00 +04:00
|
|
|
this._mediaItem = this._panelDoc.getElementById("options-show-media");
|
2014-05-26 21:52:24 +04:00
|
|
|
this._mediaItem.addEventListener("command",
|
|
|
|
this._toggleMediaSidebar);
|
2014-06-20 02:03:41 +04:00
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
this._openLinkNewTabItem =
|
|
|
|
this._panelDoc.getElementById("context-openlinknewtab");
|
2015-04-14 02:16:16 +03:00
|
|
|
this._openLinkNewTabItem.addEventListener("command",
|
|
|
|
this._openLinkNewTab);
|
|
|
|
|
2014-06-20 02:03:41 +04:00
|
|
|
let nav = this._panelDoc.querySelector(".splitview-controller");
|
|
|
|
nav.setAttribute("width", Services.prefs.getIntPref(PREF_NAV_WIDTH));
|
2014-01-14 19:13:47 +04:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2014-06-20 15:52:48 +04:00
|
|
|
* Listener handling the 'gear menu' popup showing event.
|
2014-06-03 13:47:00 +04:00
|
|
|
* Update options menu items to reflect current preference settings.
|
2014-01-14 19:13:47 +04:00
|
|
|
*/
|
2014-06-20 15:52:48 +04:00
|
|
|
_onOptionsPopupShowing: function() {
|
|
|
|
this._optionsButton.setAttribute("open", "true");
|
2014-06-03 13:47:00 +04:00
|
|
|
this._sourcesItem.setAttribute("checked",
|
|
|
|
Services.prefs.getBoolPref(PREF_ORIG_SOURCES));
|
|
|
|
this._mediaItem.setAttribute("checked",
|
|
|
|
Services.prefs.getBoolPref(PREF_MEDIA_SIDEBAR));
|
2013-04-25 20:46:13 +04:00
|
|
|
},
|
|
|
|
|
2014-06-20 15:52:48 +04:00
|
|
|
/**
|
|
|
|
* Listener handling the 'gear menu' popup hiding event.
|
|
|
|
*/
|
|
|
|
_onOptionsPopupHiding: function() {
|
|
|
|
this._optionsButton.removeAttribute("open");
|
|
|
|
},
|
|
|
|
|
2013-12-07 11:52:32 +04:00
|
|
|
/**
|
|
|
|
* Refresh editors to reflect the stylesheets in the document.
|
|
|
|
*
|
|
|
|
* @param {string} event
|
|
|
|
* Event name
|
|
|
|
* @param {StyleSheet} styleSheet
|
|
|
|
* StyleSheet object for new sheet
|
|
|
|
*/
|
|
|
|
_onNewDocument: function() {
|
|
|
|
this._debuggee.getStyleSheets().then((styleSheets) => {
|
2015-03-26 14:30:35 +03:00
|
|
|
return this._resetStyleSheetList(styleSheets);
|
|
|
|
}).then(null, Cu.reportError);
|
2013-12-07 11:52:32 +04:00
|
|
|
},
|
|
|
|
|
2014-02-06 19:06:47 +04:00
|
|
|
/**
|
|
|
|
* Add editors for all the given stylesheets to the UI.
|
|
|
|
*
|
|
|
|
* @param {array} styleSheets
|
|
|
|
* Array of StyleSheetFront
|
|
|
|
*/
|
2015-03-26 14:30:35 +03:00
|
|
|
_resetStyleSheetList: Task.async(function* (styleSheets) {
|
2014-02-06 19:06:47 +04:00
|
|
|
this._clear();
|
|
|
|
|
|
|
|
for (let sheet of styleSheets) {
|
2015-04-22 19:04:48 +03:00
|
|
|
try {
|
|
|
|
yield this._addStyleSheet(sheet);
|
|
|
|
} catch (e) {
|
|
|
|
this.emit("error", { key: LOAD_ERROR });
|
|
|
|
}
|
2014-02-06 19:06:47 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
this._root.classList.remove("loading");
|
|
|
|
|
|
|
|
this.emit("stylesheets-reset");
|
2015-03-26 14:30:35 +03:00
|
|
|
}),
|
2014-02-06 19:06:47 +04:00
|
|
|
|
2013-12-07 11:52:32 +04:00
|
|
|
/**
|
|
|
|
* Remove all editors and add loading indicator.
|
|
|
|
*/
|
|
|
|
_clear: function() {
|
|
|
|
// remember selected sheet and line number for next load
|
|
|
|
if (this.selectedEditor && this.selectedEditor.sourceEditor) {
|
|
|
|
let href = this.selectedEditor.styleSheet.href;
|
|
|
|
let {line, ch} = this.selectedEditor.sourceEditor.getCursor();
|
|
|
|
|
|
|
|
this._styleSheetToSelect = {
|
2014-05-26 21:52:24 +04:00
|
|
|
stylesheet: href,
|
2013-12-07 11:52:32 +04:00
|
|
|
line: line,
|
|
|
|
col: ch
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2014-02-06 19:06:47 +04:00
|
|
|
// remember saved file locations
|
|
|
|
for (let editor of this.editors) {
|
|
|
|
if (editor.savedFile) {
|
2014-02-11 06:05:20 +04:00
|
|
|
let identifier = this.getStyleSheetIdentifier(editor.styleSheet);
|
|
|
|
this.savedLocations[identifier] = editor.savedFile;
|
2014-02-06 19:06:47 +04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2013-12-07 11:52:32 +04:00
|
|
|
this._clearStyleSheetEditors();
|
|
|
|
this._view.removeAll();
|
|
|
|
|
|
|
|
this.selectedEditor = null;
|
|
|
|
|
|
|
|
this._root.classList.add("loading");
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Add an editor for this stylesheet. Add editors for its original sources
|
|
|
|
* instead (e.g. Sass sources), if applicable.
|
|
|
|
*
|
|
|
|
* @param {StyleSheetFront} styleSheet
|
|
|
|
* Style sheet to add to style editor
|
|
|
|
*/
|
2015-03-26 14:30:35 +03:00
|
|
|
_addStyleSheet: Task.async(function* (styleSheet) {
|
|
|
|
let editor = yield this._addStyleSheetEditor(styleSheet);
|
2013-12-07 11:52:32 +04:00
|
|
|
|
|
|
|
if (!Services.prefs.getBoolPref(PREF_ORIG_SOURCES)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2015-03-26 14:30:35 +03:00
|
|
|
let sources = yield styleSheet.getOriginalSources();
|
|
|
|
if (sources && sources.length) {
|
|
|
|
this._removeStyleSheetEditor(editor);
|
2013-12-07 11:52:32 +04:00
|
|
|
|
2015-03-26 14:30:35 +03:00
|
|
|
for (let source of sources) {
|
|
|
|
// set so the first sheet will be selected, even if it's a source
|
|
|
|
source.styleSheetIndex = styleSheet.styleSheetIndex;
|
|
|
|
source.relatedStyleSheet = styleSheet;
|
|
|
|
|
|
|
|
yield this._addStyleSheetEditor(source);
|
2013-12-07 11:52:32 +04:00
|
|
|
}
|
2015-03-26 14:30:35 +03:00
|
|
|
}
|
|
|
|
}),
|
2013-12-07 11:52:32 +04:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Add a new editor to the UI for a source.
|
|
|
|
*
|
|
|
|
* @param {StyleSheet} styleSheet
|
|
|
|
* Object representing stylesheet
|
|
|
|
* @param {nsIfile} file
|
|
|
|
* Optional file object that sheet was imported from
|
|
|
|
* @param {Boolean} isNew
|
|
|
|
* Optional if stylesheet is a new sheet created by user
|
2015-03-26 14:30:35 +03:00
|
|
|
* @return {Promise} that is resolved with the created StyleSheetEditor when
|
|
|
|
* the editor is fully initialized or rejected on error.
|
2013-12-07 11:52:32 +04:00
|
|
|
*/
|
2015-03-26 14:30:35 +03:00
|
|
|
_addStyleSheetEditor: Task.async(function* (styleSheet, file, isNew) {
|
2014-02-06 19:06:47 +04:00
|
|
|
// recall location of saved file for this sheet after page reload
|
2014-02-11 06:05:20 +04:00
|
|
|
let identifier = this.getStyleSheetIdentifier(styleSheet);
|
|
|
|
let savedFile = this.savedLocations[identifier];
|
2014-02-06 19:06:47 +04:00
|
|
|
if (savedFile && !file) {
|
|
|
|
file = savedFile;
|
|
|
|
}
|
|
|
|
|
2014-08-21 00:41:07 +04:00
|
|
|
let editor = new StyleSheetEditor(styleSheet, this._window, file, isNew,
|
|
|
|
this._walker, this._highlighter);
|
2013-12-07 11:52:32 +04:00
|
|
|
|
|
|
|
editor.on("property-change", this._summaryChange.bind(this, editor));
|
2014-05-26 21:52:24 +04:00
|
|
|
editor.on("media-rules-changed", this._updateMediaList.bind(this, editor));
|
2014-02-02 00:26:53 +04:00
|
|
|
editor.on("linked-css-file", this._summaryChange.bind(this, editor));
|
|
|
|
editor.on("linked-css-file-error", this._summaryChange.bind(this, editor));
|
2013-12-07 11:52:32 +04:00
|
|
|
editor.on("error", this._onError);
|
|
|
|
|
|
|
|
this.editors.push(editor);
|
|
|
|
|
2015-03-26 14:30:35 +03:00
|
|
|
yield editor.fetchSource();
|
|
|
|
this._sourceLoaded(editor);
|
|
|
|
|
2013-12-07 11:52:32 +04:00
|
|
|
return editor;
|
2015-03-26 14:30:35 +03:00
|
|
|
}),
|
2013-12-07 11:52:32 +04:00
|
|
|
|
2013-04-25 20:46:13 +04:00
|
|
|
/**
|
|
|
|
* Import a style sheet from file and asynchronously create a
|
|
|
|
* new stylesheet on the debuggee for it.
|
|
|
|
*
|
|
|
|
* @param {mixed} file
|
|
|
|
* Optional nsIFile or filename string.
|
|
|
|
* If not set a file picker will be shown.
|
|
|
|
* @param {nsIWindow} parentWindow
|
|
|
|
* Optional parent window for the file picker.
|
|
|
|
*/
|
2014-01-28 19:08:41 +04:00
|
|
|
_importFromFile: function(file, parentWindow) {
|
2016-01-15 18:34:45 +03:00
|
|
|
let onFileSelected = (selectedFile) => {
|
|
|
|
if (!selectedFile) {
|
2014-01-03 18:29:05 +04:00
|
|
|
// nothing selected
|
2013-04-25 20:46:13 +04:00
|
|
|
return;
|
|
|
|
}
|
2015-05-22 05:51:40 +03:00
|
|
|
NetUtil.asyncFetch({
|
2016-01-15 18:34:45 +03:00
|
|
|
uri: NetUtil.newURI(selectedFile),
|
2015-05-22 05:51:40 +03:00
|
|
|
loadingNode: this._window.document,
|
|
|
|
contentPolicyType: Ci.nsIContentPolicy.TYPE_OTHER
|
|
|
|
}, (stream, status) => {
|
2013-04-25 20:46:13 +04:00
|
|
|
if (!Components.isSuccessCode(status)) {
|
2014-05-26 22:57:58 +04:00
|
|
|
this.emit("error", { key: LOAD_ERROR });
|
2013-04-25 20:46:13 +04:00
|
|
|
return;
|
|
|
|
}
|
2016-01-15 18:34:45 +03:00
|
|
|
let source =
|
|
|
|
NetUtil.readInputStreamToString(stream, stream.available());
|
2013-04-25 20:46:13 +04:00
|
|
|
stream.close();
|
|
|
|
|
2013-12-07 11:52:32 +04:00
|
|
|
this._debuggee.addStyleSheet(source).then((styleSheet) => {
|
2016-01-15 18:34:45 +03:00
|
|
|
this._onStyleSheetCreated(styleSheet, selectedFile);
|
2013-04-25 20:46:13 +04:00
|
|
|
});
|
2015-05-22 05:51:40 +03:00
|
|
|
});
|
2014-06-14 14:49:00 +04:00
|
|
|
};
|
2013-04-25 20:46:13 +04:00
|
|
|
|
|
|
|
showFilePicker(file, false, parentWindow, onFileSelected);
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* When a new or imported stylesheet has been added to the document.
|
|
|
|
* Add an editor for it.
|
|
|
|
*/
|
|
|
|
_onStyleSheetCreated: function(styleSheet, file) {
|
|
|
|
this._addStyleSheetEditor(styleSheet, file, true);
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Forward any error from a stylesheet.
|
|
|
|
*
|
|
|
|
* @param {string} event
|
|
|
|
* Event name
|
2014-05-26 22:57:58 +04:00
|
|
|
* @param {data} data
|
|
|
|
* The event data
|
2013-04-25 20:46:13 +04:00
|
|
|
*/
|
2014-05-26 22:57:58 +04:00
|
|
|
_onError: function(event, data) {
|
|
|
|
this.emit("error", data);
|
2013-04-25 20:46:13 +04:00
|
|
|
},
|
|
|
|
|
2014-01-14 19:13:47 +04:00
|
|
|
/**
|
2014-05-26 21:52:24 +04:00
|
|
|
* Toggle the original sources pref.
|
2014-01-14 19:13:47 +04:00
|
|
|
*/
|
|
|
|
_toggleOrigSources: function() {
|
|
|
|
let isEnabled = Services.prefs.getBoolPref(PREF_ORIG_SOURCES);
|
|
|
|
Services.prefs.setBoolPref(PREF_ORIG_SOURCES, !isEnabled);
|
|
|
|
},
|
|
|
|
|
2014-05-26 21:52:24 +04:00
|
|
|
/**
|
|
|
|
* Toggle the pref for showing a @media rules sidebar in each editor.
|
|
|
|
*/
|
|
|
|
_toggleMediaSidebar: function() {
|
|
|
|
let isEnabled = Services.prefs.getBoolPref(PREF_MEDIA_SIDEBAR);
|
|
|
|
Services.prefs.setBoolPref(PREF_MEDIA_SIDEBAR, !isEnabled);
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Toggle the @media sidebar in each editor depending on the setting.
|
|
|
|
*/
|
|
|
|
_onMediaPrefChanged: function() {
|
|
|
|
this.editors.forEach(this._updateMediaList);
|
|
|
|
},
|
|
|
|
|
2015-04-14 02:16:16 +03:00
|
|
|
/**
|
2016-01-15 18:34:45 +03:00
|
|
|
* This method handles the following cases related to the context
|
|
|
|
* menu item "_openLinkNewTabItem":
|
2015-04-14 02:16:16 +03:00
|
|
|
*
|
2016-01-15 18:34:45 +03:00
|
|
|
* 1) There was a stylesheet clicked on and it is external: show and
|
|
|
|
* enable the context menu item
|
|
|
|
* 2) There was a stylesheet clicked on and it is inline: show and
|
|
|
|
* disable the context menu item
|
|
|
|
* 3) There was no stylesheet clicked on (the right click happened
|
|
|
|
* below the list): hide the context menu
|
2015-04-14 02:16:16 +03:00
|
|
|
*/
|
|
|
|
_updateOpenLinkItem: function() {
|
2016-01-15 18:34:45 +03:00
|
|
|
this._openLinkNewTabItem.setAttribute("hidden",
|
|
|
|
!this._contextMenuStyleSheet);
|
2015-04-14 02:16:16 +03:00
|
|
|
if (this._contextMenuStyleSheet) {
|
2016-01-15 18:34:45 +03:00
|
|
|
this._openLinkNewTabItem.setAttribute("disabled",
|
|
|
|
!this._contextMenuStyleSheet.href);
|
2015-04-14 02:16:16 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Open a particular stylesheet in a new tab.
|
|
|
|
*/
|
|
|
|
_openLinkNewTab: function() {
|
|
|
|
if (this._contextMenuStyleSheet) {
|
|
|
|
this._window.openUILinkIn(this._contextMenuStyleSheet.href, "tab");
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2013-04-25 20:46:13 +04:00
|
|
|
/**
|
2013-12-07 11:52:32 +04:00
|
|
|
* Remove a particular stylesheet editor from the UI
|
2013-04-25 20:46:13 +04:00
|
|
|
*
|
2013-12-07 11:52:32 +04:00
|
|
|
* @param {StyleSheetEditor} editor
|
|
|
|
* The editor to remove.
|
2013-04-25 20:46:13 +04:00
|
|
|
*/
|
2013-12-07 11:52:32 +04:00
|
|
|
_removeStyleSheetEditor: function(editor) {
|
|
|
|
if (editor.summary) {
|
|
|
|
this._view.removeItem(editor.summary);
|
2016-01-15 18:34:45 +03:00
|
|
|
} else {
|
2013-12-07 11:52:32 +04:00
|
|
|
let self = this;
|
|
|
|
this.on("editor-added", function onAdd(event, added) {
|
|
|
|
if (editor == added) {
|
|
|
|
self.off("editor-added", onAdd);
|
|
|
|
self._view.removeItem(editor.summary);
|
|
|
|
}
|
2016-01-15 18:34:45 +03:00
|
|
|
});
|
2013-12-07 11:52:32 +04:00
|
|
|
}
|
2013-04-25 20:46:13 +04:00
|
|
|
|
2013-12-07 11:52:32 +04:00
|
|
|
editor.destroy();
|
|
|
|
this.editors.splice(this.editors.indexOf(editor), 1);
|
2013-04-25 20:46:13 +04:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Clear all the editors from the UI.
|
|
|
|
*/
|
|
|
|
_clearStyleSheetEditors: function() {
|
|
|
|
for (let editor of this.editors) {
|
|
|
|
editor.destroy();
|
|
|
|
}
|
|
|
|
this.editors = [];
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2013-12-07 11:52:32 +04:00
|
|
|
* Called when a StyleSheetEditor's source has been fetched. Create a
|
|
|
|
* summary UI for the editor.
|
2013-04-25 20:46:13 +04:00
|
|
|
*
|
|
|
|
* @param {StyleSheetEditor} editor
|
|
|
|
* Editor to create UI for.
|
|
|
|
*/
|
|
|
|
_sourceLoaded: function(editor) {
|
2015-02-24 00:55:30 +03:00
|
|
|
let ordinal = editor.styleSheet.styleSheetIndex;
|
|
|
|
ordinal = ordinal == -1 ? Number.MAX_SAFE_INTEGER : ordinal;
|
2013-04-25 20:46:13 +04:00
|
|
|
// add new sidebar item and editor to the UI
|
|
|
|
this._view.appendTemplatedItem(STYLE_EDITOR_TEMPLATE, {
|
|
|
|
data: {
|
|
|
|
editor: editor
|
|
|
|
},
|
|
|
|
disableAnimations: this._alwaysDisableAnimations,
|
2015-02-24 00:55:30 +03:00
|
|
|
ordinal: ordinal,
|
2013-04-25 20:46:13 +04:00
|
|
|
onCreate: function(summary, details, data) {
|
2016-01-15 18:34:45 +03:00
|
|
|
let createdEditor = data.editor;
|
|
|
|
createdEditor.summary = summary;
|
|
|
|
createdEditor.details = details;
|
2013-04-25 20:46:13 +04:00
|
|
|
|
|
|
|
wire(summary, ".stylesheet-enabled", function onToggleDisabled(event) {
|
|
|
|
event.stopPropagation();
|
|
|
|
event.target.blur();
|
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
createdEditor.toggleDisabled();
|
2013-04-25 20:46:13 +04:00
|
|
|
});
|
|
|
|
|
|
|
|
wire(summary, ".stylesheet-name", {
|
|
|
|
events: {
|
2016-01-15 18:34:45 +03:00
|
|
|
"keypress": (event) => {
|
|
|
|
if (event.keyCode == event.DOM_VK_RETURN) {
|
2013-04-25 20:46:13 +04:00
|
|
|
this._view.activeSummary = summary;
|
|
|
|
}
|
2014-06-14 14:49:00 +04:00
|
|
|
}
|
2013-04-25 20:46:13 +04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
wire(summary, ".stylesheet-saveButton", function onSaveButton(event) {
|
|
|
|
event.stopPropagation();
|
|
|
|
event.target.blur();
|
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
createdEditor.saveToFile(createdEditor.savedFile);
|
2013-04-25 20:46:13 +04:00
|
|
|
});
|
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
this._updateSummaryForEditor(createdEditor, summary);
|
2013-04-25 20:46:13 +04:00
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
summary.addEventListener("contextmenu", () => {
|
|
|
|
this._contextMenuStyleSheet = createdEditor.styleSheet;
|
2015-04-14 02:16:16 +03:00
|
|
|
}, false);
|
|
|
|
|
2013-04-25 20:46:13 +04:00
|
|
|
summary.addEventListener("focus", function onSummaryFocus(event) {
|
|
|
|
if (event.target == summary) {
|
|
|
|
// autofocus the stylesheet name
|
|
|
|
summary.querySelector(".stylesheet-name").focus();
|
|
|
|
}
|
|
|
|
}, false);
|
|
|
|
|
2014-06-20 02:03:41 +04:00
|
|
|
let sidebar = details.querySelector(".stylesheet-sidebar");
|
|
|
|
sidebar.setAttribute("width",
|
|
|
|
Services.prefs.getIntPref(PREF_SIDEBAR_WIDTH));
|
|
|
|
|
|
|
|
let splitter = details.querySelector(".devtools-side-splitter");
|
|
|
|
splitter.addEventListener("mousemove", () => {
|
|
|
|
let sidebarWidth = sidebar.getAttribute("width");
|
|
|
|
Services.prefs.setIntPref(PREF_SIDEBAR_WIDTH, sidebarWidth);
|
|
|
|
|
|
|
|
// update all @media sidebars for consistency
|
2016-01-15 18:34:45 +03:00
|
|
|
let sidebars =
|
|
|
|
[...this._panelDoc.querySelectorAll(".stylesheet-sidebar")];
|
2014-06-20 02:03:41 +04:00
|
|
|
for (let mediaSidebar of sidebars) {
|
|
|
|
mediaSidebar.setAttribute("width", sidebarWidth);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-06-06 10:02:23 +04:00
|
|
|
// autofocus if it's a new user-created stylesheet
|
2016-01-15 18:34:45 +03:00
|
|
|
if (createdEditor.isNew) {
|
|
|
|
this._selectEditor(createdEditor);
|
2014-06-06 10:02:23 +04:00
|
|
|
}
|
2013-04-25 20:46:13 +04:00
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
if (this._isEditorToSelect(createdEditor)) {
|
2014-06-06 10:02:23 +04:00
|
|
|
this.switchToSelectedSheet();
|
|
|
|
}
|
2013-04-25 20:46:13 +04:00
|
|
|
|
2014-06-06 10:02:23 +04:00
|
|
|
// If this is the first stylesheet and there is no pending request to
|
|
|
|
// select a particular style sheet, select this sheet.
|
|
|
|
if (!this.selectedEditor && !this._styleSheetBoundToSelect
|
2016-01-15 18:34:45 +03:00
|
|
|
&& createdEditor.styleSheet.styleSheetIndex == 0) {
|
|
|
|
this._selectEditor(createdEditor);
|
2014-06-06 10:02:23 +04:00
|
|
|
}
|
2016-01-15 18:34:45 +03:00
|
|
|
this.emit("editor-added", createdEditor);
|
2013-04-25 20:46:13 +04:00
|
|
|
}.bind(this),
|
|
|
|
|
|
|
|
onShow: function(summary, details, data) {
|
2016-01-15 18:34:45 +03:00
|
|
|
let showEditor = data.editor;
|
|
|
|
this.selectedEditor = showEditor;
|
2013-06-14 00:56:36 +04:00
|
|
|
|
2014-01-08 22:53:16 +04:00
|
|
|
Task.spawn(function* () {
|
2016-01-15 18:34:45 +03:00
|
|
|
if (!showEditor.sourceEditor) {
|
2014-01-08 22:53:16 +04:00
|
|
|
// only initialize source editor when we switch to this view
|
2016-01-15 18:34:45 +03:00
|
|
|
let inputElement =
|
|
|
|
details.querySelector(".stylesheet-editor-input");
|
|
|
|
yield showEditor.load(inputElement);
|
2014-01-08 22:53:16 +04:00
|
|
|
}
|
2013-06-14 00:56:36 +04:00
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
showEditor.onShow();
|
2014-01-08 22:53:16 +04:00
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
this.emit("editor-selected", showEditor);
|
2014-05-26 22:57:58 +04:00
|
|
|
|
|
|
|
// Is there any CSS coverage markup to include?
|
2015-03-28 11:15:29 +03:00
|
|
|
let usage = yield csscoverage.getUsage(this._target);
|
|
|
|
if (usage == null) {
|
|
|
|
return;
|
|
|
|
}
|
2014-06-09 01:33:36 +04:00
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
let href = csscoverage.sheetToUrl(showEditor.styleSheet);
|
|
|
|
let reportData = yield usage.createEditorReport(href);
|
2015-03-28 11:15:29 +03:00
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
showEditor.removeAllUnusedRegions();
|
2015-03-28 11:15:29 +03:00
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
if (reportData.reports.length > 0) {
|
2015-03-28 11:15:29 +03:00
|
|
|
// Only apply if this file isn't compressed. We detect a
|
|
|
|
// compressed file if there are more rules than lines.
|
2016-01-15 18:34:45 +03:00
|
|
|
let text = showEditor.sourceEditor.getText();
|
2015-03-28 11:15:29 +03:00
|
|
|
let lineCount = text.split("\n").length;
|
2016-01-15 18:34:45 +03:00
|
|
|
let ruleCount = showEditor.styleSheet.ruleCount;
|
2015-03-28 11:15:29 +03:00
|
|
|
if (lineCount >= ruleCount) {
|
2016-01-15 18:34:45 +03:00
|
|
|
showEditor.addUnusedRegions(reportData.reports);
|
|
|
|
} else {
|
2015-03-28 11:15:29 +03:00
|
|
|
this.emit("error", { key: "error-compressed", level: "info" });
|
|
|
|
}
|
|
|
|
}
|
2014-01-08 22:53:16 +04:00
|
|
|
}.bind(this)).then(null, Cu.reportError);
|
2013-06-14 00:56:36 +04:00
|
|
|
}.bind(this)
|
2013-04-25 20:46:13 +04:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Switch to the editor that has been marked to be selected.
|
2014-01-08 22:53:16 +04:00
|
|
|
*
|
|
|
|
* @return {Promise}
|
|
|
|
* Promise that will resolve when the editor is selected.
|
2013-04-25 20:46:13 +04:00
|
|
|
*/
|
|
|
|
switchToSelectedSheet: function() {
|
2014-08-22 23:30:00 +04:00
|
|
|
let toSelect = this._styleSheetToSelect;
|
2013-04-25 20:46:13 +04:00
|
|
|
|
2014-01-08 22:53:16 +04:00
|
|
|
for (let editor of this.editors) {
|
2014-08-22 23:30:00 +04:00
|
|
|
if (this._isEditorToSelect(editor)) {
|
2014-01-28 19:08:41 +04:00
|
|
|
// The _styleSheetBoundToSelect will always hold the latest pending
|
|
|
|
// requested style sheet (with line and column) which is not yet
|
|
|
|
// selected by the source editor. Only after we select that particular
|
|
|
|
// editor and go the required line and column, it will become null.
|
|
|
|
this._styleSheetBoundToSelect = this._styleSheetToSelect;
|
2013-12-07 11:52:32 +04:00
|
|
|
this._styleSheetToSelect = null;
|
2014-08-22 23:30:00 +04:00
|
|
|
return this._selectEditor(editor, toSelect.line, toSelect.col);
|
2013-04-25 20:46:13 +04:00
|
|
|
}
|
|
|
|
}
|
2014-01-08 22:53:16 +04:00
|
|
|
|
|
|
|
return promise.resolve();
|
2013-04-25 20:46:13 +04:00
|
|
|
},
|
|
|
|
|
2014-08-22 23:30:00 +04:00
|
|
|
/**
|
|
|
|
* Returns whether a given editor is the current editor to be selected. Tests
|
|
|
|
* based on href or underlying stylesheet.
|
|
|
|
*
|
|
|
|
* @param {StyleSheetEditor} editor
|
|
|
|
* The editor to test.
|
|
|
|
*/
|
|
|
|
_isEditorToSelect: function(editor) {
|
|
|
|
let toSelect = this._styleSheetToSelect;
|
|
|
|
if (!toSelect) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
let isHref = toSelect.stylesheet === null ||
|
|
|
|
typeof toSelect.stylesheet == "string";
|
|
|
|
|
|
|
|
return (isHref && editor.styleSheet.href == toSelect.stylesheet) ||
|
|
|
|
(toSelect.stylesheet == editor.styleSheet);
|
|
|
|
},
|
|
|
|
|
2013-04-25 20:46:13 +04:00
|
|
|
/**
|
|
|
|
* Select an editor in the UI.
|
|
|
|
*
|
|
|
|
* @param {StyleSheetEditor} editor
|
|
|
|
* Editor to switch to.
|
|
|
|
* @param {number} line
|
|
|
|
* Line number to jump to
|
|
|
|
* @param {number} col
|
|
|
|
* Column number to jump to
|
2014-01-08 22:53:16 +04:00
|
|
|
* @return {Promise}
|
2015-03-28 08:22:50 +03:00
|
|
|
* Promise that will resolve when the editor is selected and ready
|
|
|
|
* to be used.
|
2013-04-25 20:46:13 +04:00
|
|
|
*/
|
|
|
|
_selectEditor: function(editor, line, col) {
|
2013-06-14 00:56:36 +04:00
|
|
|
line = line || 0;
|
|
|
|
col = col || 0;
|
2013-04-25 20:46:13 +04:00
|
|
|
|
2014-01-08 22:53:16 +04:00
|
|
|
let editorPromise = editor.getSourceEditor().then(() => {
|
2013-10-24 09:01:02 +04:00
|
|
|
editor.sourceEditor.setCursor({line: line, ch: col});
|
2014-01-28 19:08:41 +04:00
|
|
|
this._styleSheetBoundToSelect = null;
|
2013-04-25 20:46:13 +04:00
|
|
|
});
|
2013-12-16 23:49:17 +04:00
|
|
|
|
2014-01-08 22:53:16 +04:00
|
|
|
let summaryPromise = this.getEditorSummary(editor).then((summary) => {
|
2013-12-16 23:49:17 +04:00
|
|
|
this._view.activeSummary = summary;
|
2014-01-08 22:53:16 +04:00
|
|
|
});
|
|
|
|
|
|
|
|
return promise.all([editorPromise, summaryPromise]);
|
2013-12-16 23:49:17 +04:00
|
|
|
},
|
|
|
|
|
|
|
|
getEditorSummary: function(editor) {
|
|
|
|
if (editor.summary) {
|
|
|
|
return promise.resolve(editor.summary);
|
|
|
|
}
|
|
|
|
|
|
|
|
let deferred = promise.defer();
|
|
|
|
let self = this;
|
|
|
|
|
|
|
|
this.on("editor-added", function onAdd(e, selected) {
|
|
|
|
if (selected == editor) {
|
|
|
|
self.off("editor-added", onAdd);
|
|
|
|
deferred.resolve(editor.summary);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return deferred.promise;
|
2013-04-25 20:46:13 +04:00
|
|
|
},
|
|
|
|
|
2014-05-26 21:52:24 +04:00
|
|
|
getEditorDetails: function(editor) {
|
|
|
|
if (editor.details) {
|
|
|
|
return promise.resolve(editor.details);
|
|
|
|
}
|
|
|
|
|
|
|
|
let deferred = promise.defer();
|
|
|
|
let self = this;
|
|
|
|
|
|
|
|
this.on("editor-added", function onAdd(e, selected) {
|
|
|
|
if (selected == editor) {
|
|
|
|
self.off("editor-added", onAdd);
|
|
|
|
deferred.resolve(editor.details);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return deferred.promise;
|
|
|
|
},
|
|
|
|
|
2014-02-11 06:05:20 +04:00
|
|
|
/**
|
|
|
|
* Returns an identifier for the given style sheet.
|
|
|
|
*
|
2016-01-15 18:34:45 +03:00
|
|
|
* @param {StyleSheet} styleSheet
|
2014-02-11 06:05:20 +04:00
|
|
|
* The style sheet to be identified.
|
|
|
|
*/
|
2016-01-15 18:34:45 +03:00
|
|
|
getStyleSheetIdentifier: function(styleSheet) {
|
|
|
|
// Identify inline style sheets by their host page URI and index
|
|
|
|
// at the page.
|
|
|
|
return styleSheet.href ? styleSheet.href :
|
|
|
|
"inline-" + styleSheet.styleSheetIndex + "-at-" + styleSheet.nodeHref;
|
2014-02-11 06:05:20 +04:00
|
|
|
},
|
|
|
|
|
2013-04-25 20:46:13 +04:00
|
|
|
/**
|
|
|
|
* selects a stylesheet and optionally moves the cursor to a selected line
|
|
|
|
*
|
2014-05-26 21:52:24 +04:00
|
|
|
* @param {StyleSheetFront} [stylesheet]
|
|
|
|
* Stylesheet to select or href of stylesheet to select
|
2013-04-25 20:46:13 +04:00
|
|
|
* @param {Number} [line]
|
2013-06-14 00:56:36 +04:00
|
|
|
* Line to which the caret should be moved (zero-indexed).
|
2013-04-25 20:46:13 +04:00
|
|
|
* @param {Number} [col]
|
2013-06-14 00:56:36 +04:00
|
|
|
* Column to which the caret should be moved (zero-indexed).
|
2015-03-28 08:22:50 +03:00
|
|
|
* @return {Promise}
|
|
|
|
* Promise that will resolve when the editor is selected and ready
|
|
|
|
* to be used.
|
2013-04-25 20:46:13 +04:00
|
|
|
*/
|
2014-05-26 21:52:24 +04:00
|
|
|
selectStyleSheet: function(stylesheet, line, col) {
|
2013-04-25 20:46:13 +04:00
|
|
|
this._styleSheetToSelect = {
|
2014-05-26 21:52:24 +04:00
|
|
|
stylesheet: stylesheet,
|
2013-04-25 20:46:13 +04:00
|
|
|
line: line,
|
|
|
|
col: col,
|
|
|
|
};
|
|
|
|
|
|
|
|
/* Switch to the editor for this sheet, if it exists yet.
|
|
|
|
Otherwise each editor will be checked when it's created. */
|
2015-03-28 08:22:50 +03:00
|
|
|
return this.switchToSelectedSheet();
|
2013-04-25 20:46:13 +04:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handler for an editor's 'property-changed' event.
|
|
|
|
* Update the summary in the UI.
|
|
|
|
*
|
|
|
|
* @param {StyleSheetEditor} editor
|
|
|
|
* Editor for which a property has changed
|
|
|
|
*/
|
|
|
|
_summaryChange: function(editor) {
|
|
|
|
this._updateSummaryForEditor(editor);
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Update split view summary of given StyleEditor instance.
|
|
|
|
*
|
|
|
|
* @param {StyleSheetEditor} editor
|
|
|
|
* @param {DOMElement} summary
|
2016-01-15 18:34:45 +03:00
|
|
|
* Optional item's summary element to update. If none, item
|
|
|
|
* corresponding to passed editor is used.
|
2013-04-25 20:46:13 +04:00
|
|
|
*/
|
|
|
|
_updateSummaryForEditor: function(editor, summary) {
|
|
|
|
summary = summary || editor.summary;
|
|
|
|
if (!summary) {
|
|
|
|
return;
|
|
|
|
}
|
2014-02-02 00:26:53 +04:00
|
|
|
|
|
|
|
let ruleCount = editor.styleSheet.ruleCount;
|
2014-02-11 18:26:02 +04:00
|
|
|
if (editor.styleSheet.relatedStyleSheet && editor.linkedCSSFile) {
|
2014-02-02 00:26:53 +04:00
|
|
|
ruleCount = editor.styleSheet.relatedStyleSheet.ruleCount;
|
|
|
|
}
|
|
|
|
if (ruleCount === undefined) {
|
|
|
|
ruleCount = "-";
|
2013-04-25 20:46:13 +04:00
|
|
|
}
|
|
|
|
|
2016-01-15 18:34:45 +03:00
|
|
|
let flags = [];
|
2013-04-25 20:46:13 +04:00
|
|
|
if (editor.styleSheet.disabled) {
|
|
|
|
flags.push("disabled");
|
|
|
|
}
|
|
|
|
if (editor.unsaved) {
|
|
|
|
flags.push("unsaved");
|
|
|
|
}
|
2014-02-02 00:26:53 +04:00
|
|
|
if (editor.linkedCSSFileError) {
|
|
|
|
flags.push("linked-file-error");
|
|
|
|
}
|
2013-04-25 20:46:13 +04:00
|
|
|
this._view.setItemClassName(summary, flags.join(" "));
|
|
|
|
|
|
|
|
let label = summary.querySelector(".stylesheet-name > label");
|
|
|
|
label.setAttribute("value", editor.friendlyName);
|
2014-02-28 18:20:28 +04:00
|
|
|
if (editor.styleSheet.href) {
|
|
|
|
label.setAttribute("tooltiptext", editor.styleSheet.href);
|
|
|
|
}
|
2013-04-25 20:46:13 +04:00
|
|
|
|
2014-02-02 00:26:53 +04:00
|
|
|
let linkedCSSFile = "";
|
|
|
|
if (editor.linkedCSSFile) {
|
|
|
|
linkedCSSFile = OS.Path.basename(editor.linkedCSSFile);
|
|
|
|
}
|
|
|
|
text(summary, ".stylesheet-linked-file", linkedCSSFile);
|
2013-04-25 20:46:13 +04:00
|
|
|
text(summary, ".stylesheet-title", editor.styleSheet.title || "");
|
|
|
|
text(summary, ".stylesheet-rule-count",
|
|
|
|
PluralForm.get(ruleCount, _("ruleCount.label")).replace("#1", ruleCount));
|
|
|
|
},
|
|
|
|
|
2014-05-26 21:52:24 +04:00
|
|
|
/**
|
|
|
|
* Update the @media rules sidebar for an editor. Hide if there are no rules
|
|
|
|
* Display a list of the @media rules in the editor's associated style sheet.
|
|
|
|
* Emits a 'media-list-changed' event after updating the UI.
|
|
|
|
*
|
|
|
|
* @param {StyleSheetEditor} editor
|
|
|
|
* Editor to update @media sidebar of
|
|
|
|
*/
|
|
|
|
_updateMediaList: function(editor) {
|
2014-06-06 10:02:23 +04:00
|
|
|
Task.spawn(function* () {
|
|
|
|
let details = yield this.getEditorDetails(editor);
|
2014-05-26 21:52:24 +04:00
|
|
|
let list = details.querySelector(".stylesheet-media-list");
|
|
|
|
|
|
|
|
while (list.firstChild) {
|
|
|
|
list.removeChild(list.firstChild);
|
|
|
|
}
|
|
|
|
|
|
|
|
let rules = editor.mediaRules;
|
|
|
|
let showSidebar = Services.prefs.getBoolPref(PREF_MEDIA_SIDEBAR);
|
|
|
|
let sidebar = details.querySelector(".stylesheet-sidebar");
|
2014-06-06 10:02:23 +04:00
|
|
|
|
|
|
|
let inSource = false;
|
2014-05-26 21:52:24 +04:00
|
|
|
|
|
|
|
for (let rule of rules) {
|
2014-06-06 10:02:23 +04:00
|
|
|
let {line, column, parentStyleSheet} = rule;
|
|
|
|
|
|
|
|
let location = {
|
|
|
|
line: line,
|
|
|
|
column: column,
|
|
|
|
source: editor.styleSheet.href,
|
|
|
|
styleSheet: parentStyleSheet
|
|
|
|
};
|
|
|
|
if (editor.styleSheet.isOriginalSource) {
|
|
|
|
location = yield editor.cssSheet.getOriginalLocation(line, column);
|
|
|
|
}
|
|
|
|
|
|
|
|
// this @media rule is from a different original source
|
|
|
|
if (location.source != editor.styleSheet.href) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
inSource = true;
|
|
|
|
|
2014-05-26 21:52:24 +04:00
|
|
|
let div = this._panelDoc.createElement("div");
|
|
|
|
div.className = "media-rule-label";
|
2016-01-15 18:34:45 +03:00
|
|
|
div.addEventListener("click",
|
|
|
|
this._jumpToLocation.bind(this, location));
|
2014-05-26 21:52:24 +04:00
|
|
|
|
|
|
|
let cond = this._panelDoc.createElement("div");
|
|
|
|
cond.textContent = rule.conditionText;
|
2015-02-18 05:39:00 +03:00
|
|
|
cond.className = "media-rule-condition";
|
2014-05-26 21:52:24 +04:00
|
|
|
if (!rule.matches) {
|
|
|
|
cond.classList.add("media-condition-unmatched");
|
|
|
|
}
|
2015-02-18 05:39:00 +03:00
|
|
|
if (this._target.tab.tagName == "tab") {
|
2016-01-15 18:34:45 +03:00
|
|
|
const minMaxPattern = /(min\-|max\-)(width|height):\s\d+(px)/ig;
|
|
|
|
const replacement =
|
|
|
|
"<a href='#' class='media-responsive-mode-toggle'>$&</a>";
|
|
|
|
|
|
|
|
cond.innerHTML = cond.textContent.replace(minMaxPattern, replacement);
|
|
|
|
cond.addEventListener("click",
|
|
|
|
this._onMediaConditionClick.bind(this));
|
2015-02-18 05:39:00 +03:00
|
|
|
}
|
2014-05-26 21:52:24 +04:00
|
|
|
div.appendChild(cond);
|
|
|
|
|
2014-06-06 10:02:23 +04:00
|
|
|
let link = this._panelDoc.createElement("div");
|
|
|
|
link.className = "media-rule-line theme-link";
|
2014-06-15 18:30:00 +04:00
|
|
|
if (location.line != -1) {
|
|
|
|
link.textContent = ":" + location.line;
|
|
|
|
}
|
2014-06-06 10:02:23 +04:00
|
|
|
div.appendChild(link);
|
2014-05-26 21:52:24 +04:00
|
|
|
|
|
|
|
list.appendChild(div);
|
|
|
|
}
|
2014-06-06 10:02:23 +04:00
|
|
|
|
|
|
|
sidebar.hidden = !showSidebar || !inSource;
|
|
|
|
|
2014-05-26 21:52:24 +04:00
|
|
|
this.emit("media-list-changed", editor);
|
2014-06-06 10:02:23 +04:00
|
|
|
}.bind(this)).then(null, Cu.reportError);
|
2014-05-26 21:52:24 +04:00
|
|
|
},
|
|
|
|
|
2015-02-18 05:39:00 +03:00
|
|
|
/**
|
|
|
|
* Called when a media condition is clicked
|
|
|
|
* If a responsive mode link is clicked, it will launch it.
|
|
|
|
*
|
|
|
|
* @param {object} e
|
|
|
|
* Event object
|
|
|
|
*/
|
|
|
|
_onMediaConditionClick: function(e) {
|
|
|
|
if (!e.target.matches(".media-responsive-mode-toggle")) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
let conditionText = e.target.textContent;
|
|
|
|
let isWidthCond = conditionText.toLowerCase().indexOf("width") > -1;
|
2016-01-15 18:34:45 +03:00
|
|
|
let mediaVal = parseInt(/\d+/.exec(conditionText), 10);
|
2015-02-18 05:39:00 +03:00
|
|
|
|
|
|
|
let options = isWidthCond ? {width: mediaVal} : {height: mediaVal};
|
|
|
|
this._launchResponsiveMode(options);
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Launches the responsive mode with a specific width or height
|
|
|
|
*
|
|
|
|
* @param {object} options
|
|
|
|
* Object with width or/and height properties.
|
|
|
|
*/
|
|
|
|
_launchResponsiveMode: function(options = {}) {
|
|
|
|
let tab = this._target.tab;
|
|
|
|
let win = this._target.tab.ownerGlobal;
|
|
|
|
|
|
|
|
ResponsiveUIManager.runIfNeeded(win, tab);
|
|
|
|
if (options.width && options.height) {
|
2016-01-15 18:34:45 +03:00
|
|
|
ResponsiveUIManager.getResponsiveUIForTab(tab).setSize(options.width,
|
|
|
|
options.height);
|
|
|
|
} else if (options.width) {
|
2015-02-18 05:39:00 +03:00
|
|
|
ResponsiveUIManager.getResponsiveUIForTab(tab).setWidth(options.width);
|
2016-01-15 18:34:45 +03:00
|
|
|
} else if (options.height) {
|
2015-02-18 05:39:00 +03:00
|
|
|
ResponsiveUIManager.getResponsiveUIForTab(tab).setHeight(options.height);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2014-05-26 21:52:24 +04:00
|
|
|
/**
|
|
|
|
* Jump cursor to the editor for a stylesheet and line number for a rule.
|
|
|
|
*
|
2014-06-06 10:02:23 +04:00
|
|
|
* @param {object} location
|
|
|
|
* Location object with 'line', 'column', and 'source' properties.
|
2014-05-26 21:52:24 +04:00
|
|
|
*/
|
2014-06-06 10:02:23 +04:00
|
|
|
_jumpToLocation: function(location) {
|
|
|
|
let source = location.styleSheet || location.source;
|
|
|
|
this.selectStyleSheet(source, location.line - 1, location.column - 1);
|
2014-05-26 21:52:24 +04:00
|
|
|
},
|
|
|
|
|
2013-04-25 20:46:13 +04:00
|
|
|
destroy: function() {
|
2014-08-21 00:41:07 +04:00
|
|
|
if (this._highlighter) {
|
|
|
|
this._highlighter.finalize();
|
|
|
|
this._highlighter = null;
|
|
|
|
}
|
|
|
|
|
2013-04-25 20:46:13 +04:00
|
|
|
this._clearStyleSheetEditors();
|
2014-01-14 19:13:47 +04:00
|
|
|
|
2014-06-20 02:03:41 +04:00
|
|
|
let sidebar = this._panelDoc.querySelector(".splitview-controller");
|
|
|
|
let sidebarWidth = sidebar.getAttribute("width");
|
|
|
|
Services.prefs.setIntPref(PREF_NAV_WIDTH, sidebarWidth);
|
|
|
|
|
2014-06-03 13:47:00 +04:00
|
|
|
this._optionsMenu.removeEventListener("popupshowing",
|
2014-06-20 15:52:48 +04:00
|
|
|
this._onOptionsPopupShowing);
|
|
|
|
this._optionsMenu.removeEventListener("popuphiding",
|
|
|
|
this._onOptionsPopupHiding);
|
2014-06-03 13:47:00 +04:00
|
|
|
|
2014-01-14 19:13:47 +04:00
|
|
|
this._prefObserver.off(PREF_ORIG_SOURCES, this._onNewDocument);
|
2014-05-26 21:52:24 +04:00
|
|
|
this._prefObserver.off(PREF_MEDIA_SIDEBAR, this._onMediaPrefChanged);
|
2014-01-14 19:13:47 +04:00
|
|
|
this._prefObserver.destroy();
|
2013-04-25 20:46:13 +04:00
|
|
|
}
|
2016-01-15 18:34:45 +03:00
|
|
|
};
|