Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 16:25:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1578753: Reflect the switching of the top-level target. r=jdescottes,ochameau

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D56704

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Daisuke Akatsuka 2019-12-16 10:16:05 +00:00
parent 5bcf346ce2
commit daf33e67cf
2 changed files with 69 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
devtools/client/styleeditor/StyleEditorUI.jsm
View File

@ -71,17 +71,14 @@ const HTML_NS = "http://www.w3.org/1999/xhtml";
* 'error': An error occured
*
* @param {Toolbox} toolbox
* @param {StyleEditorFront} debuggee
* Client-side front for interacting with the page's stylesheets
* @param {Document} panelDoc
* Document of the toolbox panel to populate UI in.
* @param {CssProperties} A css properties database.
*/
function StyleEditorUI(toolbox, debuggee, panelDoc, cssProperties) {
function StyleEditorUI(toolbox, panelDoc, cssProperties) {
EventEmitter.decorate(this);
this._toolbox = toolbox;
this._debuggee = debuggee;
this._panelDoc = panelDoc;
this._cssProperties = cssProperties;
this._window = this._panelDoc.defaultView;
@ -110,6 +107,8 @@ function StyleEditorUI(toolbox, debuggee, panelDoc, cssProperties) {
this._openLinkNewTab = this._openLinkNewTab.bind(this);
this._copyUrl = this._copyUrl.bind(this);
this._addStyleSheet = this._addStyleSheet.bind(this);
this._onTargetAvailable = this._onTargetAvailable.bind(this);
this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
this._prefObserver = new PrefObserver("devtools.styleeditor.");
this._prefObserver.on(PREF_MEDIA_SIDEBAR, this._onMediaPrefChanged);
@ -117,8 +116,6 @@ function StyleEditorUI(toolbox, debuggee, panelDoc, cssProperties) {
"devtools.source-map.client-service."
);
this._sourceMapPrefObserver.on(PREF_ORIG_SOURCES, this._onNewDocument);
this._debuggee.on("stylesheet-added", this._addStyleSheet);
}
this.StyleEditorUI = StyleEditorUI;
@ -137,23 +134,20 @@ StyleEditorUI.prototype = {
},
/**
* Initiates the style editor ui creation, the inspector front to get
* reference to the walker and the selector highlighter if available
* Initiates the style editor ui creation, and start to track TargetList updates.
*/
async initialize() {
await this.initializeHighlighter();
this.createUI();
const styleSheets = await this._debuggee.getStyleSheets();
await this._resetStyleSheetList(styleSheets);
this.currentTarget.on("will-navigate", this._clear);
this.currentTarget.on("navigate", this._onNewDocument);
await this._toolbox.targetList.watchTargets(
[this._toolbox.targetList.TYPES.FRAME],
this._onTargetAvailable,
this._onTargetDestroyed
);
},
async initializeHighlighter() {
const inspectorFront = await this.currentTarget.getFront("inspector");
async initializeHighlighter(targetFront) {
const inspectorFront = await targetFront.getFront("inspector");
this._walker = inspectorFront.walker;
try {
@ -177,8 +171,9 @@ StyleEditorUI.prototype = {
createUI: function() {
this._view = new SplitView(this._root);
wire(this._view.rootElement, ".style-editor-newButton", () => {
this._debuggee.addStyleSheet(null);
wire(this._view.rootElement, ".style-editor-newButton", async () => {
const stylesheetsFront = await this.currentTarget.getFront("stylesheets");
stylesheetsFront.addStyleSheet(null);
});
wire(this._view.rootElement, ".style-editor-importButton", () => {
@ -242,20 +237,16 @@ StyleEditorUI.prototype = {
/**
* Refresh editors to reflect the stylesheets in the document.
*
* @param {string} event
* Event name
* @param {StyleSheet} styleSheet
* StyleSheet object for new sheet
*/
_onNewDocument: function() {
async _onNewDocument() {
this._suppressAdd = true;
this._debuggee
.getStyleSheets()
.then(styleSheets => {
return this._resetStyleSheetList(styleSheets);
})
.catch(console.error);
try {
const stylesheetsFront = await this.currentTarget.getFront("stylesheets");
const styleSheets = await stylesheetsFront.getStyleSheets();
await this._resetStyleSheetList(styleSheets);
} catch (e) {
console.error(e);
}
},
/**
@ -451,7 +442,7 @@ StyleEditorUI.prototype = {
securityFlags: Ci.nsILoadInfo.SEC_ALLOW_CROSS_ORIGIN_DATA_INHERITS,
contentPolicyType: Ci.nsIContentPolicy.TYPE_OTHER,
},
(stream, status) => {
async (stream, status) => {
if (!Components.isSuccessCode(status)) {
this.emit("error", { key: LOAD_ERROR, level: "warning" });
return;
@ -463,16 +454,17 @@ StyleEditorUI.prototype = {
stream.close();
this._suppressAdd = true;
this._debuggee.addStyleSheet(source).then(styleSheet => {
this._suppressAdd = false;
this._addStyleSheet(styleSheet, true).then(editor => {
if (editor) {
editor.savedFile = selectedFile;
}
// Just for testing purposes.
this.emit("test:editor-updated", editor);
});
});
const stylesheetsFront = await this.currentTarget.getFront(
"stylesheets"
);
const styleSheet = await stylesheetsFront.addStyleSheet(source);
this._suppressAdd = false;
const editor = await this._addStyleSheet(styleSheet, true);
if (editor) {
editor.savedFile = selectedFile;
}
// Just for testing purposes.
this.emit("test:editor-updated", editor);
}
);
};
@ -1099,7 +1091,40 @@ StyleEditorUI.prototype = {
this.selectStyleSheet(source, location.line - 1, location.column - 1);
},
async _onTargetAvailable({ targetFront, isTopLevel }) {
if (isTopLevel) {
await this.initializeHighlighter(targetFront);
const stylesheetsFront = await targetFront.getFront("stylesheets");
stylesheetsFront.on("stylesheet-added", this._addStyleSheet);
targetFront.on("will-navigate", this._clear);
targetFront.on("navigate", this._onNewDocument);
await this._onNewDocument();
}
},
async _onTargetDestroyed({ isTopLevel }) {
if (isTopLevel) {
this._clear();
}
},
destroy: function() {
this._toolbox.targetList.unwatchTargets(
[this._toolbox.targetList.TYPES.FRAME],
this._onTargetAvailable,
this._onTargetDestroyed
);
this.currentTarget.off("will-navigate", this._clear);
this.currentTarget.off("navigate", this._onNewDocument);
const stylesheetsFront = this.currentTarget.getCachedFront("stylesheets");
if (stylesheetsFront) {
stylesheetsFront.off("stylesheet-added", this._addStyleSheet);
}
this._clearStyleSheetEditors();
this._seenSheets = null;
@ -1113,7 +1138,5 @@ StyleEditorUI.prototype = {
this._sourceMapPrefObserver.destroy();
this._prefObserver.off(PREF_MEDIA_SIDEBAR, this._onMediaPrefChanged);
this._prefObserver.destroy();
this._debuggee.off("stylesheet-added", this._addStyleSheet);
},
};

20
devtools/client/styleeditor/panel.js
View File

@ -30,10 +30,6 @@ var StyleEditorPanel = function StyleEditorPanel(panelWin, toolbox) {
exports.StyleEditorPanel = StyleEditorPanel;
StyleEditorPanel.prototype = {
get currentTarget() {
return this._toolbox.targetList.targetFront;
},
get panelWindow() {
return this._panelWin;
},
@ -42,20 +38,11 @@ StyleEditorPanel.prototype = {
* open is effectively an asynchronous constructor
*/
async open() {
this.currentTarget.on("close", this.destroy);
this._debuggee = await this.currentTarget.getFront("stylesheets");
// Initialize the CSS properties database.
const { cssProperties } = await initCssProperties(this._toolbox);
// Initialize the UI
this.UI = new StyleEditorUI(
this._toolbox,
this._debuggee,
this._panelDoc,
cssProperties
);
this.UI = new StyleEditorUI(this._toolbox, this._panelDoc, cssProperties);
this.UI.on("error", this._showError);
await this.UI.initialize();
@ -118,7 +105,7 @@ StyleEditorPanel.prototype = {
* to be used.
*/
selectStyleSheet: function(href, line, col) {
if (!this._debuggee || !this.UI) {
if (!this.UI) {
return null;
}
return this.UI.selectStyleSheet(href, line - 1, col ? col - 1 : 0);
@ -133,12 +120,9 @@ StyleEditorPanel.prototype = {
}
this._destroyed = true;
this.currentTarget.off("close", this.destroy);
this._toolbox = null;
this._panelWin = null;
this._panelDoc = null;
this._debuggee.destroy();
this._debuggee = null;
this.UI.destroy();
this.UI = null;