Bug 1597197 - Add a feature-callout badge on the open editor icon. r=Honza.

Differential Revision: https://phabricator.services.mozilla.com/D53394

--HG--
extra : moz-landing-system : lando

devtools/client/themes/common.css

@@ -490,6 +490,16 @@ checkbox:-moz-focusring {
   margin-inline-start: 3px;
 }
 
+.devtools-button.devtools-feature-callout::after {
+  content: url("chrome://browser/skin/badge-blue.svg");
+  width: 14px;
+  height: 14px;
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
 /* Text input */
 
 .devtools-textinput,

devtools/client/webconsole/components/Input/JSTerm.js

@@ -1168,7 +1168,9 @@ class JSTerm extends Component {
     }
 
     return dom.button({
-      className: "devtools-button webconsole-input-openEditorButton",
+      className:
+        "devtools-button webconsole-input-openEditorButton" +
+        (this.props.showEditorOnboarding ? " devtools-feature-callout" : ""),
       title: l10n.getFormatStr("webconsole.input.openEditorButton.tooltip2", [
         isMacOS ? "Cmd + B" : "Ctrl + B",
       ]),
@@ -1228,6 +1230,7 @@ class JSTerm extends Component {
         className: "jsterm-input-container devtools-input devtools-monospace",
         key: "jsterm-container",
         "aria-live": "off",
+        tabindex: -1,
         onContextMenu: this.onContextMenu,
         ref: node => {
           this.node = node;