diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js index 7b777ae6d7..d6bb4dc698 100644 --- a/front_end/elements/StylesSidebarPane.js +++ b/front_end/elements/StylesSidebarPane.js @@ -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 */ diff --git a/front_end/elements/elements_strings.grdp b/front_end/elements/elements_strings.grdp index 500a46d20d..1fabdd267d 100644 --- a/front_end/elements/elements_strings.grdp +++ b/front_end/elements/elements_strings.grdp @@ -249,6 +249,9 @@ reveal + + Insert Style Rule Below + via inspector