diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index 31894d15295b..6f60d88b1588 100644 --- a/devtools/client/jar.mn +++ b/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) diff --git a/devtools/client/themes/compatibility.css b/devtools/client/themes/compatibility.css index 7b6c4129ee08..16a4f9858b88 100644 --- a/devtools/client/themes/compatibility.css +++ b/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 { diff --git a/devtools/client/themes/images/mdn.svg b/devtools/client/themes/images/mdn.svg new file mode 100644 index 000000000000..95325cb7c56c --- /dev/null +++ b/devtools/client/themes/images/mdn.svg @@ -0,0 +1,11 @@ + + + + + + + + +