wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1103993 - part 2 - Clean-up some of the style-inspector's code; r=bgrins

Browse Source
This commit is contained in:
Patrick Brosset 2014-11-26 10:18:12 +01:00
parent ace98a2558
commit 6d7adb7511
2 changed files with 91 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
browser/devtools/styleinspector/computed-view.js
View File

@ -130,8 +130,8 @@ UpdateProcess.prototype = {
*/
function CssHtmlTree(aStyleInspector, aPageStyle)
{
this.styleWindow = aStyleInspector.window;
this.styleDocument = aStyleInspector.window.document;
this.styleWindow = aStyleInspector.doc.defaultView;
this.styleDocument = aStyleInspector.doc;
this.styleInspector = aStyleInspector;
this.inspector = this.styleInspector.inspector;
this.pageStyle = aPageStyle;

199
browser/devtools/styleinspector/style-inspector.js
View File

@ -6,10 +6,9 @@
const {Cc, Cu, Ci} = require("chrome");
const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
let ToolDefinitions = require("main").Tools;
const {Tools} = require("main");
Cu.import("resource://gre/modules/Services.jsm");
const {PREF_ORIG_SOURCES} = require("devtools/styleeditor/utils");
loader.lazyGetter(this, "gDevTools", () => Cu.import("resource:///modules/devtools/gDevTools.jsm", {}).gDevTools);
loader.lazyGetter(this, "RuleView", () => require("devtools/styleinspector/rule-view"));
@ -17,34 +16,70 @@ loader.lazyGetter(this, "ComputedView", () => require("devtools/styleinspector/c
loader.lazyGetter(this, "_strings", () => Services.strings
.createBundle("chrome://global/locale/devtools/styleinspector.properties"));
const { PREF_ORIG_SOURCES } = require("devtools/styleeditor/utils");
// This module doesn't currently export any symbols directly, it only
// registers inspector tools.
function RuleViewTool(aInspector, aWindow, aIFrame)
{
this.inspector = aInspector;
this.doc = aWindow.document;
this.outerIFrame = aIFrame;
function RuleViewTool(inspector, window, iframe) {
this.inspector = inspector;
this.doc = window.document;
this.view = new RuleView.CssRuleView(aInspector, this.doc);
this.view = new RuleView.CssRuleView(inspector, this.doc);
this.doc.documentElement.appendChild(this.view.element);
this._changeHandler = () => {
this.inspector.markDirty();
};
this.onLinkClicked = this.onLinkClicked.bind(this);
this.onSelected = this.onSelected.bind(this);
this.refresh = this.refresh.bind(this);
this.clearUserProperties = this.clearUserProperties.bind(this);
this.onPropertyChanged = this.onPropertyChanged.bind(this);
this.onViewRefreshed = this.onViewRefreshed.bind(this);
this.view.element.addEventListener("CssRuleViewChanged", this._changeHandler);
this.view.element.addEventListener("CssRuleViewChanged", this.onPropertyChanged);
this.view.element.addEventListener("CssRuleViewRefreshed", this.onViewRefreshed);
this.view.element.addEventListener("CssRuleViewCSSLinkClicked", this.onLinkClicked);
this._refreshHandler = () => {
this.inspector.emit("rule-view-refreshed");
};
this.inspector.selection.on("detached", this.onSelected);
this.inspector.selection.on("new-node-front", this.onSelected);
this.inspector.on("layout-change", this.refresh);
this.inspector.selection.on("pseudoclass", this.refresh);
this.inspector.target.on("navigate", this.clearUserProperties);
this.view.element.addEventListener("CssRuleViewRefreshed", this._refreshHandler);
this.onSelected();
}
this._cssLinkHandler = (aEvent) => {
let rule = aEvent.detail.rule;
RuleViewTool.prototype = {
onSelected: function(event) {
// Ignore the event if the view has been destroyed
if (!this.view) {
return;
}
this.view.setPageStyle(this.inspector.pageStyle);
if (!this.inspector.selection.isConnected() ||
!this.inspector.selection.isElementNode()) {
this.view.selectElement(null);
return;
}
if (!event || event == "new-node-front") {
let done = this.inspector.updating("rule-view");
this.view.selectElement(this.inspector.selection.nodeFront).then(done, done);
}
},
refresh: function() {
this.view.refreshPanel();
},
clearUserProperties: function() {
if (this.view && this.view.store && this.view.store.userProperties) {
this.view.store.userProperties.clear();
}
},
onLinkClicked: function(event) {
let rule = event.detail.rule;
let sheet = rule.parentStyleSheet;
// Chrome stylesheets are not listed in the style editor, so show
@ -63,7 +98,7 @@ function RuleViewTool(aInspector, aWindow, aIFrame)
}
location.then(({ source, href, line, column }) => {
let target = this.inspector.target;
if (ToolDefinitions.styleEditor.isTargetSupported(target)) {
if (Tools.styleEditor.isTargetSupported(target)) {
gDevTools.showToolbox(target, "styleeditor").then(function(toolbox) {
let sheet = source || href;
toolbox.getCurrentPanel().selectStyleSheet(sheet, line, column);
@ -71,110 +106,57 @@ function RuleViewTool(aInspector, aWindow, aIFrame)
}
return;
})
}
this.view.element.addEventListener("CssRuleViewCSSLinkClicked",
this._cssLinkHandler);
this._onSelect = this.onSelect.bind(this);
this.inspector.selection.on("detached", this._onSelect);
this.inspector.selection.on("new-node-front", this._onSelect);
this.refresh = this.refresh.bind(this);
this.inspector.on("layout-change", this.refresh);
this.inspector.selection.on("pseudoclass", this.refresh);
this._clearUserProperties = this._clearUserProperties.bind(this);
this.inspector.target.on("navigate", this._clearUserProperties);
this.onSelect();
}
exports.RuleViewTool = RuleViewTool;
RuleViewTool.prototype = {
onSelect: function RVT_onSelect(aEvent) {
if (!this.view) {
// Skip the event if RuleViewTool has been destroyed.
return;
}
this.view.setPageStyle(this.inspector.pageStyle);
if (!this.inspector.selection.isConnected() ||
!this.inspector.selection.isElementNode()) {
this.view.selectElement(null);
return;
}
if (!aEvent || aEvent == "new-node-front") {
let done = this.inspector.updating("rule-view");
this.view.selectElement(this.inspector.selection.nodeFront).then(done, done);
}
},
refresh: function RVT_refresh() {
this.view.refreshPanel();
onPropertyChanged: function() {
this.inspector.markDirty();
},
_clearUserProperties: function() {
if (this.view && this.view.store && this.view.store.userProperties) {
this.view.store.userProperties.clear();
}
onViewRefreshed: function() {
this.inspector.emit("rule-view-refreshed");
},
destroy: function RVT_destroy() {
destroy: function() {
this.inspector.off("layout-change", this.refresh);
this.inspector.selection.off("pseudoclass", this.refresh);
this.inspector.selection.off("new-node-front", this._onSelect);
this.inspector.target.off("navigate", this._clearUserProperties);
this.inspector.selection.off("new-node-front", this.onSelected);
this.inspector.target.off("navigate", this.clearUserProperties);
this.view.element.removeEventListener("CssRuleViewCSSLinkClicked",
this._cssLinkHandler);
this.view.element.removeEventListener("CssRuleViewChanged",
this._changeHandler);
this.view.element.removeEventListener("CssRuleViewRefreshed",
this._refreshHandler);
this.view.element.removeEventListener("CssRuleViewCSSLinkClicked", this.onLinkClicked);
this.view.element.removeEventListener("CssRuleViewChanged", this.onPropertyChanged);
this.view.element.removeEventListener("CssRuleViewRefreshed", this.onViewRefreshed);
this.doc.documentElement.removeChild(this.view.element);
this.view.destroy();
delete this.outerIFrame;
delete this.view;
delete this.doc;
delete this.inspector;
this.view = this.doc = this.inspector = null;
}
};
function ComputedViewTool(aInspector, aWindow, aIFrame)
{
this.inspector = aInspector;
this.window = aWindow;
this.document = aWindow.document;
this.outerIFrame = aIFrame;
this.view = new ComputedView.CssHtmlTree(this, aInspector.pageStyle);
function ComputedViewTool(inspector, window, iframe) {
this.inspector = inspector;
this.doc = window.document;
this._onSelect = this.onSelect.bind(this);
this.inspector.selection.on("detached", this._onSelect);
this.inspector.selection.on("new-node-front", this._onSelect);
this.view = new ComputedView.CssHtmlTree(this, inspector.pageStyle);
this.onSelected = this.onSelected.bind(this);
this.refresh = this.refresh.bind(this);
this.inspector.selection.on("detached", this.onSelected);
this.inspector.selection.on("new-node-front", this.onSelected);
this.inspector.on("layout-change", this.refresh);
this.inspector.selection.on("pseudoclass", this.refresh);
this.view.selectElement(null);
this.onSelect();
this.onSelected();
}
exports.ComputedViewTool = ComputedViewTool;
ComputedViewTool.prototype = {
onSelect: function CVT_onSelect(aEvent)
{
onSelected: function(event) {
// Ignore the event if the view has been destroyed
if (!this.view) {
// Skip the event if ComputedViewTool has been destroyed.
return;
}
this.view.setPageStyle(this.inspector.pageStyle);
@ -185,7 +167,7 @@ ComputedViewTool.prototype = {
return;
}
if (!aEvent || aEvent == "new-node-front") {
if (!event || event == "new-node-front") {
let done = this.inspector.updating("computed-view");
this.view.selectElement(this.inspector.selection.nodeFront).then(() => {
done();
@ -193,25 +175,22 @@ ComputedViewTool.prototype = {
}
},
refresh: function CVT_refresh() {
refresh: function() {
this.view.refreshPanel();
},
destroy: function CVT_destroy(aContext)
{
destroy: function() {
this.inspector.off("layout-change", this.refresh);
this.inspector.sidebar.off("computedview-selected", this.refresh);
this.inspector.selection.off("pseudoclass", this.refresh);
this.inspector.selection.off("new-node-front", this._onSelect);
this.inspector.selection.off("new-node-front", this.onSelected);
this.view.destroy();
delete this.view;
delete this.outerIFrame;
delete this.cssLogic;
delete this.cssHtmlTree;
delete this.window;
delete this.document;
delete this.inspector;
this.view = this.cssLogic = this.cssHtmlTree = null;
this.doc = this.inspector = null;
}
};
exports.RuleViewTool = RuleViewTool;
exports.ComputedViewTool = ComputedViewTool;