From 065c674dde77ed705cf2d14be2c65b1dc0cfd494 Mon Sep 17 00:00:00 2001
From: Tim van der Lippe <tvanderlippe@chromium.org>
Date: Tue, 22 Sep 2020 12:21:22 +0100
Subject: [PATCH] Add back + button for style insertion of stylesheets

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>
---
 front_end/elements/StylesSidebarPane.js  | 21 +++++++++++++++++++++
 front_end/elements/elements_strings.grdp |  3 +++
 2 files changed, 24 insertions(+)

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 @@
   <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>