Web Inspector: Breakpoint Log action should support template literals

[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / BreakpointActionView.css

diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
index 4fe7c8b..cf55d69 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
@@ -27,30 +27,28 @@
     margin-bottom: 3px;
 }
 
+.breakpoint-action-button-container {
+    float: right;
+}
+
 .breakpoint-action-append-button,
 .breakpoint-action-remove-button {
-    border: 1px solid rgb(170, 170, 170);
-    border-radius: 10px;
-    background-size: 16px 16px;
     background-origin: border-box;
-    width: 16px;
-    height: 16px;
-    float: right;
-    margin-left: 2px;
+    width: 13px;
+    height: 13px;
+    margin-left: 5px;
     margin-top: 2px;
-}
-
-.breakpoint-action-append-button:active,
-.breakpoint-action-remove-button:active {
-    -webkit-filter: brightness(50%);
+    background-color: transparent;
+    border: none;
+    opacity: 0.6;
 }
 
 .breakpoint-action-append-button {
-    background-image: url(../Images/BreakpointActionAdd.svg), linear-gradient(to bottom, rgb(250, 250, 250), rgb(200, 200, 200));
+    background-image: url(../Images/Plus13.svg);
 }
 
 .breakpoint-action-remove-button {
-    background-image: url(../Images/BreakpointActionRemove.svg), linear-gradient(to bottom, rgb(250, 250, 250), rgb(200, 200, 200));
+    background-image: url(../Images/Minus.svg);
 }
 
 .breakpoint-action-block-body {
@@ -58,9 +56,16 @@
     padding: 8px;
     width: 100%;
     border-radius: 4px;
-    border: 1px solid rgb(190, 190, 190);
-    background-color: rgba(222, 222, 222, 0.95);
-    box-shadow: inset 0 0 2px rgb(200, 200, 200);
+    border: 1px solid hsl(0, 0%, 74%);
+    background-color: hsla(0, 0%, 87%, 0.95);
+    box-shadow: inset 0 0 2px hsl(0, 0%, 78%);
+}
+
+.breakpoint-action-block-body > .description {
+    color: var(--text-color-gray-medium);
+    text-align: right;
+    margin-top: 6px;
+    margin-right: 2px;
 }
 
 .breakpoint-action-block-body > input {
@@ -68,9 +73,10 @@
 }
 
 .breakpoint-action-eval-editor {
-    padding: 4px 0 2px 0;
+    margin: 2px 0;
+    padding: 2px 0 1px 0;
     -webkit-appearance: textfield;
-    border: 1px solid rgb(200, 200, 200);
+    border: 1px solid hsl(0, 0%, 78%);
     background: white;
 }