Bug 1590982: Iconize unsupported browsers. r=rcaliman,ladybenko,Gijs

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

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/compatibility/components/UnsupportedBrowserItem.js

@@ -10,6 +10,41 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const Types = require("../types");
 
+const ICONS = {
+  firefox: {
+    src: "chrome://devtools/skin/images/browsers/firefox.svg",
+    isMobileIconNeeded: false,
+  },
+  firefox_android: {
+    src: "chrome://devtools/skin/images/browsers/firefox.svg",
+    isMobileIconNeeded: true,
+  },
+  chrome: {
+    src: "chrome://devtools/skin/images/browsers/chrome.svg",
+    isMobileIconNeeded: false,
+  },
+  chrome_android: {
+    src: "chrome://devtools/skin/images/browsers/chrome.svg",
+    isMobileIconNeeded: true,
+  },
+  safari: {
+    src: "chrome://devtools/skin/images/browsers/safari.svg",
+    isMobileIconNeeded: false,
+  },
+  safari_ios: {
+    src: "chrome://devtools/skin/images/browsers/safari.svg",
+    isMobileIconNeeded: true,
+  },
+  edge: {
+    src: "chrome://devtools/skin/images/browsers/edge.svg",
+    isMobileIconNeeded: false,
+  },
+  edge_mobile: {
+    src: "chrome://devtools/skin/images/browsers/edge.svg",
+    isMobileIconNeeded: true,
+  },
+};
+
 class UnsupportedBrowserItem extends PureComponent {
   static get propTypes() {
     return {
@@ -25,14 +60,30 @@ class UnsupportedBrowserItem extends PureComponent {
   }
 
   render() {
-    const { name, versions } = this.props;
+    const { id, name, versions } = this.props;
 
     const versionsTitle = versions
       .map(({ alias, version }) => version + (alias ? `(${alias})` : ""))
       .join(", ");
     const title = `${name} ${versionsTitle}`;
 
-    return dom.li({ title }, name);
+    const icon = ICONS[id];
+
+    return dom.li(
+      {
+        className:
+          "compatibility-unsupported-browser-item" +
+          (icon.isMobileIconNeeded
+            ? " compatibility-unsupported-browser-item--mobile"
+            : ""),
+      },
+      dom.img({
+        className: "compatibility-unsupported-browser-item__icon",
+        alt: title,
+        title,
+        src: icon.src,
+      })
+    );
   }
 }
 

devtools/client/inspector/compatibility/components/UnsupportedBrowserList.js

@@ -51,7 +51,9 @@ class UnsupportedBrowserList extends PureComponent {
     );
 
     return dom.ul(
-      {},
+      {
+        className: "compatibility-unsupported-browser-list",
+      },
       [...browsersMap.entries()].map(([id, { name, versions }]) =>
         UnsupportedBrowserItem({ key: id, id, name, versions })
       )

devtools/client/jar.mn

@@ -100,6 +100,11 @@ devtools.jar:
     skin/images/performance-details-waterfall.svg (themes/images/performance-details-waterfall.svg)
     skin/images/performance-details-call-tree.svg (themes/images/performance-details-call-tree.svg)
     skin/images/performance-details-flamegraph.svg (themes/images/performance-details-flamegraph.svg)
+    skin/images/browsers/firefox.svg (themes/images/browsers/firefox.svg)
+    skin/images/browsers/chrome.svg (themes/images/browsers/chrome.svg)
+    skin/images/browsers/edge.svg (themes/images/browsers/edge.svg)
+    skin/images/browsers/safari.svg (themes/images/browsers/safari.svg)
+    skin/images/browsers/mobile.svg (themes/images/browsers/mobile.svg)
     skin/breadcrumbs.css (themes/breadcrumbs.css)
     skin/chart.css (themes/chart.css)
     skin/widgets.css (themes/widgets.css)

devtools/client/themes/compatibility.css

@@ -6,6 +6,7 @@
   --compatibility-base-unit: 4px;
   --compatibility-cause-color: var(--theme-text-color-alt);
   --compatibility-issue-icon-size: calc(var(--compatibility-base-unit) * 3);
+  --compatibility-unsupported-browser-icon-size: calc(var(--compatibility-base-unit) * 4);
 }
 
 .compatibility-app {
@@ -19,14 +20,30 @@
   padding: 0;
 }
 
+/*
+ * Layout of the issue item
+ *  +------+--------------+-----------------+---------------------------+
+ *  | icon | issue factor | (issue causes)? | unsupported browser icons |
+ *  +------+--------------+-----------------+---------------------------+
+ */
 .compatibility-issue-item {
-  display: flex;
-  gap: var(--compatibility-base-unit);
+  display: grid;
+  grid-template-columns: var(--compatibility-issue-icon-size) max-content 1fr max-content;
   align-items: center;
   padding-inline-start: calc(var(--compatibility-base-unit) * 2);
+  padding-inline-end: calc(var(--compatibility-base-unit) * 4);
   padding-block: calc(var(--compatibility-base-unit) * 2);
 }
 
+.compatibility-issue-item > *:nth-child(-n+2) {
+  /*
+   * The reason why we don't use `gap` in `.compatibility-issue-item` is
+   * because there are cases that the `issue causes` element is null,
+   * then the layout will be broken a bit.
+   */
+  margin-inline-start: var(--compatibility-base-unit);
+}
+
 .compatibility-issue-item:not(:last-child) {
   border-block-end: 1px solid var(--theme-splitter-color);
 }
@@ -57,3 +74,41 @@
   color: var(--theme-highlight-blue);
   text-decoration: none;
 }
+
+.compatibility-unsupported-browser-list {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  list-style: none;
+  padding: 0;
+  gap: calc(var(--compatibility-base-unit) * 2);
+}
+
+.compatibility-unsupported-browser-item {
+  width: var(--compatibility-unsupported-browser-icon-size);
+  height: var(--compatibility-unsupported-browser-icon-size);
+  position: relative;
+}
+
+.compatibility-unsupported-browser-item--mobile::after {
+  content: "";
+  width: calc(var(--compatibility-base-unit) * 2);
+  height: calc(var(--compatibility-base-unit) * 3);
+  background-color: var(--theme-body-background);
+  background-size: calc(var(--compatibility-base-unit) * 2 - 2px);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url(chrome://devtools/skin/images/browsers/mobile.svg);
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+  position: absolute;
+  right: calc(var(--compatibility-base-unit) * -1);
+  bottom: calc(var(--compatibility-base-unit) * -1);
+}
+
+.compatibility-unsupported-browser-item__icon {
+  width: 100%;
+  height: 100%;
+  fill: var(--theme-icon-dimmed-color);
+  -moz-context-properties: fill;
+}

devtools/client/themes/images/browsers/chrome.svg

@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="30" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill"
+      d="M13.953 0A13.9 13.9 0 0 1 21 1.875a14.04 14.04 0 0 1 5.5 5.812l-11.594-.609c-3.281-.187-6.406 1.656-7.484 4.75L3.11 5.203C5.798 1.859 9.829.016 13.954 0zM2.281 6.328l5.266 10.359c1.484 2.922 4.625 4.703 7.875 4.094l-3.594 7.047C5.125 26.797 0 21 0 14c0-2.828.844-5.469 2.281-7.672zm24.781 2.641c2.453 6.312 0 13.656-6.062 17.156a13.962 13.962 0 0 1-7.781 1.859l6.328-9.734c1.797-2.766 1.766-6.375-.375-8.875zM14 9.281c2.609 0 4.719 2.109 4.719 4.719S16.61 18.719 14 18.719 9.281 16.61 9.281 14 11.39 9.281 14 9.281z"/>
+</svg>

devtools/client/themes/images/browsers/edge.svg

@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="28" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill"
+      d="M1.078 12.422h.016C1.906 5.953 6.328-.015 14.235 0c4.797 0 8.75 2.25 11.062 6.391 1.188 2.141 1.625 4.422 1.625 6.906v2.938H9.344c.078 7.25 10.656 7 15.219 3.813v5.891c-2.672 1.609-8.703 3-13.406 1.203-3.984-1.531-6.766-5.672-6.813-9.703-.063-5.203 2.578-8.656 6.813-10.625-.891 1.125-1.578 2.344-1.937 4.453h9.922c.578-5.922-5.609-5.922-5.609-5.922C7.689 5.548 3.47 8.954 1.08 12.423z"/>
+</svg>

devtools/client/themes/images/browsers/firefox.svg

@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="27" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill"
+      d="M14.109 28c-6.031 0-10.828-3.531-13.031-8.578C-1.391 13.813.578 4.828 4.969.86l-.172 4.391c.219-.281 1.891-.359 2.156 0 .906-1.734 3.828-3.031 6.172-3.078-.891.75-2.953 3.484-2.781 4.875 1.141.359 2.891.375 3.813.438.281.156.234 1.109-.328 1.891 0 0-.734 1.016-2.719 1.375l.234 2.953-2.172-1.047c-.703 1.781.984 3.359 2.734 3.063 1.937-.328 2.625-1.594 3.984-1.516 1.344.078 1.875.828 1.703 1.531 0 0-.219.844-1.672.703-1.234 1.953-2.875 2.812-5.531 2.578 4.031 3.344 9.469.313 10.844-2.422 1.375-2.719.172-6.766-1.203-7.906 1.625.703 2.75 1.422 3.344 3 .313-3.5-1.297-7.469-4.172-9.797C24.609 3.47 27.906 7.658 28 14.345s-5.922 13.656-13.891 13.656z"/>
+</svg>

devtools/client/themes/images/browsers/mobile.svg

@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="12" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill"
+      d="M7.25 22c0-.688-.562-1.25-1.25-1.25s-1.25.562-1.25 1.25.562 1.25 1.25 1.25 1.25-.562 1.25-1.25zm3.25-2.5v-11c0-.266-.234-.5-.5-.5H2c-.266 0-.5.234-.5.5v11c0 .266.234.5.5.5h8c.266 0 .5-.234.5-.5zm-3-13.25A.246.246 0 0 0 7.25 6h-2.5c-.141 0-.25.109-.25.25s.109.25.25.25h2.5c.141 0 .25-.109.25-.25zM12 6v16c0 1.094-.906 2-2 2H2c-1.094 0-2-.906-2-2V6c0-1.094.906-2 2-2h8c1.094 0 2 .906 2 2z"/>
+</svg>

devtools/client/themes/images/browsers/safari.svg

@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="28" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill"
+      d="M14.828 13.953c0 .516-.359 1-.906 1-.516 0-1-.375-1-.906 0-.516.375-1 .922-1 .5 0 .984.359.984.906zm.234.906l5.469-9.078c-.734.688-7.578 6.984-7.766 7.313l-5.453 9.063c.719-.672 7.578-7 7.75-7.297zM25.172 14c0 2.047-.562 4.062-1.625 5.797-.156-.078-.812-.547-.938-.547a.207.207 0 0 0-.203.203c0 .203.734.578.922.688a11.229 11.229 0 0 1-6.656 4.703l-.25-1.047c-.016-.141-.109-.156-.234-.156-.109 0-.172.156-.156.234l.25 1.062c-.75.156-1.516.234-2.281.234-2.047 0-4.062-.578-5.812-1.641.094-.156.688-1.016.688-1.141a.207.207 0 0 0-.203-.203c-.219 0-.688.938-.828 1.125a11.24 11.24 0 0 1-4.719-6.75l1.078-.234c.125-.031.156-.125.156-.234s-.156-.172-.25-.156l-1.062.234a11.222 11.222 0 0 1-.219-2.172c0-2.094.594-4.156 1.703-5.922.156.094.906.609 1.031.609.109 0 .203-.078.203-.187 0-.219-.828-.641-1.016-.766 1.594-2.328 4.016-4 6.766-4.625l.234 1.047c.031.125.125.156.234.156s.172-.156.156-.25l-.234-1.031a11.745 11.745 0 0 1 2.094-.203 11.2 11.2 0 0 1 5.922 1.703c-.109.156-.609.891-.609 1.016 0 .109.078.203.187.203.219 0 .641-.812.75-1a11.165 11.165 0 0 1 4.609 6.672l-.875.187c-.141.031-.156.125-.156.25 0 .109.156.172.234.156l.891-.203c.141.719.219 1.453.219 2.187zm1.328 0c0-6.906-5.594-12.5-12.5-12.5S1.5 7.094 1.5 14 7.094 26.5 14 26.5 26.5 20.906 26.5 14zm1.5 0c0 7.734-6.266 14-14 14S0 21.734 0 14 6.266 0 14 0s14 6.266 14 14z"/>
+</svg>