зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1192421 - Part 2: Make the rule-view non-interactive while loading and hide it after a delay. r=pbrosset
This commit is contained in:
Родитель
7506360f8e
Коммит
df8b5a0c65
|
@ -1168,6 +1168,7 @@ function CssRuleView(inspector, document, store, pageStyle) {
|
|||
|
||||
this._outputParser = new OutputParser(document);
|
||||
|
||||
this._onKeydown = this._onKeydown.bind(this);
|
||||
this._onKeypress = this._onKeypress.bind(this);
|
||||
this._onAddRule = this._onAddRule.bind(this);
|
||||
this._onContextMenu = this._onContextMenu.bind(this);
|
||||
|
@ -1193,6 +1194,7 @@ function CssRuleView(inspector, document, store, pageStyle) {
|
|||
|
||||
this.searchClearButton.hidden = true;
|
||||
|
||||
this.styleDocument.addEventListener("keydown", this._onKeydown);
|
||||
this.styleDocument.addEventListener("keypress", this._onKeypress);
|
||||
this.element.addEventListener("copy", this._onCopy);
|
||||
this.element.addEventListener("contextmenu", this._onContextMenu);
|
||||
|
@ -1727,6 +1729,8 @@ CssRuleView.prototype = {
|
|||
this.highlighters.destroy();
|
||||
|
||||
// Remove bound listeners
|
||||
this.styleDocument.removeEventListener("keydown", this._onKeydown);
|
||||
this.styleDocument.removeEventListener("keypress", this._onKeypress);
|
||||
this.element.removeEventListener("copy", this._onCopy);
|
||||
this.element.removeEventListener("contextmenu", this._onContextMenu);
|
||||
this.addRuleButton.removeEventListener("click", this._onAddRule);
|
||||
|
@ -1764,6 +1768,22 @@ CssRuleView.prototype = {
|
|||
this.popup.destroy();
|
||||
},
|
||||
|
||||
/**
|
||||
* Mark the view as selecting an element, disabling all interaction, and
|
||||
* visually clearing the view after a few milliseconds to avoid confusion
|
||||
* about which element's styles the rule view shows.
|
||||
*/
|
||||
_startSelectingElement: function() {
|
||||
this.element.classList.add("non-interactive");
|
||||
},
|
||||
|
||||
/**
|
||||
* Mark the view as no longer selecting an element, re-enabling interaction.
|
||||
*/
|
||||
_stopSelectingElement: function() {
|
||||
this.element.classList.remove("non-interactive");
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the view with a new selected element.
|
||||
*
|
||||
|
@ -1789,30 +1809,38 @@ CssRuleView.prototype = {
|
|||
this.refreshAddRuleButtonState();
|
||||
|
||||
if (!this._viewedElement) {
|
||||
this._stopSelectingElement();
|
||||
this._clearRules();
|
||||
this._showEmpty();
|
||||
this.refreshPseudoClassPanel();
|
||||
return promise.resolve(undefined);
|
||||
}
|
||||
|
||||
this._elementStyle = new ElementStyle(element, this.store,
|
||||
let elementStyle = new ElementStyle(element, this.store,
|
||||
this.pageStyle, this.showUserAgentStyles);
|
||||
this._elementStyle = elementStyle;
|
||||
|
||||
this._startSelectingElement();
|
||||
|
||||
return this._elementStyle.init().then(() => {
|
||||
if (this._viewedElement === element) {
|
||||
if (this._elementStyle === elementStyle) {
|
||||
return this._populate();
|
||||
}
|
||||
}).then(() => {
|
||||
if (this._viewedElement === element) {
|
||||
if (this._elementStyle === elementStyle) {
|
||||
if (!refresh) {
|
||||
this.element.scrollTop = 0;
|
||||
}
|
||||
this._stopSelectingElement();
|
||||
this._elementStyle.onChanged = () => {
|
||||
this._changed();
|
||||
};
|
||||
}
|
||||
}).then(null, e => {
|
||||
this._clearRules();
|
||||
if (this._elementStyle === elementStyle) {
|
||||
this._stopSelectingElement();
|
||||
this._clearRules();
|
||||
}
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
|
@ -2406,6 +2434,16 @@ CssRuleView.prototype = {
|
|||
this.inspector.togglePseudoClass(target.value);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle the keydown event in the rule view.
|
||||
*/
|
||||
_onKeydown: function(event) {
|
||||
if (this.element.classList.contains("non-interactive") &&
|
||||
(event.code === "Enter" || event.code === " ")) {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle the keypress event in the rule view.
|
||||
*/
|
||||
|
|
|
@ -24,6 +24,12 @@ body {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
#ruleview-container.non-interactive {
|
||||
pointer-events: none;
|
||||
visibility: collapse;
|
||||
transition: visibility 0.25s;
|
||||
}
|
||||
|
||||
.devtools-toolbar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
Загрузка…
Ссылка в новой задаче