Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-24 21:31:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1240183 - make styleeditor eslint-clean; r=pbro

Browse Source
This commit is contained in:
Tom Tromey 2016-01-15 08:34:45 -07:00
parent fbc8cb7a64
commit 2c8e61ac71
26 changed files with 390 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -112,7 +112,6 @@ devtools/client/shadereditor/**
devtools/client/shared/**
devtools/client/sourceeditor/**
devtools/client/storage/**
devtools/client/styleeditor/**
devtools/client/tilt/**
devtools/client/webaudioeditor/**
devtools/client/webconsole/**

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

@ -7,7 +7,6 @@
this.EXPORTED_SYMBOLS = ["StyleEditorUI"];
const Cc = Components.classes;
const Ci = Components.interfaces;
const Cu = Components.utils;
@ -18,11 +17,13 @@ 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");
const {gDevTools} = require("resource://devtools/client/framework/gDevTools.jsm");
/* import-globals-from StyleEditorUtil.jsm */
Cu.import("resource://devtools/client/styleeditor/StyleEditorUtil.jsm");
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");
const {PrefObserver, PREF_ORIG_SOURCES} = require("devtools/client/styleeditor/utils");
const {PrefObserver, PREF_ORIG_SOURCES} =
require("devtools/client/styleeditor/utils");
const csscoverage = require("devtools/server/actors/csscoverage");
const {console} = require("resource://gre/modules/Console.jsm");
const promise = require("promise");
@ -173,7 +174,8 @@ StyleEditorUI.prototype = {
this._contextMenu.addEventListener("popupshowing",
this._updateOpenLinkItem);
this._optionsMenu = this._panelDoc.getElementById("style-editor-options-popup");
this._optionsMenu =
this._panelDoc.getElementById("style-editor-options-popup");
this._optionsMenu.addEventListener("popupshowing",
this._onOptionsPopupShowing);
this._optionsMenu.addEventListener("popuphiding",
@ -187,7 +189,8 @@ StyleEditorUI.prototype = {
this._mediaItem.addEventListener("command",
this._toggleMediaSidebar);
this._openLinkNewTabItem = this._panelDoc.getElementById("context-openlinknewtab");
this._openLinkNewTabItem =
this._panelDoc.getElementById("context-openlinknewtab");
this._openLinkNewTabItem.addEventListener("command",
this._openLinkNewTab);
@ -358,13 +361,13 @@ StyleEditorUI.prototype = {
* Optional parent window for the file picker.
*/
_importFromFile: function(file, parentWindow) {
let onFileSelected = (file) => {
if (!file) {
let onFileSelected = (selectedFile) => {
if (!selectedFile) {
// nothing selected
return;
}
NetUtil.asyncFetch({
uri: NetUtil.newURI(file),
uri: NetUtil.newURI(selectedFile),
loadingNode: this._window.document,
contentPolicyType: Ci.nsIContentPolicy.TYPE_OTHER
}, (stream, status) => {
@ -372,11 +375,12 @@ StyleEditorUI.prototype = {
this.emit("error", { key: LOAD_ERROR });
return;
}
let source = NetUtil.readInputStreamToString(stream, stream.available());
let source =
NetUtil.readInputStreamToString(stream, stream.available());
stream.close();
this._debuggee.addStyleSheet(source).then((styleSheet) => {
this._onStyleSheetCreated(styleSheet, file);
this._onStyleSheetCreated(styleSheet, selectedFile);
});
});
};
@ -384,7 +388,6 @@ StyleEditorUI.prototype = {
showFilePicker(file, false, parentWindow, onFileSelected);
},
/**
* When a new or imported stylesheet has been added to the document.
* Add an editor for it.
@ -429,16 +432,22 @@ StyleEditorUI.prototype = {
},
/**
* This method handles the following cases related to the context menu item "_openLinkNewTabItem":
* This method handles the following cases related to the context
* menu item "_openLinkNewTabItem":
*
* 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
* 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
*/
_updateOpenLinkItem: function() {
this._openLinkNewTabItem.setAttribute("hidden", !this._contextMenuStyleSheet);
this._openLinkNewTabItem.setAttribute("hidden",
!this._contextMenuStyleSheet);
if (this._contextMenuStyleSheet) {
this._openLinkNewTabItem.setAttribute("disabled", !this._contextMenuStyleSheet.href);
this._openLinkNewTabItem.setAttribute("disabled",
!this._contextMenuStyleSheet.href);
}
},
@ -460,15 +469,14 @@ StyleEditorUI.prototype = {
_removeStyleSheetEditor: function(editor) {
if (editor.summary) {
this._view.removeItem(editor.summary);
}
else {
} else {
let self = this;
this.on("editor-added", function onAdd(event, added) {
if (editor == added) {
self.off("editor-added", onAdd);
self._view.removeItem(editor.summary);
}
})
});
}
editor.destroy();
@ -503,21 +511,21 @@ StyleEditorUI.prototype = {
disableAnimations: this._alwaysDisableAnimations,
ordinal: ordinal,
onCreate: function(summary, details, data) {
let editor = data.editor;
editor.summary = summary;
editor.details = details;
let createdEditor = data.editor;
createdEditor.summary = summary;
createdEditor.details = details;
wire(summary, ".stylesheet-enabled", function onToggleDisabled(event) {
event.stopPropagation();
event.target.blur();
editor.toggleDisabled();
createdEditor.toggleDisabled();
});
wire(summary, ".stylesheet-name", {
events: {
"keypress": (aEvent) => {
if (aEvent.keyCode == aEvent.DOM_VK_RETURN) {
"keypress": (event) => {
if (event.keyCode == event.DOM_VK_RETURN) {
this._view.activeSummary = summary;
}
}
@ -528,13 +536,13 @@ StyleEditorUI.prototype = {
event.stopPropagation();
event.target.blur();
editor.saveToFile(editor.savedFile);
createdEditor.saveToFile(createdEditor.savedFile);
});
this._updateSummaryForEditor(editor, summary);
this._updateSummaryForEditor(createdEditor, summary);
summary.addEventListener("contextmenu", (event) => {
this._contextMenuStyleSheet = editor.styleSheet;
summary.addEventListener("contextmenu", () => {
this._contextMenuStyleSheet = createdEditor.styleSheet;
}, false);
summary.addEventListener("focus", function onSummaryFocus(event) {
@ -554,44 +562,46 @@ StyleEditorUI.prototype = {
Services.prefs.setIntPref(PREF_SIDEBAR_WIDTH, sidebarWidth);
// update all @media sidebars for consistency
let sidebars = [...this._panelDoc.querySelectorAll(".stylesheet-sidebar")];
let sidebars =
[...this._panelDoc.querySelectorAll(".stylesheet-sidebar")];
for (let mediaSidebar of sidebars) {
mediaSidebar.setAttribute("width", sidebarWidth);
}
});
// autofocus if it's a new user-created stylesheet
if (editor.isNew) {
this._selectEditor(editor);
if (createdEditor.isNew) {
this._selectEditor(createdEditor);
}
if (this._isEditorToSelect(editor)) {
if (this._isEditorToSelect(createdEditor)) {
this.switchToSelectedSheet();
}
// 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
&& editor.styleSheet.styleSheetIndex == 0) {
this._selectEditor(editor);
&& createdEditor.styleSheet.styleSheetIndex == 0) {
this._selectEditor(createdEditor);
}
this.emit("editor-added", editor);
this.emit("editor-added", createdEditor);
}.bind(this),
onShow: function(summary, details, data) {
let editor = data.editor;
this.selectedEditor = editor;
let showEditor = data.editor;
this.selectedEditor = showEditor;
Task.spawn(function* () {
if (!editor.sourceEditor) {
if (!showEditor.sourceEditor) {
// only initialize source editor when we switch to this view
let inputElement = details.querySelector(".stylesheet-editor-input");
yield editor.load(inputElement);
let inputElement =
details.querySelector(".stylesheet-editor-input");
yield showEditor.load(inputElement);
}
editor.onShow();
showEditor.onShow();
this.emit("editor-selected", editor);
this.emit("editor-selected", showEditor);
// Is there any CSS coverage markup to include?
let usage = yield csscoverage.getUsage(this._target);
@ -599,21 +609,20 @@ StyleEditorUI.prototype = {
return;
}
let href = csscoverage.sheetToUrl(editor.styleSheet);
let data = yield usage.createEditorReport(href)
let href = csscoverage.sheetToUrl(showEditor.styleSheet);
let reportData = yield usage.createEditorReport(href);
editor.removeAllUnusedRegions();
showEditor.removeAllUnusedRegions();
if (data.reports.length > 0) {
if (reportData.reports.length > 0) {
// Only apply if this file isn't compressed. We detect a
// compressed file if there are more rules than lines.
let text = editor.sourceEditor.getText();
let text = showEditor.sourceEditor.getText();
let lineCount = text.split("\n").length;
let ruleCount = editor.styleSheet.ruleCount;
let ruleCount = showEditor.styleSheet.ruleCount;
if (lineCount >= ruleCount) {
editor.addUnusedRegions(data.reports);
}
else {
showEditor.addUnusedRegions(reportData.reports);
} else {
this.emit("error", { key: "error-compressed", level: "info" });
}
}
@ -733,13 +742,14 @@ StyleEditorUI.prototype = {
/**
* Returns an identifier for the given style sheet.
*
* @param {StyleSheet} aStyleSheet
* @param {StyleSheet} styleSheet
* The style sheet to be identified.
*/
getStyleSheetIdentifier: function (aStyleSheet) {
// Identify inline style sheets by their host page URI and index at the page.
return aStyleSheet.href ? aStyleSheet.href :
"inline-" + aStyleSheet.styleSheetIndex + "-at-" + aStyleSheet.nodeHref;
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;
},
/**
@ -767,7 +777,6 @@ StyleEditorUI.prototype = {
return this.switchToSelectedSheet();
},
/**
* Handler for an editor's 'property-changed' event.
* Update the summary in the UI.
@ -784,8 +793,8 @@ StyleEditorUI.prototype = {
*
* @param {StyleSheetEditor} editor
* @param {DOMElement} summary
* Optional item's summary element to update. If none, item corresponding
* to passed editor is used.
* Optional item's summary element to update. If none, item
* corresponding to passed editor is used.
*/
_updateSummaryForEditor: function(editor, summary) {
summary = summary || editor.summary;
@ -801,7 +810,7 @@ StyleEditorUI.prototype = {
ruleCount = "-";
}
var flags = [];
let flags = [];
if (editor.styleSheet.disabled) {
flags.push("disabled");
}
@ -873,7 +882,8 @@ StyleEditorUI.prototype = {
let div = this._panelDoc.createElement("div");
div.className = "media-rule-label";
div.addEventListener("click", this._jumpToLocation.bind(this, location));
div.addEventListener("click",
this._jumpToLocation.bind(this, location));
let cond = this._panelDoc.createElement("div");
cond.textContent = rule.conditionText;
@ -882,8 +892,13 @@ StyleEditorUI.prototype = {
cond.classList.add("media-condition-unmatched");
}
if (this._target.tab.tagName == "tab") {
cond.innerHTML = cond.textContent.replace(/(min\-|max\-)(width|height):\s\d+(px)/ig, "<a href='#' class='media-responsive-mode-toggle'>$&</a>");
cond.addEventListener("click", this._onMediaConditionClick.bind(this));
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));
}
div.appendChild(cond);
@ -916,7 +931,7 @@ StyleEditorUI.prototype = {
}
let conditionText = e.target.textContent;
let isWidthCond = conditionText.toLowerCase().indexOf("width") > -1;
let mediaVal = parseInt(/\d+/.exec(conditionText));
let mediaVal = parseInt(/\d+/.exec(conditionText), 10);
let options = isWidthCond ? {width: mediaVal} : {height: mediaVal};
this._launchResponsiveMode(options);
@ -936,12 +951,11 @@ StyleEditorUI.prototype = {
ResponsiveUIManager.runIfNeeded(win, tab);
if (options.width && options.height) {
ResponsiveUIManager.getResponsiveUIForTab(tab).setSize(options.width, options.height);
}
else if (options.width) {
ResponsiveUIManager.getResponsiveUIForTab(tab).setSize(options.width,
options.height);
} else if (options.width) {
ResponsiveUIManager.getResponsiveUIForTab(tab).setWidth(options.width);
}
else if (options.height) {
} else if (options.height) {
ResponsiveUIManager.getResponsiveUIForTab(tab).setHeight(options.height);
}
},
@ -978,4 +992,4 @@ StyleEditorUI.prototype = {
this._prefObserver.off(PREF_MEDIA_SIDEBAR, this._onMediaPrefChanged);
this._prefObserver.destroy();
}
}
};

123
devtools/client/styleeditor/StyleEditorUtil.jsm
View File

@ -3,6 +3,9 @@
* 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/. */
/* All top-level definitions here are exports. */
/* eslint no-unused-vars: [2, {"vars": "local"}] */
"use strict";
this.EXPORTED_SYMBOLS = [
@ -26,87 +29,82 @@ const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
const console = require("resource://gre/modules/Console.jsm").console;
const gStringBundle = Services.strings.createBundle(PROPERTIES_URL);
/**
* Returns a localized string with the given key name from the string bundle.
*
* @param aName
* @param name
* @param ...rest
* Optional arguments to format in the string.
* @return string
*/
this._ = function _(aName)
{
function _(name) {
try {
if (arguments.length == 1) {
return gStringBundle.GetStringFromName(aName);
return gStringBundle.GetStringFromName(name);
}
let rest = Array.prototype.slice.call(arguments, 1);
return gStringBundle.formatStringFromName(aName, rest, rest.length);
}
catch (ex) {
return gStringBundle.formatStringFromName(name, rest, rest.length);
} catch (ex) {
console.error(ex);
throw new Error("L10N error. '" + aName + "' is missing from " + PROPERTIES_URL);
throw new Error("L10N error. '" + name + "' is missing from " +
PROPERTIES_URL);
}
}
/**
* Assert an expression is true or throw if false.
*
* @param aExpression
* @param aMessage
* @param expression
* @param message
* Optional message.
* @return aExpression
* @return expression
*/
this.assert = function assert(aExpression, aMessage)
{
if (!!!(aExpression)) {
let msg = aMessage ? "ASSERTION FAILURE:" + aMessage : "ASSERTION FAILURE";
function assert(expression, message) {
if (!expression) {
let msg = message ? "ASSERTION FAILURE:" + message : "ASSERTION FAILURE";
log(msg);
throw new Error(msg);
}
return aExpression;
return expression;
}
/**
* Retrieve or set the text content of an element.
*
* @param DOMElement aRoot
* @param DOMElement root
* The element to use for querySelector.
* @param string aSelector
* @param string selector
* Selector string for the element to get/set the text content.
* @param string aText
* @param string textContent
* Optional text to set.
* @return string
* Text content of matching element or null if there were no element
* matching aSelector.
* matching selector.
*/
this.text = function text(aRoot, aSelector, aText)
{
let element = aRoot.querySelector(aSelector);
function text(root, selector, textContent) {
let element = root.querySelector(selector);
if (!element) {
return null;
}
if (aText === undefined) {
if (textContent === undefined) {
return element.textContent;
}
element.textContent = aText;
return aText;
element.textContent = textContent;
return textContent;
}
/**
* Iterates _own_ properties of an object.
*
* @param aObject
* @param object
* The object to iterate.
* @param function aCallback(aKey, aValue)
* @param function callback(aKey, aValue)
*/
function forEach(aObject, aCallback)
{
for (let key in aObject) {
if (aObject.hasOwnProperty(key)) {
aCallback(key, aObject[key]);
function forEach(object, callback) {
for (let key in object) {
if (object.hasOwnProperty(key)) {
callback(key, object[key]);
}
}
}
@ -116,52 +114,54 @@ function forEach(aObject, aCallback)
*
* @param ...rest
* One or multiple arguments to log.
* If multiple arguments are given, they will be joined by " " in the log.
* If multiple arguments are given, they will be joined by " "
* in the log.
*/
this.log = function log()
{
function log() {
console.logStringMessage(Array.prototype.slice.call(arguments).join(" "));
}
/**
* Wire up element(s) matching selector with attributes, event listeners, etc.
*
* @param DOMElement aRoot
* @param DOMElement root
* The element to use for querySelectorAll.
* Can be null if aSelector is a DOMElement.
* @param string|DOMElement aSelectorOrElement
* Can be null if selector is a DOMElement.
* @param string|DOMElement selectorOrElement
* Selector string or DOMElement for the element(s) to wire up.
* @param object aDescriptor
* An object describing how to wire matching selector, supported properties
* are "events" and "attributes" taking objects themselves.
* @param object descriptor
* An object describing how to wire matching selector,
* supported properties are "events" and "attributes" taking
* objects themselves.
* Each key of properties above represents the name of the event or
* attribute, with the value being a function used as an event handler or
* string to use as attribute value.
* If aDescriptor is a function, the argument is equivalent to :
* {events: {'click': aDescriptor}}
* If descriptor is a function, the argument is equivalent to :
* {events: {'click': descriptor}}
*/
this.wire = function wire(aRoot, aSelectorOrElement, aDescriptor)
{
function wire(root, selectorOrElement, descriptor) {
let matches;
if (typeof(aSelectorOrElement) == "string") { // selector
matches = aRoot.querySelectorAll(aSelectorOrElement);
if (typeof selectorOrElement == "string") {
// selector
matches = root.querySelectorAll(selectorOrElement);
if (!matches.length) {
return;
}
} else {
matches = [aSelectorOrElement]; // element
// element
matches = [selectorOrElement];
}
if (typeof(aDescriptor) == "function") {
aDescriptor = {events: {click: aDescriptor}};
if (typeof descriptor == "function") {
descriptor = {events: {click: descriptor}};
}
for (let i = 0; i < matches.length; i++) {
let element = matches[i];
forEach(aDescriptor.events, function (aName, aHandler) {
element.addEventListener(aName, aHandler, false);
forEach(descriptor.events, function(name, handler) {
element.addEventListener(name, handler, false);
});
forEach(aDescriptor.attributes, element.setAttribute);
forEach(descriptor.attributes, element.setAttribute);
}
}
@ -181,10 +181,9 @@ this.wire = function wire(aRoot, aSelectorOrElement, aDescriptor)
* @param AString suggestedFilename
* The suggested filename when toSave is true.
*/
this.showFilePicker = function showFilePicker(path, toSave, parentWindow,
callback, suggestedFilename)
{
if (typeof(path) == "string") {
function showFilePicker(path, toSave, parentWindow, callback,
suggestedFilename) {
if (typeof path == "string") {
try {
if (Services.io.extractScheme(path) == "file") {
let uri = Services.io.newURI(path, null, null);
@ -197,7 +196,8 @@ this.showFilePicker = function showFilePicker(path, toSave, parentWindow,
return;
}
try {
let file = Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsILocalFile);
let file =
Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsILocalFile);
file.initWithPath(path);
callback(file);
return;
@ -206,7 +206,8 @@ this.showFilePicker = function showFilePicker(path, toSave, parentWindow,
return;
}
}
if (path) { // "path" is an nsIFile
if (path) {
// "path" is an nsIFile
callback(path);
return;
}

44
devtools/client/styleeditor/StyleSheetEditor.jsm
View File

@ -12,7 +12,7 @@ const Ci = Components.interfaces;
const Cu = Components.utils;
const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
const Editor = require("devtools/client/sourceeditor/editor");
const Editor = require("devtools/client/sourceeditor/editor");
const promise = require("promise");
const {CssLogic} = require("devtools/shared/inspector/css-logic");
const {console} = require("resource://gre/modules/Console.jsm");
@ -20,9 +20,10 @@ const {console} = require("resource://gre/modules/Console.jsm");
Cu.import("resource://gre/modules/Services.jsm");
Cu.import("resource://gre/modules/FileUtils.jsm");
Cu.import("resource://gre/modules/NetUtil.jsm");
Cu.import("resource://gre/modules/osfile.jsm");
const { TextDecoder, OS } = Cu.import("resource://gre/modules/osfile.jsm", {});
Cu.import("resource://gre/modules/Task.jsm");
Cu.import("resource://devtools/shared/event-emitter.js");
/* import-globals-from StyleEditorUtil.jsm */
Cu.import("resource://devtools/client/styleeditor/StyleEditorUtil.jsm");
const LOAD_ERROR = "error-load";
@ -40,10 +41,10 @@ const TRANSITION_PREF = "devtools.styleeditor.transitions";
// How long to wait to update linked CSS file after original source was saved
// to disk. Time in ms.
const CHECK_LINKED_SHEET_DELAY=500;
const CHECK_LINKED_SHEET_DELAY = 500;
// How many times to check for linked file changes
const MAX_CHECK_COUNT=10;
const MAX_CHECK_COUNT = 10;
// The classname used to show a line that is not used
const UNUSED_CLASS = "cm-unused-line";
@ -92,7 +93,8 @@ function StyleSheetEditor(styleSheet, win, file, isNew, walker, highlighter) {
// event from the StyleSheetActor.
this._justSetText = false;
this._state = { // state to use when inputElement attaches
// state to use when inputElement attaches
this._state = {
text: "",
selection: {
start: {line: 0, ch: 0},
@ -123,7 +125,8 @@ function StyleSheetEditor(styleSheet, win, file, isNew, walker, highlighter) {
this.styleSheet.on("error", this._onError);
this.mediaRules = [];
if (this.cssSheet.getMediaRules) {
this.cssSheet.getMediaRules().then(this._onMediaRulesChanged, Cu.reportError);
this.cssSheet.getMediaRules().then(this._onMediaRulesChanged,
Cu.reportError);
}
this.cssSheet.on("media-rules-changed", this._onMediaRulesChanged);
this.cssSheet.on("style-applied", this._onStyleApplied);
@ -195,6 +198,7 @@ StyleSheetEditor.prototype = {
try {
this._friendlyName = decodeURI(this._friendlyName);
} catch (ex) {
// Ignore.
}
}
return this._friendlyName;
@ -226,13 +230,11 @@ StyleSheetEditor.prototype = {
if (uri.scheme == "file") {
let file = uri.QueryInterface(Ci.nsIFileURL).file;
path = file.path;
}
else if (this.savedFile) {
} else if (this.savedFile) {
let origHref = removeQuery(this.styleSheet.href);
let origUri = NetUtil.newURI(origHref);
path = findLinkedFilePath(uri, origUri, this.savedFile);
}
else {
} else {
// we can't determine path to generated file on disk
return;
}
@ -529,7 +531,8 @@ StyleSheetEditor.prototype = {
*/
_updateStyleSheet: function() {
if (this.styleSheet.disabled) {
return; // TODO: do we want to do this?
// TODO: do we want to do this?
return;
}
if (this._justSetText) {
@ -537,10 +540,11 @@ StyleSheetEditor.prototype = {
return;
}
this._updateTask = null; // reset only if we actually perform an update
// (stylesheet is enabled) so that 'missed' updates
// while the stylesheet is disabled can be performed
// when it is enabled back. @see enableStylesheet
// reset only if we actually perform an update
// (stylesheet is enabled) so that 'missed' updates
// while the stylesheet is disabled can be performed
// when it is enabled back. @see enableStylesheet
this._updateTask = null;
if (this.sourceEditor) {
this._state.text = this.sourceEditor.getText();
@ -582,7 +586,8 @@ StyleSheetEditor.prototype = {
return;
}
let node = yield this.walker.getStyleSheetOwnerNode(this.styleSheet.actorID);
let node =
yield this.walker.getStyleSheetOwnerNode(this.styleSheet.actorID);
yield this.highlighter.show(node, {
selector: info.selector,
hideInfoBar: true,
@ -601,7 +606,8 @@ StyleSheetEditor.prototype = {
* Optional nsIFile or string representing the filename to save in the
* background, no UI will be displayed.
* If not specified, the original style sheet URI is used.
* To implement 'Save' instead of 'Save as', you can pass savedFile here.
* To implement 'Save' instead of 'Save as', you can pass
* savedFile here.
* @param function(nsIFile aFile) callback
* Optional callback called when the operation has finished.
* aFile has the nsIFile object for saved file or null if the operation
@ -715,7 +721,7 @@ StyleSheetEditor.prototype = {
this.emit("linked-css-file-error");
error += " querying " + this.linkedCSSFile +
" original source location: " + this.savedFile.path
" original source location: " + this.savedFile.path;
Cu.reportError(error);
},
@ -750,7 +756,7 @@ StyleSheetEditor.prototype = {
this.saveToFile();
};
bindings["Esc"] = false;
bindings.Esc = false;
return bindings;
},

64
devtools/client/styleeditor/styleeditor-commands.js
View File

@ -29,40 +29,40 @@ exports.items = [{
description: l10n.lookup("editDesc"),
manual: l10n.lookup("editManual2"),
params: [
{
name: 'resource',
type: {
name: 'resource',
include: 'text/css'
},
description: l10n.lookup("editResourceDesc")
},
{
name: "line",
defaultValue: 1,
type: {
name: "number",
min: 1,
step: 10
},
description: l10n.lookup("editLineToJumpToDesc")
}
],
returnType: "editArgs",
exec: args => {
return { href: args.resource.name, line: args.line };
}
{
name: "resource",
type: {
name: "resource",
include: "text/css"
},
description: l10n.lookup("editResourceDesc")
},
{
name: "line",
defaultValue: 1,
type: {
name: "number",
min: 1,
step: 10
},
description: l10n.lookup("editLineToJumpToDesc")
}
],
returnType: "editArgs",
exec: args => {
return { href: args.resource.name, line: args.line };
}
}, {
item: "converter",
from: "editArgs",
to: "dom",
exec: function(args, context) {
let target = context.environment.target;
let gDevTools = require("resource://devtools/client/framework/gDevTools.jsm").gDevTools;
return gDevTools.showToolbox(target, "styleeditor").then(function(toolbox) {
let styleEditor = toolbox.getCurrentPanel();
styleEditor.selectStyleSheet(args.href, args.line);
return null;
});
}
exec: function(args, context) {
let target = context.environment.target;
let gDevTools = require("resource://devtools/client/framework/gDevTools.jsm").gDevTools;
return gDevTools.showToolbox(target, "styleeditor").then(function(toolbox) {
let styleEditor = toolbox.getCurrentPanel();
styleEditor.selectStyleSheet(args.href, args.line);
return null;
});
}
}];

21
devtools/client/styleeditor/styleeditor-panel.js
View File

@ -4,7 +4,9 @@
* 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/. */
const {Cc, Ci, Cu, Cr} = require("chrome");
"use strict";
const {Cu} = require("chrome");
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
Cu.import("resource://gre/modules/Services.jsm");
@ -13,6 +15,7 @@ var promise = require("promise");
var EventEmitter = require("devtools/shared/event-emitter");
Cu.import("resource://devtools/client/styleeditor/StyleEditorUI.jsm");
/* import-globals-from StyleEditorUtil.jsm */
Cu.import("resource://devtools/client/styleeditor/StyleEditorUtil.jsm");
loader.lazyGetter(this, "StyleSheetsFront",
@ -21,7 +24,7 @@ loader.lazyGetter(this, "StyleSheetsFront",
loader.lazyGetter(this, "StyleEditorFront",
() => require("devtools/server/actors/styleeditor").StyleEditorFront);
this.StyleEditorPanel = function StyleEditorPanel(panelWin, toolbox) {
var StyleEditorPanel = function StyleEditorPanel(panelWin, toolbox) {
EventEmitter.decorate(this);
this._toolbox = toolbox;
@ -31,7 +34,7 @@ this.StyleEditorPanel = function StyleEditorPanel(panelWin, toolbox) {
this.destroy = this.destroy.bind(this);
this._showError = this._showError.bind(this);
}
};
exports.StyleEditorPanel = StyleEditorPanel;
@ -57,8 +60,7 @@ StyleEditorPanel.prototype = {
if (this.target.form.styleSheetsActor) {
this._debuggee = StyleSheetsFront(this.target.client, this.target.form);
}
else {
} else {
/* We're talking to a pre-Firefox 29 server-side */
this._debuggee = StyleEditorFront(this.target.client, this.target.form);
}
@ -94,7 +96,8 @@ StyleEditorPanel.prototype = {
}
let notificationBox = this._toolbox.getNotificationBox();
let notification = notificationBox.getNotificationWithValue("styleeditor-error");
let notification =
notificationBox.getNotificationWithValue("styleeditor-error");
let level = (data.level === "info") ?
notificationBox.PRIORITY_INFO_LOW :
notificationBox.PRIORITY_CRITICAL_LOW;
@ -120,7 +123,7 @@ StyleEditorPanel.prototype = {
*/
selectStyleSheet: function(href, line, col) {
if (!this._debuggee || !this.UI) {
return;
return null;
}
return this.UI.selectStyleSheet(href, line - 1, col ? col - 1 : 0);
},
@ -146,10 +149,10 @@ StyleEditorPanel.prototype = {
return promise.resolve(null);
},
}
};
XPCOMUtils.defineLazyGetter(StyleEditorPanel.prototype, "strings",
function () {
function() {
return Services.strings.createBundle(
"chrome://devtools/locale/styleeditor.properties");
});

1
devtools/client/styleeditor/test/browser.ini
View File

@ -44,6 +44,7 @@ support-files =
sourcemaps-watching.html
test_private.css
test_private.html
doc_frame_script.js
doc_long.css
doc_uncached.css
doc_uncached.html

31
devtools/client/styleeditor/test/browser_styleeditor_cmd_edit.html
View File

@ -5,14 +5,16 @@
<head>
<meta charset="utf-8">
<title>Resources</title>
<script type="text/javascript" id="script1">
window.addEventListener('load', function() {
var pid = document.getElementById('pid');
var div = document.createElement('div');
div.id = 'divid';
div.classList.add('divclass');
div.appendChild(document.createTextNode('div'));
div.setAttribute('data-a1', 'div');
<script type="text/javascript;version=1.8" id="script1">
"use strict";
window.addEventListener("load", function() {
let pid = document.getElementById("pid");
let div = document.createElement("div");
div.id = "divid";
div.classList.add("divclass");
div.appendChild(document.createTextNode("div"));
div.setAttribute("data-a1", "div");
pid.parentNode.appendChild(div);
});
</script>
@ -37,12 +39,13 @@
<p class="pclass" id="pid" data-a1="p">paragraph</p>
<script>
var pid = document.getElementById('pid');
var h4 = document.createElement('h4');
h4.id = 'h4id';
h4.classList.add('h4class');
h4.appendChild(document.createTextNode('h4'));
h4.setAttribute('data-a1', 'h4');
"use strict";
let pid = document.getElementById("pid");
let h4 = document.createElement("h4");
h4.id = "h4id";
h4.classList.add("h4class");
h4.appendChild(document.createTextNode("h4"));
h4.setAttribute("data-a1", "h4");
pid.parentNode.appendChild(h4);
</script>

10
devtools/client/styleeditor/test/browser_styleeditor_cmd_edit.js
View File

@ -5,6 +5,12 @@
// Tests that the edit command works
// Import the GCLI test helper
/* import-globals-from ../../commandline/test/helpers.js */
Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/commandline/test/helpers.js",
this);
const TEST_URI = "http://example.com/browser/devtools/client/styleeditor/" +
"test/browser_styleeditor_cmd_edit.html";
@ -82,9 +88,9 @@ add_task(function* () {
resource: {
arg: " page1",
status: "INCOMPLETE",
message: 'Value required for \'resource\'.'
message: "Value required for \'resource\'."
},
line: { status: 'VALID' },
line: { status: "VALID" },
}
},
},

3
devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js
View File

@ -10,7 +10,8 @@ const MEDIA_PREF = "devtools.styleeditor.showMediaSidebar";
const RESIZE = 300;
const LABELS = ["not all", "all", "(max-width: 400px)",
"(min-height: 200px) and (max-height: 250px)", "(max-width: 600px)"];
"(min-height: 200px) and (max-height: 250px)",
"(max-width: 600px)"];
const LINE_NOS = [1, 7, 19, 25, 30];
const NEW_RULE = "\n@media (max-width: 600px) { div { color: blue; } }";

6
devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js
View File

@ -2,6 +2,8 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/* Tests responsive mode links for
* @media sidebar width and height related conditions */
@ -20,7 +22,7 @@ add_task(function*() {
yield testLinkifiedConditions(mediaEditor, gBrowser.selectedTab, ui);
});
function testLinkifiedConditions(editor, tab, ui) {
function* testLinkifiedConditions(editor, tab, ui) {
let sidebar = editor.details.querySelector(".stylesheet-sidebar");
let conditions = sidebar.querySelectorAll(".media-rule-condition");
let responsiveModeToggleClass = ".media-responsive-mode-toggle";
@ -29,7 +31,7 @@ function testLinkifiedConditions(editor, tab, ui) {
ok(!conditions[0].querySelector(responsiveModeToggleClass),
"There should be no links in the first media rule.");
ok(!conditions[1].querySelector(responsiveModeToggleClass),
"There should be no links in the second media rule.")
"There should be no links in the second media rule.");
ok(conditions[2].querySelector(responsiveModeToggleClass),
"There should be 1 responsive mode link in the media rule");
is(conditions[3].querySelectorAll(responsiveModeToggleClass).length, 2,

38
devtools/client/styleeditor/test/browser_styleeditor_new.js
View File

@ -13,7 +13,7 @@ add_task(function*() {
let { panel, ui } = yield openStyleEditorForURL(TESTCASE_URI);
let editor = yield createNew(ui, panel.panelWindow);
testInitialState(editor);
yield testInitialState(editor);
let originalHref = editor.styleSheet.href;
let waitForPropertyChange = onPropertyChange(editor);
@ -45,14 +45,14 @@ function createNew(ui, panelWindow) {
return deferred.promise;
}
function onPropertyChange(aEditor) {
function onPropertyChange(editor) {
let deferred = promise.defer();
aEditor.styleSheet.on("property-change", function onProp(property) {
editor.styleSheet.on("property-change", function onProp(property) {
// wait for text to be entered fully
let text = aEditor.sourceEditor.getText();
let text = editor.sourceEditor.getText();
if (property == "ruleCount" && text == TESTCASE_CSS_SOURCE + "}") {
aEditor.styleSheet.off("property-change", onProp);
editor.styleSheet.off("property-change", onProp);
deferred.resolve();
}
});
@ -60,33 +60,33 @@ function onPropertyChange(aEditor) {
return deferred.promise;
}
function testInitialState(aEditor) {
function* testInitialState(editor) {
info("Testing the initial state of the new editor");
let summary = aEditor.summary;
let summary = editor.summary;
ok(aEditor.sourceLoaded, "new editor is loaded when attached");
ok(aEditor.isNew, "new editor has isNew flag");
ok(editor.sourceLoaded, "new editor is loaded when attached");
ok(editor.isNew, "new editor has isNew flag");
ok(aEditor.sourceEditor.hasFocus(), "new editor has focus");
ok(editor.sourceEditor.hasFocus(), "new editor has focus");
summary = aEditor.summary;
summary = editor.summary;
let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
is(parseInt(ruleCount, 10), 0, "new editor initially shows 0 rules");
let computedStyle = content.getComputedStyle(content.document.body, null);
is(computedStyle.backgroundColor, "rgb(255, 255, 255)",
let color = yield getComputedStyleProperty("body", null, "background-color");
is(color, "rgb(255, 255, 255)",
"content's background color is initially white");
}
function typeInEditor(aEditor, panelWindow) {
function typeInEditor(editor, panelWindow) {
let deferred = promise.defer();
waitForFocus(function() {
for (let c of TESTCASE_CSS_SOURCE) {
EventUtils.synthesizeKey(c, {}, panelWindow);
}
ok(aEditor.unsaved, "new editor has unsaved flag");
ok(editor.unsaved, "new editor has unsaved flag");
deferred.resolve();
}, panelWindow);
@ -94,17 +94,17 @@ function typeInEditor(aEditor, panelWindow) {
return deferred.promise;
}
function testUpdated(aEditor, originalHref) {
function testUpdated(editor, originalHref) {
info("Testing the state of the new editor after editing it");
is(aEditor.sourceEditor.getText(), TESTCASE_CSS_SOURCE + "}",
is(editor.sourceEditor.getText(), TESTCASE_CSS_SOURCE + "}",
"rule bracket has been auto-closed");
let ruleCount = aEditor.summary.querySelector(".stylesheet-rule-count")
let ruleCount = editor.summary.querySelector(".stylesheet-rule-count")
.textContent;
is(parseInt(ruleCount, 10), 1,
"new editor shows 1 rule after modification");
is(aEditor.styleSheet.href, originalHref,
is(editor.styleSheet.href, originalHref,
"style sheet href did not change");
}

20
devtools/client/styleeditor/test/browser_styleeditor_sourcemap_watching.js
View File

@ -53,10 +53,8 @@ add_task(function*() {
yield editor.getSourceEditor();
let element = content.document.querySelector("div");
let style = content.getComputedStyle(element, null);
is(style.color, "rgb(255, 0, 102)", "div is red before saving file");
let color = yield getComputedStyleProperty("div", null, "color");
is(color, "rgb(255, 0, 102)", "div is red before saving file");
// let styleApplied = promise.defer();
let styleApplied = editor.once("style-applied");
@ -75,7 +73,8 @@ add_task(function*() {
yield styleApplied;
is(style.color, "rgb(0, 0, 255)", "div is blue after saving file");
color = yield getComputedStyleProperty("div", null, "color");
is(color, "rgb(0, 0, 255)", "div is blue after saving file");
});
function editSCSS(editor) {
@ -125,7 +124,6 @@ function copy(srcChromeURL, destFilePath) {
function read(srcChromeURL) {
let scriptableStream = Cc["@mozilla.org/scriptableinputstream;1"]
.getService(Ci.nsIScriptableInputStream);
let principal = Services.scriptSecurityManager.getSystemPrincipal();
let channel = NetUtil.newChannel({
uri: srcChromeURL,
@ -144,7 +142,7 @@ function read(srcChromeURL) {
return data;
}
function write(aData, aFile) {
function write(data, file) {
let deferred = promise.defer();
let converter = Cc["@mozilla.org/intl/scriptableunicodeconverter"]
@ -152,15 +150,15 @@ function write(aData, aFile) {
converter.charset = "UTF-8";
let istream = converter.convertToInputStream(aData);
let ostream = FileUtils.openSafeFileOutputStream(aFile);
let istream = converter.convertToInputStream(data);
let ostream = FileUtils.openSafeFileOutputStream(file);
NetUtil.asyncCopy(istream, ostream, function(status) {
if (!Components.isSuccessCode(status)) {
info("Coudln't write to " + aFile.path);
info("Coudln't write to " + file.path);
return;
}
deferred.resolve(aFile);
deferred.resolve(file);
});
return deferred.promise;

16
devtools/client/styleeditor/test/browser_styleeditor_sourcemaps.js
View File

@ -47,14 +47,14 @@ const contents = {
"jZjA2O1xuXG4jaGVhZGVyIHtcbiAgY29sb3I6ICRwaW5rO1xufSJdfQ==*/"
].join("\n"),
"test-stylus.styl": [
"paulrougetpink = #f06;",
"",
"div",
" color: paulrougetpink",
"",
"span",
" background-color: #EEE",
""
"paulrougetpink = #f06;",
"",
"div",
" color: paulrougetpink",
"",
"span",
" background-color: #EEE",
""
].join("\n"),
"test-stylus.css": [
"div {",

9
devtools/client/styleeditor/test/browser_styleeditor_sync.js
View File

@ -6,6 +6,7 @@
// Test that changes in the style inspector are synchronized into the
// style editor.
/* import-globals-from ../../inspector/shared/test/head.js */
Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";
@ -65,10 +66,6 @@ add_task(function*() {
// For the time being, the actor does not update the style's owning
// node's textContent. See bug 1205380.
yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function*() {
let style = content.document.querySelector("style");
return style.textContent;
}).then((textContent) => {
isnot(textContent, expectedText, "changes not written back to style node");
});
let textContent = yield executeInContent("Test:GetStyleContent", null, null);
isnot(textContent, expectedText, "changes not written back to style node");
});

1
devtools/client/styleeditor/test/browser_styleeditor_syncAddRule.js
View File

@ -5,6 +5,7 @@
// Test that adding a new rule is synced to the style editor.
/* import-globals-from ../../inspector/shared/test/head.js */
Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";

1
devtools/client/styleeditor/test/browser_styleeditor_syncAlreadyOpen.js
View File

@ -6,6 +6,7 @@
// Test that changes in the style inspector are synchronized into the
// style editor.
/* import-globals-from ../../inspector/shared/test/head.js */
Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";

1
devtools/client/styleeditor/test/browser_styleeditor_syncEditSelector.js
View File

@ -6,6 +6,7 @@
// Test that changes in the style inspector are synchronized into the
// style editor.
/* import-globals-from ../../inspector/shared/test/head.js */
Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";

5
devtools/client/styleeditor/test/browser_styleeditor_syncIntoRuleView.js
View File

@ -6,6 +6,7 @@
// Test that changes in the style editor are synchronized into the
// style inspector.
/* import-globals-from ../../inspector/shared/test/head.js */
Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
const TEST_URI = `
@ -35,14 +36,14 @@ add_task(function*() {
is(value, "chartreuse", "check that edits were synced to rule view");
});
function typeInEditor(aEditor, panelWindow) {
function typeInEditor(editor, panelWindow) {
let deferred = promise.defer();
waitForFocus(function() {
for (let c of TESTCASE_CSS_SOURCE) {
EventUtils.synthesizeKey(c, {}, panelWindow);
}
ok(aEditor.unsaved, "new editor has unsaved flag");
ok(editor.unsaved, "new editor has unsaved flag");
deferred.resolve();
}, panelWindow);

9
devtools/client/styleeditor/test/browser_styleeditor_transition_rule.js
View File

@ -24,12 +24,13 @@ add_task(function*() {
yield styleChanges;
let sheet = content.document.styleSheets[0];
let rules = yield executeInContent("Test:cssRules", {
num: 0
});
// Test that we removed the transition rule, but kept the rule we added
is(sheet.cssRules.length, 1, "only one rule in stylesheet");
is(sheet.cssRules[0].cssText, NEW_RULE,
"stylesheet only contains rule we added");
is(rules.length, 1, "only one rule in stylesheet");
is(rules[0], NEW_RULE, "stylesheet only contains rule we added");
});
/* Helpers */

5
devtools/client/styleeditor/test/browser_styleeditor_xul.js
View File

@ -4,6 +4,8 @@
// Test that the style-editor initializes correctly for XUL windows.
"use strict";
waitForExplicitFinish();
const TEST_URL = TEST_BASE + "doc_xulpage.xul";
@ -15,5 +17,6 @@ add_task(function*() {
let toolbox = yield gDevTools.showToolbox(target, "styleeditor");
let panel = toolbox.getCurrentPanel();
ok(panel, "The style-editor panel did initialize correctly for the XUL window");
ok(panel,
"The style-editor panel did initialize correctly for the XUL window");
});

37
devtools/client/styleeditor/test/doc_frame_script.js Normal file
View File

@ -0,0 +1,37 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/* globals addMessageListener, sendAsyncMessage */
addMessageListener("Test:cssRules", function(msg) {
let {num} = msg.data;
let sheet = content.document.styleSheets[num];
let result = [];
for (let i = 0; i < sheet.cssRules.length; ++i) {
result.push(sheet.cssRules[i].cssText);
}
sendAsyncMessage("Test:cssRules", result);
});
/**
* Get the property value from the computed style for an element.
* @param {Object} data Expects a data object with the following properties
* - {String} selector: The selector used to obtain the element.
* - {String} pseudo: pseudo id to query, or null.
* - {String} name: name of the property
* @return {String} The value, if found, null otherwise
*/
addMessageListener("Test:GetComputedStylePropertyValue", function(msg) {
let {selector, pseudo, name} = msg.data;
let element = content.document.querySelector(selector);
let style = content.document.defaultView.getComputedStyle(element, pseudo);
let value = style.getPropertyValue(name);
sendAsyncMessage("Test:GetComputedStylePropertyValue", value);
});
addMessageListener("Test:GetStyleContent", function() {
sendAsyncMessage("Test:GetStyleContent",
content.document.querySelector("style").textContent);
});

60
devtools/client/styleeditor/test/head.js
View File

@ -1,23 +1,28 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
const FRAME_SCRIPT_UTILS_URL = "chrome://devtools/content/shared/frame-script-utils.js"
const TEST_BASE = "chrome://mochitests/content/browser/devtools/client/styleeditor/test/";
const TEST_BASE_HTTP = "http://example.com/browser/devtools/client/styleeditor/test/";
const TEST_BASE_HTTPS = "https://example.com/browser/devtools/client/styleeditor/test/";
const TEST_HOST = 'mochi.test:8888';
/* All top-level definitions here are exports. */
/* eslint no-unused-vars: [2, {"vars": "local"}] */
"use strict";
const FRAME_SCRIPT_UTILS_URL =
"chrome://devtools/content/shared/frame-script-utils.js";
const TEST_BASE =
"chrome://mochitests/content/browser/devtools/client/styleeditor/test/";
const TEST_BASE_HTTP =
"http://example.com/browser/devtools/client/styleeditor/test/";
const TEST_BASE_HTTPS =
"https://example.com/browser/devtools/client/styleeditor/test/";
const TEST_HOST = "mochi.test:8888";
const EDITOR_FRAME_SCRIPT = getRootDirectory(gTestPath) + "doc_frame_script.js";
var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
var {TargetFactory} = require("devtools/client/framework/target");
var {console} = Cu.import("resource://gre/modules/Console.jsm", {});
var promise = require("promise");
var DevToolsUtils = require("devtools/shared/DevToolsUtils");
// Import the GCLI test helper
Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/commandline/test/helpers.js",
this);
DevToolsUtils.testing = true;
SimpleTest.registerCleanupFunction(() => {
DevToolsUtils.testing = false;
@ -61,8 +66,7 @@ function navigateTo(url) {
return navigating.promise;
}
function* cleanup()
{
function* cleanup() {
while (gBrowser.tabs.length > 1) {
let target = TargetFactory.forTab(gBrowser.selectedTab);
yield gDevTools.closeToolbox(target);
@ -92,6 +96,10 @@ var openStyleEditor = Task.async(function*(tab) {
*/
var openStyleEditorForURL = Task.async(function* (url, win) {
let tab = yield addTab(url, win);
gBrowser.selectedBrowser.messageManager.loadFrameScript(EDITOR_FRAME_SCRIPT,
false);
let result = yield openStyleEditor(tab);
result.tab = tab;
return result;
@ -128,15 +136,15 @@ function loadCommonFrameScript(tab) {
* Resolves to the response data if a response is expected, immediately
* resolves otherwise
*/
function executeInContent(name, data={}, objects={}, expectResponse=true) {
function executeInContent(name, data = {}, objects = {},
expectResponse = true) {
let mm = gBrowser.selectedBrowser.messageManager;
mm.sendAsyncMessage(name, data, objects);
if (expectResponse) {
return waitForContentMessage(name);
} else {
return promise.resolve();
}
return promise.resolve();
}
/**
@ -152,9 +160,27 @@ function waitForContentMessage(name) {
let def = promise.defer();
mm.addMessageListener(name, function onMessage(msg) {
mm.removeMessageListener(name, onMessage);
def.resolve(msg);
def.resolve(msg.data);
});
return def.promise;
}
registerCleanupFunction(cleanup);
/**
* Send an async message to the frame script and get back the requested
* computed style property.
*
* @param {String} selector
* The selector used to obtain the element.
* @param {String} pseudo
* pseudo id to query, or null.
* @param {String} name
* name of the property.
*/
function* getComputedStyleProperty(selector, pseudo, propName) {
return yield executeInContent("Test:GetComputedStylePropertyValue",
{selector,
pseudo,
name: propName});
}

5
devtools/client/styleeditor/test/longload.html
View File

@ -19,8 +19,9 @@
</head>
<body>
Time passes:
<script>
for (i = 0; i < 5000; i++) {
<script type="application/javascript;version=1.8">
"use strict";
for (let i = 0; i < 5000; i++) {
document.write("<br>...");
}
</script>

8
devtools/client/styleeditor/utils.js
View File

@ -4,7 +4,9 @@
* 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/. */
const {Cc, Ci, Cu, Cr} = require("chrome");
"use strict";
const {Cu} = require("chrome");
Cu.import("resource://gre/modules/Services.jsm");
Cu.import("resource://devtools/shared/event-emitter.js");
@ -34,7 +36,7 @@ PrefObserver.prototype = {
destroy: function() {
if (this.branch) {
this.branch.removeObserver('', this);
this.branch.removeObserver("", this);
}
}
};
};

1
testing/mochitest/browser.eslintrc
View File

@ -26,7 +26,6 @@
"is": false,
"isnot": false,
"ok": false,
"promise": false,
"registerCleanupFunction": false,
"requestLongerTimeout": false,
"SimpleTest": false,