зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1463055 - Font Editor: remove toggle from rule view and associated logic. r=pbro
MozReview-Commit-ID: JlH1oUh5jaN --HG-- extra : rebase_source : fe48bebad1c8bbb649d0a1d9db0bd1864775d3c6
This commit is contained in:
Razvan Caliman
Родитель
777680bbba
Коммит
6838bf9157
|
|
@ -9,7 +9,6 @@ const {
|
|||
RESET_EDITOR,
|
||||
UPDATE_AXIS_VALUE,
|
||||
UPDATE_CUSTOM_INSTANCE,
|
||||
UPDATE_EDITOR_VISIBILITY,
|
||||
UPDATE_EDITOR_STATE,
|
||||
UPDATE_PROPERTY_VALUE,
|
||||
} = require("./index");
|
||||
|
|
@ -30,14 +29,6 @@ module.exports = {
|
|||
};
|
||||
},
|
||||
|
||||
toggleFontEditor(isVisible, selector = "") {
|
||||
return {
|
||||
type: UPDATE_EDITOR_VISIBILITY,
|
||||
isVisible,
|
||||
selector,
|
||||
};
|
||||
},
|
||||
|
||||
updateCustomInstance() {
|
||||
return {
|
||||
type: UPDATE_CUSTOM_INSTANCE,
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
"use strict";
|
||||
|
||||
const Services = require("Services");
|
||||
const { gDevTools } = require("devtools/client/framework/devtools");
|
||||
const { getColor } = require("devtools/client/shared/theme");
|
||||
const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
|
||||
|
|
@ -24,7 +25,6 @@ const { updateFonts } = require("./actions/fonts");
|
|||
const {
|
||||
applyInstance,
|
||||
resetFontEditor,
|
||||
toggleFontEditor,
|
||||
updateAxis,
|
||||
updateCustomInstance,
|
||||
updateFontEditor,
|
||||
|
|
@ -33,7 +33,6 @@ const {
|
|||
const { updatePreviewText } = require("./actions/font-options");
|
||||
|
||||
const CUSTOM_INSTANCE_NAME = getStr("fontinspector.customInstanceName");
|
||||
const FONT_EDITOR_ID = "fonteditor";
|
||||
const FONT_PROPERTIES = [
|
||||
"font-optical-sizing",
|
||||
"font-size",
|
||||
|
|
@ -42,6 +41,7 @@ const FONT_PROPERTIES = [
|
|||
"font-variation-settings",
|
||||
"font-weight",
|
||||
];
|
||||
const PREF_FONT_EDITOR = "devtools.inspector.fonteditor.enabled";
|
||||
const REGISTERED_AXES_TO_FONT_PROPERTIES = {
|
||||
"ital": "font-style",
|
||||
"opsz": "font-optical-sizing",
|
||||
|
|
@ -74,9 +74,7 @@ class FontInspector {
|
|||
this.onNewNode = this.onNewNode.bind(this);
|
||||
this.onPreviewFonts = this.onPreviewFonts.bind(this);
|
||||
this.onPropertyChange = this.onPropertyChange.bind(this);
|
||||
this.onRuleSelected = this.onRuleSelected.bind(this);
|
||||
this.onToggleFontHighlight = this.onToggleFontHighlight.bind(this);
|
||||
this.onRuleUnselected = this.onRuleUnselected.bind(this);
|
||||
this.onRuleUpdated = this.onRuleUpdated.bind(this);
|
||||
this.onThemeChanged = this.onThemeChanged.bind(this);
|
||||
this.update = this.update.bind(this);
|
||||
|
|
@ -108,23 +106,14 @@ class FontInspector {
|
|||
this.provider = provider;
|
||||
|
||||
this.inspector.selection.on("new-node-front", this.onNewNode);
|
||||
this.inspector.sidebar.on("fontinspector-selected", this.onNewNode);
|
||||
this.ruleView.on("ruleview-rule-selected", this.onRuleSelected);
|
||||
this.ruleView.on("ruleview-rule-unselected", this.onRuleUnselected);
|
||||
this.ruleView.on("property-value-updated", this.onRuleUpdated);
|
||||
|
||||
// Listen for theme changes as the color of the previews depend on the theme
|
||||
gDevTools.on("theme-switched", this.onThemeChanged);
|
||||
|
||||
// The FontInspector is lazy-loaded. If it's not yet loaded, the event handler for
|
||||
// "ruleview-rule-selected" won't be attached to catch the first font editor toggle.
|
||||
// Here, we check if the rule was already marked as selected for the font editor
|
||||
// before the FontInspector was instantiated and call the event handler manually.
|
||||
const selectedRule = this.ruleView.getSelectedRules(FONT_EDITOR_ID)[0];
|
||||
if (selectedRule) {
|
||||
this.onRuleSelected({ editorId: FONT_EDITOR_ID, rule: selectedRule });
|
||||
} else {
|
||||
this.store.dispatch(updatePreviewText(""));
|
||||
this.update();
|
||||
// If a node is already selected, call the handler for node change.
|
||||
if (this.isSelectedNodeValid()) {
|
||||
this.onNewNode();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -151,10 +140,7 @@ class FontInspector {
|
|||
*/
|
||||
destroy() {
|
||||
this.inspector.selection.off("new-node-front", this.onNewNode);
|
||||
this.inspector.sidebar.off("fontinspector-selected", this.onNewNode);
|
||||
this.ruleView.off("property-value-updated", this.onRuleUpdated);
|
||||
this.ruleView.off("ruleview-rule-selected", this.onRuleSelected);
|
||||
this.ruleView.off("ruleview-rule-unselected", this.onRuleUnselected);
|
||||
gDevTools.off("theme-switched", this.onThemeChanged);
|
||||
|
||||
this.document = null;
|
||||
|
|
@ -363,6 +349,16 @@ class FontInspector {
|
|||
return this.inspector.sidebar &&
|
||||
this.inspector.sidebar.getCurrentTabID() === "fontinspector";
|
||||
}
|
||||
/**
|
||||
* Check if a selected node exists and fonts can apply to it.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
isSelectedNodeValid() {
|
||||
return this.inspector.selection.nodeFront &&
|
||||
this.inspector.selection.isConnected() &&
|
||||
this.inspector.selection.isElementNode();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync the Rule view with the styles from the page. Called in a throttled way
|
||||
|
|
@ -438,6 +434,7 @@ class FontInspector {
|
|||
onNewNode() {
|
||||
if (this.isPanelVisible()) {
|
||||
this.update();
|
||||
this.refreshFontEditor();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -472,29 +469,6 @@ class FontInspector {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler for "ruleview-rule-selected" event emitted from the rule view when a rule is
|
||||
* marked as selected for an editor.
|
||||
* If selected for the font editor, hold a reference to the rule so we know where to
|
||||
* put property changes coming from the font editor and show the font editor panel.
|
||||
*
|
||||
* @param {Object} eventData
|
||||
* Data payload for the event. Contains:
|
||||
* - {String} editorId - id of the editor for which the rule was selected
|
||||
* - {Rule} rule - reference to rule that was selected
|
||||
*/
|
||||
async onRuleSelected(eventData) {
|
||||
const { editorId, rule } = eventData;
|
||||
if (editorId === FONT_EDITOR_ID) {
|
||||
const selector = rule.matchedSelectors[0];
|
||||
this.selectedRule = rule;
|
||||
|
||||
await this.refreshFontEditor();
|
||||
this.store.dispatch(toggleFontEditor(true, selector));
|
||||
this.ruleView.on("property-value-updated", this.onRuleUpdated);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler for "property-value-updated" event emitted from the rule view whenever a
|
||||
* property value changes.
|
||||
|
|
@ -504,32 +478,6 @@ class FontInspector {
|
|||
}
|
||||
|
||||
/**
|
||||
* Handler for "ruleview-rule-unselected" event emitted from the rule view when a rule
|
||||
* was released from being selected for an editor.
|
||||
* If previously selected for the font editor, release the reference to the rule and
|
||||
* hide the font editor panel.
|
||||
*
|
||||
* @param {Object} eventData
|
||||
* Data payload for the event. Contains:
|
||||
* - {String} editorId - id of the editor for which the rule was released
|
||||
* - {Rule} rule - reference to rule that was released
|
||||
*/
|
||||
onRuleUnselected(eventData) {
|
||||
const { editorId, rule } = eventData;
|
||||
if (editorId === FONT_EDITOR_ID && rule == this.selectedRule) {
|
||||
this.nodeComputedStyle = {};
|
||||
this.selectedRule = null;
|
||||
this.textProperties.clear();
|
||||
this.writers.clear();
|
||||
|
||||
this.store.dispatch(toggleFontEditor(false));
|
||||
this.store.dispatch(resetFontEditor());
|
||||
|
||||
this.ruleView.off("property-value-updated", this.onRuleUpdated);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reveal a font's usage in the page.
|
||||
*
|
||||
* @param {String} font
|
||||
|
|
@ -592,7 +540,13 @@ class FontInspector {
|
|||
* update the font edtior to reflect a new external state.
|
||||
*/
|
||||
async refreshFontEditor() {
|
||||
if (!this.selectedRule || !this.inspector || !this.store) {
|
||||
// Early return if pref for font editor is not enabled.
|
||||
if (!Services.prefs.getBoolPref(PREF_FONT_EDITOR)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.inspector || !this.store || !this.isSelectedNodeValid()) {
|
||||
this.store.dispatch(resetFontEditor());
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ const {
|
|||
UPDATE_AXIS_VALUE,
|
||||
UPDATE_CUSTOM_INSTANCE,
|
||||
UPDATE_EDITOR_STATE,
|
||||
UPDATE_EDITOR_VISIBILITY,
|
||||
UPDATE_PROPERTY_VALUE,
|
||||
} = require("../actions/index");
|
||||
|
||||
|
|
@ -28,12 +27,8 @@ const INITIAL_STATE = {
|
|||
name: getStr("fontinspector.customInstanceName"),
|
||||
values: [],
|
||||
},
|
||||
// Whether or not the font editor is visible.
|
||||
isVisible: false,
|
||||
// CSS font properties defined on the selected rule.
|
||||
properties: {},
|
||||
// Selector text of the selected rule where updated font properties will be written.
|
||||
selector: "",
|
||||
};
|
||||
|
||||
let reducers = {
|
||||
|
|
@ -112,10 +107,6 @@ let reducers = {
|
|||
return { ...state, axes, fonts, properties };
|
||||
},
|
||||
|
||||
[UPDATE_EDITOR_VISIBILITY](state, { isVisible, selector }) {
|
||||
return { ...state, isVisible, selector };
|
||||
},
|
||||
|
||||
[UPDATE_PROPERTY_VALUE](state, { property, value }) {
|
||||
let newState = { ...state };
|
||||
newState.properties[property] = value;
|
||||
|
|
|
|||
|
|
@ -93,14 +93,8 @@ exports.fontEditor = {
|
|||
// Font variation instance currently selected
|
||||
instance: PropTypes.shape(fontVariationInstance),
|
||||
|
||||
// Whether or not the font editor is visible
|
||||
isVisible: PropTypes.bool,
|
||||
|
||||
// CSS font properties defined on the element
|
||||
properties: PropTypes.object,
|
||||
|
||||
// Selector text of the rule where font properties will be written
|
||||
selector: PropTypes.string,
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@ loader.lazyRequireGetter(this, "clipboardHelper", "devtools/shared/platform/clip
|
|||
const HTML_NS = "http://www.w3.org/1999/xhtml";
|
||||
const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
|
||||
const PREF_DEFAULT_COLOR_UNIT = "devtools.defaultColorUnit";
|
||||
const PREF_FONT_EDITOR = "devtools.inspector.fonteditor.enabled";
|
||||
const FILTER_CHANGED_TIMEOUT = 150;
|
||||
|
||||
// This is used to parse user input when filtering.
|
||||
|
|
@ -126,7 +125,6 @@ function CssRuleView(inspector, document, store, pageStyle) {
|
|||
this._onCopy = this._onCopy.bind(this);
|
||||
this._onFilterStyles = this._onFilterStyles.bind(this);
|
||||
this._onClearSearch = this._onClearSearch.bind(this);
|
||||
this._onRuleSelected = this._onRuleSelected.bind(this);
|
||||
this._onTogglePseudoClassPanel = this._onTogglePseudoClassPanel.bind(this);
|
||||
this._onTogglePseudoClass = this._onTogglePseudoClass.bind(this);
|
||||
this._onToggleClassPanel = this._onToggleClassPanel.bind(this);
|
||||
|
|
@ -162,7 +160,6 @@ function CssRuleView(inspector, document, store, pageStyle) {
|
|||
this.hoverCheckbox.addEventListener("click", this._onTogglePseudoClass);
|
||||
this.activeCheckbox.addEventListener("click", this._onTogglePseudoClass);
|
||||
this.focusCheckbox.addEventListener("click", this._onTogglePseudoClass);
|
||||
this.on("ruleview-rule-selected", this._onRuleSelected);
|
||||
|
||||
this._handlePrefChange = this._handlePrefChange.bind(this);
|
||||
this._handleUAStylePrefChange = this._handleUAStylePrefChange.bind(this);
|
||||
|
|
@ -174,7 +171,6 @@ function CssRuleView(inspector, document, store, pageStyle) {
|
|||
this._prefObserver.on(PREF_DEFAULT_COLOR_UNIT, this._handleDefaultColorUnitPrefChange);
|
||||
|
||||
this.showUserAgentStyles = Services.prefs.getBoolPref(PREF_UA_STYLES);
|
||||
this.showFontEditor = Services.prefs.getBoolPref(PREF_FONT_EDITOR);
|
||||
|
||||
// The popup will be attached to the toolbox document.
|
||||
this.popup = new AutocompletePopup(inspector._toolbox.doc, {
|
||||
|
|
@ -759,7 +755,6 @@ CssRuleView.prototype = {
|
|||
this.hoverCheckbox.removeEventListener("click", this._onTogglePseudoClass);
|
||||
this.activeCheckbox.removeEventListener("click", this._onTogglePseudoClass);
|
||||
this.focusCheckbox.removeEventListener("click", this._onTogglePseudoClass);
|
||||
this.off("ruleview-rule-selected", this._onRuleSelected);
|
||||
|
||||
this.searchField = null;
|
||||
this.searchClearButton = null;
|
||||
|
|
@ -1314,24 +1309,6 @@ CssRuleView.prototype = {
|
|||
return Array.isArray(rules) ? rules : [];
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when a rule from the Rule view was marked as selected for an editor.
|
||||
* Handle the event and show panels relevant for the given editor id.
|
||||
*
|
||||
* @param {Object} eventData
|
||||
* Data payload for the event. Contains:
|
||||
* - {String} editorId - id of the editor for which the rule was selected
|
||||
* - {Rule} rule - reference to rule that was selected
|
||||
*/
|
||||
_onRuleSelected(eventData) {
|
||||
const { editorId } = eventData;
|
||||
switch (editorId) {
|
||||
case "fonteditor":
|
||||
this.inspector.sidebar.show("fontinspector");
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Highlights the rule selector that matches the filter search value and
|
||||
* returns a boolean indicating whether or not the selector was highlighted.
|
||||
|
|
|
|||
|
|
@ -64,7 +64,6 @@ function RuleEditor(ruleView, rule) {
|
|||
// being edited
|
||||
this.isEditing = false;
|
||||
|
||||
this._onFontSwatchClick = this._onFontSwatchClick.bind(this);
|
||||
this._onNewProperty = this._onNewProperty.bind(this);
|
||||
this._newPropertyDestroy = this._newPropertyDestroy.bind(this);
|
||||
this._onSelectorDone = this._onSelectorDone.bind(this);
|
||||
|
|
@ -73,12 +72,10 @@ function RuleEditor(ruleView, rule) {
|
|||
this._onToolChanged = this._onToolChanged.bind(this);
|
||||
this._updateLocation = this._updateLocation.bind(this);
|
||||
this._onSourceClick = this._onSourceClick.bind(this);
|
||||
this._onRuleUnselected = this._onRuleUnselected.bind(this);
|
||||
|
||||
this.rule.domRule.on("location-changed", this._locationChanged);
|
||||
this.toolbox.on("tool-registered", this._onToolChanged);
|
||||
this.toolbox.on("tool-unregistered", this._onToolChanged);
|
||||
this.ruleView.on("ruleview-rule-unselected", this._onRuleUnselected);
|
||||
|
||||
this._create();
|
||||
}
|
||||
|
|
@ -88,11 +85,6 @@ RuleEditor.prototype = {
|
|||
this.rule.domRule.off("location-changed");
|
||||
this.toolbox.off("tool-registered", this._onToolChanged);
|
||||
this.toolbox.off("tool-unregistered", this._onToolChanged);
|
||||
this.ruleView.off("ruleview-rule-unselected", this._onRuleUnselected);
|
||||
|
||||
if (this.fontSwatch) {
|
||||
this.fontSwatch.removeEventListener("click", this._onFontSwatchClick);
|
||||
}
|
||||
|
||||
let url = null;
|
||||
if (this.rule.sheet) {
|
||||
|
|
@ -244,53 +236,6 @@ RuleEditor.prototype = {
|
|||
this.newProperty();
|
||||
});
|
||||
}
|
||||
|
||||
// Create the font editor toggle icon visible on hover.
|
||||
if (this.ruleView.showFontEditor) {
|
||||
this.fontSwatch = createChild(this.element, "div", {
|
||||
class: "ruleview-font-editor-toggle"
|
||||
});
|
||||
this.fontSwatch.textContent = "Aa";
|
||||
|
||||
this.fontSwatch.addEventListener("click", this._onFontSwatchClick);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for clicks on font swatch icon.
|
||||
* Toggles the selected state of the the current rule for the font editor.
|
||||
*
|
||||
* @param {MouseEvent} e
|
||||
* Mouse click event.
|
||||
*/
|
||||
_onFontSwatchClick: function(e) {
|
||||
const editorId = "fonteditor";
|
||||
const isActive = e.target.classList.toggle("active");
|
||||
|
||||
if (isActive) {
|
||||
this.ruleView.selectRule(this.rule, editorId);
|
||||
} else {
|
||||
this.ruleView.unselectRule(this.rule, editorId);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when a rule was released from being selected for an editor.
|
||||
* A rule may be released by: toggling a swatch icon, an action from an editor
|
||||
* (ex: close), selecting a different node in the markup view, etc.
|
||||
*
|
||||
* @param {Object} eventData
|
||||
* Data payload for the event. Contains:
|
||||
* - {String} editorId - id of the editor for which the rule was released
|
||||
* - {Rule} rule - reference to rule that was released
|
||||
*/
|
||||
_onRuleUnselected: function(eventData) {
|
||||
const { rule, editorId } = eventData;
|
||||
|
||||
// If no longer selected for the font editor, toggle the swatch icon.
|
||||
if (editorId === "fonteditor" && rule == this.rule) {
|
||||
this.fontSwatch.classList.remove("active");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -4,11 +4,6 @@
|
|||
|
||||
/* CSS Variables specific to this panel that aren't defined by the themes */
|
||||
:root {
|
||||
--rule-badge-active-background-color: var(--blue-50);
|
||||
--rule-badge-background-color: var(--grey-20);
|
||||
--rule-badge-border-color: #CACAD1;
|
||||
--rule-badge-color: var(--grey-90);
|
||||
--rule-badge-hover-background-color: #DFDFE8;
|
||||
--rule-highlight-background-color: var(--theme-highlight-yellow);
|
||||
--rule-overridden-item-border-color: var(--theme-content-color3);
|
||||
--rule-header-background-color: var(--theme-toolbar-background);
|
||||
|
|
@ -17,11 +12,6 @@
|
|||
}
|
||||
|
||||
:root.theme-dark {
|
||||
--rule-badge-active-background-color: var(--blue-60);
|
||||
--rule-badge-background-color: var(--grey-70);
|
||||
--rule-badge-border-color: var(--grey-50);
|
||||
--rule-badge-color: var(--grey-30);
|
||||
--rule-badge-hover-background-color: var(--grey-80);
|
||||
--rule-highlight-background-color: #521C76;
|
||||
--rule-overridden-item-border-color: var(--theme-content-color1);
|
||||
--rule-header-background-color: #222225;
|
||||
|
|
@ -600,34 +590,3 @@
|
|||
.ruleview-overridden-rule-filter:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ruleview-rule:not(:hover) .ruleview-font-editor-toggle:not(.active) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ruleview-font-editor-toggle {
|
||||
position: absolute;
|
||||
right: 1.5em;
|
||||
bottom: 0.5em;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
line-height: 11px;
|
||||
border: 1px solid var(--rule-badge-border-color);
|
||||
border-radius: 3px;
|
||||
padding: 0px 4px;
|
||||
-moz-user-select: none;
|
||||
cursor: pointer;
|
||||
background-color: var(--rule-badge-background-color);
|
||||
color: var(--rule-badge-color);
|
||||
}
|
||||
|
||||
.ruleview-font-editor-toggle:focus,
|
||||
.ruleview-font-editor-toggle:hover {
|
||||
background-color: var(--rule-badge-hover-background-color);
|
||||
}
|
||||
|
||||
.ruleview-font-editor-toggle.active {
|
||||
background-color: var(--rule-badge-active-background-color);
|
||||
border-color: var(--rule-badge-active-background-color);
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче