Backed out changeset fa56a4ad6f4a (bug 1605688) for devtools failures on browser_devtools_api_destroy.js. CLOSED TREE

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

@@ -11,12 +11,7 @@
 .manifest-item__color::before {
   display: inline-block;
   content: '';
-  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;
+  background-color: var(--color-value); /* injected via React */
   border-radius: 50%;
   width: calc(var(--base-unit) * 3);
   height: calc(var(--base-unit) * 3);

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

@@ -26,23 +26,16 @@ class ManifestColorItem extends PureComponent {
   }
 
   renderColor() {
-    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
-    );
+    const { value } = this.props;
+    return value
+      ? span(
+          {
+            className: "manifest-item__color",
+            style: { "--color-value": value },
+          },
+          value
+        )
+      : null;
   }
 
   render() {

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

@@ -1,22 +1,5 @@
 // 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"
@@ -39,20 +22,3 @@ 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,22 +27,4 @@ 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");
-  });
 });