From bc5a13c461c7f4afcf26cf598b43d5eaf72bec7e Mon Sep 17 00:00:00 2001
From: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Fri, 31 Mar 2023 09:07:42 +0000
Subject: [PATCH] Bug 1822355 - [devtools] Change icon for highlighting node in
animation panel. r=devtools-reviewers,jdescottes.
Use the same icon and styling that we have for the highlight button in the rule view.
We only update the current background color we use so it still visible with the
animation item hover color.
Differential Revision: https://phabricator.services.mozilla.com/D173963
---
.../animation/components/AnimationTarget.js | 1 +
.../test/browser_animation_animation-target.js | 2 +-
devtools/client/inspector/animation/test/head.js | 2 +-
devtools/client/shared/components/reps/reps.css | 9 ++++++++-
devtools/client/themes/animation.css | 16 ++++++++++------
devtools/client/themes/rules.css | 2 +-
devtools/client/themes/variables.css | 6 ++++++
7 files changed, 28 insertions(+), 10 deletions(-)
diff --git a/devtools/client/inspector/animation/components/AnimationTarget.js b/devtools/client/inspector/animation/components/AnimationTarget.js
index 9781e94fab8b3..2fa392b3f6d6b 100644
--- a/devtools/client/inspector/animation/components/AnimationTarget.js
+++ b/devtools/client/inspector/animation/components/AnimationTarget.js
@@ -145,6 +145,7 @@ class AnimationTarget extends Component {
inspectIconTitle: getInspectorStr(
"inspector.nodePreview.highlightNodeLabel"
),
+ inspectIconClassName: "highlight-node",
object: translateNodeFrontToGrip(nodeFront),
onDOMNodeClick: () => this.select(),
onDOMNodeMouseOut: () => {
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-target.js b/devtools/client/inspector/animation/test/browser_animation_animation-target.js
index cb132b643bcb6..11fd8620c50fb 100644
--- a/devtools/client/inspector/animation/test/browser_animation_animation-target.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-target.js
@@ -55,7 +55,7 @@ add_task(async function() {
"objectBox is in the page exists"
);
ok(
- animationTargetEl.querySelector(".open-inspector").title,
+ animationTargetEl.querySelector(".highlight-node").title,
INSPECTOR_L10N.getStr("inspector.nodePreview.highlightNodeLabel")
);
}
diff --git a/devtools/client/inspector/animation/test/head.js b/devtools/client/inspector/animation/test/head.js
index 8ad3003e0447f..af7980a5e30eb 100644
--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -261,7 +261,7 @@ const clickOnInspectIcon = async function(animationInspector, panel, index) {
info(`Click on an inspect icon in animation target component[${index}]`);
const animationItemEl = await findAnimationItemByIndex(panel, index);
const iconEl = animationItemEl.querySelector(
- ".animation-target .objectBox .open-inspector"
+ ".animation-target .objectBox .highlight-node"
);
iconEl.scrollIntoView(false);
EventUtils.synthesizeMouseAtCenter(iconEl, {}, iconEl.ownerGlobal);
diff --git a/devtools/client/shared/components/reps/reps.css b/devtools/client/shared/components/reps/reps.css
index 6a11f8db72b1f..4bf052d78996b 100644
--- a/devtools/client/shared/components/reps/reps.css
+++ b/devtools/client/shared/components/reps/reps.css
@@ -298,7 +298,13 @@ button.open-inspector {
no-repeat;
}
-button:is(.open-accessibility-inspector,.open-inspector) {
+button.highlight-node {
+ background: url("chrome://devtools/skin/images/highlight-selector.svg")
+ no-repeat;
+}
+
+
+button:is(.open-accessibility-inspector, .open-inspector, .highlight-node) {
display: inline-block;
vertical-align: top;
height: 15px;
@@ -315,6 +321,7 @@ button:is(.open-accessibility-inspector,.open-inspector) {
.objectBox-node:hover .open-inspector,
.objectBox-textNode:hover .open-inspector,
.open-accessibility-inspector:hover,
+.highlight-node:hover,
.open-inspector:hover {
fill: var(--theme-icon-checked-color);
}
diff --git a/devtools/client/themes/animation.css b/devtools/client/themes/animation.css
index 3af8361af2112..b6b581bc3e38b 100644
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -199,17 +199,21 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h
white-space: nowrap;
}
-.animation-target .objectBox .open-inspector {
+.animation-target .objectBox .highlight-node {
+ fill: var(--theme-icon-dimmed-color);
flex: none;
}
-.animation-target .objectBox:hover .open-inspector {
- background-color: var(--comment-node-color);
+.animation-target .objectBox .highlight-node:hover{
+ fill: var(--theme-icon-color);
}
-.animation-target .objectBox .open-inspector:hover,
-.animation-target.highlighting .objectBox .open-inspector {
- background-color: var(--theme-highlight-blue);
+.animation-target .objectBox .highlight-node:active,
+.animation-target.highlighting .objectBox .highlight-node {
+ fill: var(--theme-icon-checked-color);
+ /* Since the icon is quite thin, it can be hard to differentiate it
+ from its regular state. Adding some background helps make it pop a bit */
+ background-color: var(--dimmed-highlighter-box-content-color);
}
/* Summary Graph */
diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css
index 8782904dea55a..ae0a559e4c0f9 100644
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -783,7 +783,7 @@ ul.ruleview-rule-ancestor-data {
fill: var(--theme-icon-checked-color);
/* Since the icon is quite thin, it can be hard to differentiate it
from its regular state. Adding some background helps make it pop a bit */
- background-color: var(--toolbarbutton-hover-background);
+ background-color: var(--dimmed-highlighter-box-content-color);
}
#ruleview-add-rule-button::before {
diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css
index f6ced356c5143..5c5057e3d742a 100644
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -32,6 +32,12 @@
/* The photon animation curve */
--animation-curve: cubic-bezier(0.07, 0.95, 0, 1);
+ /* This should be similar to --highlighter-box-content-color from highlighter.css,
+ * with lower opacity than the 0.6 we apply on highlighter so this can be used as
+ * background color without being too bold
+ */
+ --dimmed-highlighter-box-content-color:hsl(197,71%,73%,.3);
+
/*
* Photon Colors CSS Variables v3.3.2
* - Colors are taken from https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.css
--
GitLab