issue(1946): Added guillemet to conditional breakpoint panel

Author: soapdog

src/components/Editor/ConditionalPanel.css

@@ -0,0 +1,30 @@
+.conditional-breakpoint-panel {
+  cursor: initial;
+  margin: 1em 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--theme-toolbar-background);
+  border-top: 1px solid var(--theme-splitter-color);
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.conditional-breakpoint-panel .prompt {
+  font-size: 1.8em;
+  color: var(--theme-highlight-blue);
+  padding-left: 3px;
+}
+
+.conditional-breakpoint-panel input {
+  margin: 5px 10px;
+  width: calc(100% - 4em);
+  border: none;
+  background: var(--theme-toolbar-background);
+  font-size: 14px;
+  color: var(--theme-comment);
+  line-height: 30px;
+}
+
+.conditional-breakpoint-panel input:focus {
+  outline-width: 0;
+}

src/components/Editor/ConditionalPanel.js

@@ -4,6 +4,9 @@ const { DOM: dom } = React;
 
 const ReactDOM = require("react-dom");
 
+require("./ConditionalPanel.css");
+
+
 function renderConditionalPanel({ condition, closePanel, setBreakpoint }:
   { condition: boolean, closePanel: Function, setBreakpoint: Function }) {
   let panel = document.createElement("div");
@@ -22,6 +25,10 @@ function renderConditionalPanel({ condition, closePanel, setBreakpoint }:
   ReactDOM.render(
     dom.div(
       { className: "conditional-breakpoint-panel" },
+      dom.div({
+        className: "prompt",
+        dangerouslySetInnerHTML: { __html: "»" }
+      }),
       dom.input({
         defaultValue: condition,
         placeholder: L10N.getStr("editor.conditionalPanel.placeholder"),

src/components/Editor/Editor.css

@@ -134,28 +134,6 @@ html[dir="rtl"] .editor-mount {
   user-select: none;
 }
 
-.conditional-breakpoint-panel {
-  cursor: initial;
-  margin: 1em 0;
-  position: relative;
-  background: var(--theme-toolbar-background);
-  border-top: 1px solid var(--theme-splitter-color);
-  border-bottom: 1px solid var(--theme-splitter-color);
-}
-
-.conditional-breakpoint-panel input {
-  margin: 5px 10px;
-  width: calc(100% - 2em);
-  border: none;
-  background: var(--theme-toolbar-background);
-  font-size: 14px;
-  color: var(--theme-comment);
-  line-height: 30px;
-}
-
-.conditional-breakpoint-panel input:focus {
-  outline-width: 0;
-}
 
 .function-search .autocomplete li:first-child {
   border-top: none;