Button: add a toolbar button
This CL implements a toolbar button that is a square
icon only button to be used in toolbar contexts. Drive-by: fixes
the wrong 25px height that was a Figma problem.
Screenshots: https://imgur.com/a/XqmpBEm
Bug: none
Change-Id: I91763c2bc997e709c56db8cc6c821fc909abff86
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3211732
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
diff --git a/front_end/ui/components/buttons/button.css b/front_end/ui/components/buttons/button.css
index e299557..d1fe8f3 100644
--- a/front_end/ui/components/buttons/button.css
+++ b/front_end/ui/components/buttons/button.css
@@ -21,13 +21,18 @@
outline: none;
}
+:host {
+ display: inline-flex;
+ flex-direction: row;
+}
+
button {
align-items: center;
border-radius: 4px;
display: inline-flex;
font-family: inherit;
font-size: 12px;
- height: 25px;
+ height: 24px;
line-height: 14px;
padding: 5px 12px;
justify-content: center;
@@ -47,6 +52,23 @@
cursor: pointer;
}
+button.toolbar {
+ background: transparent;
+ border-radius: 2px;
+ border: none;
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+ overflow: hidden;
+ padding: 0;
+ white-space: nowrap;
+}
+
+button.toolbar.small {
+ height: 18px;
+ width: 18px;
+}
+
button.primary {
border: 1px solid var(--color-primary);
background: var(--color-primary);
@@ -86,6 +108,18 @@
border: 1px solid var(--color-button-secondary-background-pressed);
}
+button.toolbar:hover {
+ background-color: var(--color-button-secondary-background-hovering);
+}
+
+button.toolbar:active {
+ background-color: var(--color-button-secondary-background-pressed);
+}
+
+button.toolbar:focus-visible {
+ background-color: var(--color-background-elevation-2);
+}
+
button.text-with-icon {
padding: 0 12px 0 4px;
}
@@ -103,9 +137,11 @@
height: 19px;
}
-button.small devtools-icon {
- width: 14px;
- height: 14px;
+button.toolbar devtools-icon {
+ width: 24px;
+ height: 24px;
+
+ --icon-color: var(--color-text-primary);
}
button.primary devtools-icon {
@@ -115,3 +151,13 @@
button.secondary devtools-icon {
--icon-color: var(--color-primary);
}
+
+button.small devtools-icon {
+ width: 14px;
+ height: 14px;
+}
+
+button.toolbar.small devtools-icon {
+ width: 18px;
+ height: 18px;
+}
