[Animations] Use animation icon for the animation link swatch

Drive-by:
* Add `title` to the icon

Bug: 349566091
Change-Id: Ic21b475cf512c4ddb910a2408f6eb6ffd9d9a3f7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5973206
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Ergün Erdoğmuş <[email protected]>
Reviewed-by: Changhao Han <[email protected]>

Author: ergunsh

config/gni/devtools_grd_files.gni

@@ -36,6 +36,7 @@ grd_files_release_sources = [
   "front_end/Images/align-self-end.svg",
   "front_end/Images/align-self-start.svg",
   "front_end/Images/align-self-stretch.svg",
+  "front_end/Images/animation.svg",
   "front_end/Images/arrow-back.svg",
   "front_end/Images/arrow-down.svg",
   "front_end/Images/arrow-drop-down-dark.svg",

config/gni/devtools_image_files.gni

@@ -43,6 +43,7 @@ devtools_svg_sources = [
   "align-self-end.svg",
   "align-self-start.svg",
   "align-self-stretch.svg",
+  "animation.svg",
   "arrow-back.svg",
   "arrow-down.svg",
   "arrow-drop-down-dark.svg",

front_end/Images/src/animation.svg

@@ -141,6 +141,10 @@ const UIStrings = {
    *@description A context menu item in Styles panel to copy all declarations of CSS rule as JavaScript properties.
    */
   copyAllCssDeclarationsAsJs: 'Copy all declarations as JS',
+  /**
+   *@description Title of the link in Styles panel to jump to the Animations panel.
+   */
+  jumpToAnimationsPanel: 'Jump to Animations panel',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylePropertyTreeElement.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -770,9 +774,10 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
             return;
           }
 
-          const icon = IconButton.Icon.create('open-externally', 'open-in-animations-panel');
+          const icon = IconButton.Icon.create('animation', 'open-in-animations-panel');
           icon.setAttribute('jslog', `${VisualLogging.link('open-in-animations-panel').track({click: true})}`);
           icon.setAttribute('role', 'button');
+          icon.setAttribute('title', i18nString(UIStrings.jumpToAnimationsPanel));
           icon.addEventListener('mouseup', ev => {
             ev.consume(true);
 

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -281,10 +281,10 @@ devtools-icon.open-in-animations-panel {
   transform: scale(0.7);
   margin: -5px -2px -3px -4px;
   user-select: none;
-  color: var(--icon-default);
+  color: var(--icon-css);
   cursor: default;
 
   &:hover {
-    color: var(--icon-default-hover);
+    color: var(--icon-css-hover);
   }
 }