zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-10 21:54:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add back + button for style insertion of stylesheets

Browse Source 
This partially reverts
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2232549
which removed the "three-dot style menu". The menu contained multiple
things, one of which was the insertion of style sheet rules in a
specific stylesheet.

While the other color-related removals were mostly unused, the insertion
of a style rule in a specific stylesheet was used more often than we
anticipated. User feedback requested the feature to be added, as the
style insertion button on the top right would require a long-click
to insert into a specific stylesheet.

The code is largely taken from the original CL, but is slightly rewritten
as most of the buttons of the menu are removed and we only need to add
one button.

R=aerotwist@chromium.org

Fixed: 1128839
Change-Id: Ib54dc3c41c983ebe4f99e03b1d4f963ad62499c5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2422952
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
This commit is contained in:
Tim van der Lippe
2020-09-23 15:30:07 +00:00
committed by Commit Bot
parent e6e1b79912
commit 065c674dde
2 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/elements/StylesSidebarPane.js
+21
View File
@@ -1109,6 +1109,16 @@ export class StylePropertiesSection {
const closeBrace = this._innerElement.createChild('div', 'sidebar-pane-closing-brace');
closeBrace.textContent = '}';
if (this._style.parentRule) {
const newRuleButton =
new UI.Toolbar.ToolbarButton(Common.UIString.UIString('Insert Style Rule Below'), 'largeicon-add');
newRuleButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this._onNewRuleClick, this);
newRuleButton.element.tabIndex = -1;
const expandToolbar = new UI.Toolbar.Toolbar('sidebar-pane-section-toolbar', this._innerElement);
expandToolbar.appendToolbarItem(newRuleButton);
UI.ARIAUtils.markAsHidden(expandToolbar.element);
}
this._selectorElement.addEventListener('click', this._handleSelectorClick.bind(this), false);
this.element.addEventListener('mousedown', this._handleEmptySpaceMouseDown.bind(this), false);
this.element.addEventListener('click', this._handleEmptySpaceClick.bind(this), false);
@@ -1430,6 +1440,17 @@ export class StylePropertiesSection {
return curElement ? curElement._section : null;
}
/**
* @param {!Common.EventTarget.EventTargetEvent} event
*/
_onNewRuleClick(event) {
event.data.consume();
const rule = this._style.parentRule;
const range =
TextUtils.TextRange.TextRange.createFromLocation(rule.style.range.endLine, rule.style.range.endColumn + 1);
this._parentPane._addBlankSection(this, /** @type {string} */ (rule.styleSheetId), range);
}
/**
* @param {!SDK.CSSModel.Edit} edit
*/
front_end/elements/elements_strings.grdp
+3
View File
@@ -249,6 +249,9 @@
<message name="IDS_DEVTOOLS_abdf882c25e08d9ba219fe33f17591fe" desc="Link text content in Elements Tree Outline of the Elements panel">
reveal
</message>
<message name="IDS_DEVTOOLS_ad4ac01e4a5688063dace5ba5d0f04de" desc="Tooltip text that appears when hovering over the largeicon add button in the Styles Sidebar Pane of the Elements panel">
Insert Style Rule Below
</message>
<message name="IDS_DEVTOOLS_b0351810a5721f657b088608865849dd" desc="Text in Styles Sidebar Pane of the Elements panel">
via inspector
</message>