Bug 1639122: Make issue item components collapsable. r=ladybenko
authorDaisuke Akatsuka <daisuke@birchill.co.jp>
Wed, 03 Jun 2020 22:15:33 +0000
changeset 533782 2ae23d137681875d9ccc481204dea8bc2e5ae40e
parent 533781 678f2b560e2ae50e54ca1b8f88fba72425f40bbd
child 533783 45651790ac0073eb0c8a4d1443818284091892df
push id37477
push userdluca@mozilla.com
push dateThu, 04 Jun 2020 04:19:27 +0000
treeherdermozilla-central@6fd265574f27 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersladybenko
bugs1639122
milestone79.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1639122: Make issue item components collapsable. r=ladybenko Differential Revision: https://phabricator.services.mozilla.com/D77426
devtools/client/inspector/compatibility/components/IssueItem.js
devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueItem.test.js.snap
devtools/client/themes/compatibility.css
--- a/devtools/client/inspector/compatibility/components/IssueItem.js
+++ b/devtools/client/inspector/compatibility/components/IssueItem.js
@@ -97,41 +97,21 @@ class IssueItem extends PureComponent {
       ? dom.span(
           { className: "compatibility-issue-item__causes" },
           `(${causes.join(",")})`
         )
       : null;
   }
 
   _renderDescription() {
-    const {
-      deprecated,
-      experimental,
-      property,
-      unsupportedBrowsers,
-      url,
-    } = this.props;
-
-    const classes = ["compatibility-issue-item__description"];
-
-    if (deprecated) {
-      classes.push("compatibility-issue-item__description--deprecated");
-    }
-
-    if (experimental) {
-      classes.push("compatibility-issue-item__description--experimental");
-    }
-
-    if (unsupportedBrowsers.length) {
-      classes.push("compatibility-issue-item__description--unsupported");
-    }
+    const { property, url } = this.props;
 
     return dom.div(
       {
-        className: classes.join(" "),
+        className: "compatibility-issue-item__description",
       },
       dom.a(
         {
           className: "compatibility-issue-item__mdn-link devtools-monospace",
           href: url,
           title: url,
           onClick: e => this._onLinkClicked(e),
         },
@@ -167,21 +147,40 @@ class IssueItem extends PureComponent {
     const { unsupportedBrowsers } = this.props;
 
     return unsupportedBrowsers.length
       ? UnsupportedBrowserList({ browsers: unsupportedBrowsers })
       : null;
   }
 
   render() {
-    const { property } = this.props;
+    const {
+      deprecated,
+      experimental,
+      property,
+      unsupportedBrowsers,
+    } = this.props;
+
+    const classes = ["compatibility-issue-item"];
+
+    if (deprecated) {
+      classes.push("compatibility-issue-item--deprecated");
+    }
+
+    if (experimental) {
+      classes.push("compatibility-issue-item--experimental");
+    }
+
+    if (unsupportedBrowsers.length) {
+      classes.push("compatibility-issue-item--unsupported");
+    }
 
     return dom.li(
       {
-        className: "compatibility-issue-item",
+        className: classes.join(" "),
         key: property,
         ...this._getTestDataAttributes(),
       },
       this._renderDescription(),
       this._renderNodeList()
     );
   }
 }
--- a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueItem.test.js.snap
+++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueItem.test.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`IssueItem component renders a deprecated issue of CSS property 1`] = `
 <li
-  className="compatibility-issue-item"
+  className="compatibility-issue-item compatibility-issue-item--deprecated"
   key="test-property"
 >
   <div
-    className="compatibility-issue-item__description compatibility-issue-item__description--deprecated"
+    className="compatibility-issue-item__description"
   >
     <a
       className="compatibility-issue-item__mdn-link devtools-monospace"
       href="test-url"
       onClick={[Function]}
       title="test-url"
     >
       test-property
@@ -22,21 +22,21 @@ exports[`IssueItem component renders a d
       (deprecated)
     </span>
   </div>
 </li>
 `;
 
 exports[`IssueItem component renders an experimental issue of CSS property 1`] = `
 <li
-  className="compatibility-issue-item"
+  className="compatibility-issue-item compatibility-issue-item--experimental"
   key="test-property"
 >
   <div
-    className="compatibility-issue-item__description compatibility-issue-item__description--experimental"
+    className="compatibility-issue-item__description"
   >
     <a
       className="compatibility-issue-item__mdn-link devtools-monospace"
       href="test-url"
       onClick={[Function]}
       title="test-url"
     >
       test-property
@@ -47,21 +47,21 @@ exports[`IssueItem component renders an 
       (experimental)
     </span>
   </div>
 </li>
 `;
 
 exports[`IssueItem component renders an issue which has both deprecated and experimental 1`] = `
 <li
-  className="compatibility-issue-item"
+  className="compatibility-issue-item compatibility-issue-item--deprecated compatibility-issue-item--experimental"
   key="test-property"
 >
   <div
-    className="compatibility-issue-item__description compatibility-issue-item__description--deprecated compatibility-issue-item__description--experimental"
+    className="compatibility-issue-item__description"
   >
     <a
       className="compatibility-issue-item__mdn-link devtools-monospace"
       href="test-url"
       onClick={[Function]}
       title="test-url"
     >
       test-property
@@ -104,21 +104,21 @@ exports[`IssueItem component renders an 
       ]
     }
   />
 </li>
 `;
 
 exports[`IssueItem component renders an unsupported issue of CSS property 1`] = `
 <li
-  className="compatibility-issue-item"
+  className="compatibility-issue-item compatibility-issue-item--unsupported"
   key="test-property"
 >
   <div
-    className="compatibility-issue-item__description compatibility-issue-item__description--unsupported"
+    className="compatibility-issue-item__description"
   >
     <a
       className="compatibility-issue-item__mdn-link devtools-monospace"
       href="test-url"
       onClick={[Function]}
       title="test-url"
     >
       test-property
--- a/devtools/client/themes/compatibility.css
+++ b/devtools/client/themes/compatibility.css
@@ -1,16 +1,17 @@
 /* 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/. */
 
 :root {
   --compatibility-base-unit: 4px;
   --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-browser-icon-size: calc(var(--compatibility-base-unit) * 4);
 }
 
 .compatibility-app {
   height: 100%;
 }
 
 .compatibility-app__throbber {
@@ -35,81 +36,93 @@
 }
 
 .compatibility-issue-list {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
+/*
+ * Layout of the issue item
+ *  +--------+-------------------+
+ *  | [icon] | issue description |
+ *  +--------+-------------------+
+ *  |        | occurrences       |
+ *  +--------+-------------------+
+ */
 .compatibility-issue-item {
+  display: grid;
+  gap: var(--compatibility-base-unit);
   padding: calc(var(--compatibility-base-unit) * 2);
-  padding-inline-end: calc(var(--compatibility-base-unit) * 4);
+  grid-template-areas: "icon description"
+                       ".    node-pane";
+  grid-template-columns: auto 1fr;
 }
 
 .compatibility-issue-item:not(:last-child) {
   border-block-end: 1px solid var(--theme-splitter-color);
 }
 
-/*
- * Layout of the issue description
- *  +------+--------------+-----------------+---------------------------+
- *  | icon | issue factor | (issue causes)? | unsupported browser icons |
- *  +------+--------------+-----------------+---------------------------+
- */
-.compatibility-issue-item__description {
-  display: grid;
-  grid-template-columns: var(--compatibility-issue-icon-size) max-content 1fr max-content;
-  align-items: center;
+.compatibility-issue-item::before {
+  grid-area: icon;
+  content: "";
+  display: block;
+  width: var(--compatibility-issue-item-height);
+  height: var(--compatibility-issue-item-height);
+  background-size: var(--compatibility-issue-icon-size);
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  /* In order to fit to the position */
+  position: relative;
+  top: -1px;
 }
 
-.compatibility-issue-item__description > *: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__description::before {
-  content: "";
-  width: var(--compatibility-issue-icon-size);
-  height: var(--compatibility-issue-icon-size);
-  background-size: var(--compatibility-issue-icon-size);
-  -moz-context-properties: fill;
-}
-
-.compatibility-issue-item__description--experimental::before,
-.compatibility-issue-item__description--unsupported::before {
+.compatibility-issue-item--experimental::before,
+.compatibility-issue-item--unsupported::before {
   background-image: url(chrome://devtools/skin/images/info.svg);
   fill: currentColor;
 }
 
-.compatibility-issue-item__description--deprecated::before {
+.compatibility-issue-item--deprecated::before {
   background-image: url(chrome://devtools/skin/images/alert-small.svg);
   fill: var(--theme-icon-warning-color);
 }
 
+/*
+ * Layout of the issue description
+ *  +--------------+----------------+---------------------------+
+ *  | issue factor | (issue causes) | unsupported browser icons |
+ *  +--------------+----------------+---------------------------+
+ */
+.compatibility-issue-item__description {
+  grid-area: description;
+  display: flex;
+  column-gap: var(--compatibility-base-unit);
+  row-gap: calc(var(--compatibility-base-unit) / 2);
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
 .compatibility-issue-item__causes {
+  flex: auto;
   color: var(--compatibility-cause-color);
 }
 
 .compatibility-issue-item__mdn-link {
   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: var(--compatibility-base-unit);
+  column-gap: var(--compatibility-base-unit);
+  display: flex;
 }
 
 .compatibility-browser-icon {
   display: inline-block;
   width: var(--compatibility-browser-icon-size);
   height: var(--compatibility-browser-icon-size);
   position: relative;
 }
@@ -133,33 +146,33 @@
 .compatibility-browser-icon__image {
   width: 100%;
   height: 100%;
   fill: var(--theme-icon-dimmed-color);
   -moz-context-properties: fill;
 }
 
 .compatibility-node-pane {
-  padding-inline-start: calc(var(--compatibility-base-unit) * 4);
+  grid-area: node-pane;
 }
 
 .compatibility-node-pane__summary {
   color: var(--theme-comment);
   cursor: pointer;
-  padding-block-start: var(--compatibility-base-unit);
+  padding-block-end: var(--compatibility-base-unit);
 }
 
 .compatibility-node-list {
   list-style: none;
   margin: 0;
   padding-inline-start: calc(var(--compatibility-base-unit) * 2);
 }
 
-.compatibility-node-item {
-  padding-block-start: var(--compatibility-base-unit);
+.compatibility-node-item:not(:last-child) {
+  padding-block-end: var(--compatibility-base-unit);
 }
 
 .compatibility-footer {
   border-top: 1px solid var(--theme-splitter-color);
   display: flex;
   justify-content: space-evenly;
 }