Bug 1832810 - [devtools] Tweak style of MDN links in Compatibility panel. r=jdescottes,devtools-reviewers.

We make the link underlined, and we display a mdn icon next to it.

Differential Revision: https://phabricator.services.mozilla.com/D177912

devtools/client/jar.mn

@@ -54,6 +54,7 @@ devtools.jar:
     skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
     skin/images/highlight-selector.svg (themes/images/highlight-selector.svg)
     skin/images/open-inspector.svg (themes/images/open-inspector.svg)
+    skin/images/mdn.svg (themes/images/mdn.svg)
     skin/images/more.svg (themes/images/more.svg)
     skin/images/pause.svg (themes/images/pause.svg)
     skin/images/blocked.svg (themes/images/blocked.svg)

devtools/client/themes/compatibility.css

@@ -7,6 +7,7 @@
   --compatibility-cause-color: var(--theme-text-color-alt);
   --compatibility-issue-icon-size: calc(var(--compatibility-base-unit) * 3);
   --compatibility-issue-item-height: calc(var(--compatibility-base-unit) * 4);
+  --compatibility-issue-mdn-icon-fill-color: var(--grey-60);
   --compatibility-browser-icon-size: calc(var(--compatibility-base-unit) * 4);
   --compatibility-browser-icon-fill-color: var(--theme-icon-dimmed-color);
   --compatibility-browser-version-background-color: var(--theme-icon-error-color);
@@ -14,6 +15,7 @@
 }
 
 :root.theme-dark {
+  --compatibility-issue-mdn-icon-fill-color: var(--grey-40);
   --compatibility-browser-version-color: black;
 }
 
@@ -129,8 +131,22 @@
 
 .compatibility-issue-item__mdn-link {
   color: var(--theme-highlight-blue);
-  text-decoration: none;
   unicode-bidi: plaintext;
+  display: flex;
+  gap: var(--compatibility-base-unit);
+}
+
+.compatibility-issue-item__mdn-link::after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  background-image: url("chrome://devtools/skin/images/mdn.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  border: 1px solid var(--compatibility-issue-mdn-icon-fill-color);
+  -moz-context-properties: fill;
+  fill: var(--compatibility-issue-mdn-icon-fill-color);
 }
 
 .compatibility-issue-item__aliases {

devtools/client/themes/images/mdn.svg

@@ -0,0 +1,11 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g fill="context-fill white">
+    <path d="M22.4203 12.5367L12.8529 43.4192H8.91937L18.4879 12.5322L22.4203 12.5367Z"/>
+    <path d="M25.9079 12.5369V43.4193H22.4282V12.5369H25.9079Z"/>
+    <path d="M39.4393 12.5367L29.8719 43.4192H25.9349L35.5024 12.5322L39.4393 12.5367Z"/>
+    <path d="M42.919 12.5369V43.4193H39.4393V12.5369H42.919Z"/>
+  </g>
+</svg>