Bug 1605688 - Strip alpha when opaque, r=jdescottes,ladybenko

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

devtools/client/application/src/components/manifest/ManifestColorItem.css

@@ -11,7 +11,12 @@
 .manifest-item__color::before {
   display: inline-block;
   content: '';
-  background-color: var(--color-value); /* injected via React */
+  background-color: #fff;
+  background-image: linear-gradient(var(--color-value), var(--color-value)), /* injected via React */
+    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+  background-size: 6px 6px;
+  background-position: 0 0, 3px 3px;
   border-radius: 50%;
   width: calc(var(--base-unit) * 3);
   height: calc(var(--base-unit) * 3);

devtools/client/application/src/components/manifest/ManifestColorItem.js

@@ -26,16 +26,23 @@ class ManifestColorItem extends PureComponent {
   }
 
   renderColor() {
-    const { value } = this.props;
-    return value
-      ? span(
-          {
-            className: "manifest-item__color",
-            style: { "--color-value": value },
-          },
-          value
-        )
-      : null;
+    let { value } = this.props;
+    if (!value) {
+      return null;
+    }
+
+    // Truncate colors in #rrggbbaa format to #rrggbb
+    if (value.length === 9 && value.toLowerCase().endsWith("ff")) {
+      value = value.slice(0, 7);
+    }
+
+    return span(
+      {
+        className: "manifest-item__color",
+        style: { "--color-value": value },
+      },
+      value
+    );
   }
 
   render() {

devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestColorItem.test.js.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ManifestColorItem does not strip translucent alpha from the displayed color 1`] = `
+<ManifestItem
+  label="foo"
+>
+  <span
+    className="manifest-item__color"
+    style={
+      Object {
+        "--color-value": "#00FF00FA",
+      }
+    }
+  >
+    #00FF00FA
+  </span>
+</ManifestItem>
+`;
+
 exports[`ManifestColorItem renders the expected snapshot for a populated color item 1`] = `
 <ManifestItem
   label="foo"
@@ -22,3 +39,20 @@ exports[`ManifestColorItem renders the expected snapshot for an empty color item
   label="foo"
 />
 `;
+
+exports[`ManifestColorItem strips opaque alpha from the displayed color 1`] = `
+<ManifestItem
+  label="foo"
+>
+  <span
+    className="manifest-item__color"
+    style={
+      Object {
+        "--color-value": "#00FF00",
+      }
+    }
+  >
+    #00FF00
+  </span>
+</ManifestItem>
+`;

devtools/client/application/test/node/components/manifest/components_application_panel-ManifestColorItem.test.js

@@ -27,4 +27,22 @@ describe("ManifestColorItem", () => {
     const wrapper = shallow(ManifestColorItem({ label: "foo" }));
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("strips opaque alpha from the displayed color", () => {
+    const wrapper = shallow(
+      ManifestColorItem({ label: "foo", value: "#00FF00FF" })
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    expect(wrapper.find(".manifest-item__color").text()).toBe("#00FF00");
+  });
+
+  it("does not strip translucent alpha from the displayed color", () => {
+    const wrapper = shallow(
+      ManifestColorItem({ label: "foo", value: "#00FF00FA" })
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    expect(wrapper.find(".manifest-item__color").text()).toBe("#00FF00FA");
+  });
 });