Bug 1478448 - (Part 4) Render tracked style changes. r=nchevobbe

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

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

devtools/client/inspector/changes/components/ChangesApp.js

@@ -6,15 +6,71 @@
 
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
 class ChangesApp extends PureComponent {
+  static get propTypes() {
+    return {
+      changes: PropTypes.object.isRequired
+    };
+  }
+
+  renderMutations(remove = {}, add = {}) {
+    const removals = Object.entries(remove).map(([prop, value]) => {
+      return dom.div(
+        { className: "line diff-remove"},
+        `${prop}: ${value};`
+      );
+    });
+
+    const additions = Object.entries(add).map(([prop, value]) => {
+      return dom.div(
+        { className: "line diff-add"},
+        `${prop}: ${value};`
+      );
+    });
+
+    return [removals, additions];
+  }
+
+  renderSelectors(selectors = {}) {
+    return Object.keys(selectors).map(sel => {
+      return dom.details(
+        { className: "selector", open: true },
+        dom.summary(
+          {
+            title: sel,
+          },
+          sel),
+        this.renderMutations(selectors[sel].remove, selectors[sel].add)
+      );
+    });
+  }
+
+  renderDiff(diff = {}) {
+    // Render groups of style sources: stylesheets, embedded styles and inline styles
+    return Object.keys(diff).map(href => {
+      return dom.details(
+        { className: "source", open: true },
+        dom.summary(
+          {
+            title: href,
+          },
+          href),
+        // Render groups of selectors
+        this.renderSelectors(diff[href])
+      );
+    });
+  }
+
   render() {
     return dom.div(
       {
         className: "theme-sidebar inspector-tabpanel",
         id: "sidebar-panel-changes"
-      }
+      },
+      this.renderDiff(this.props.changes.diff)
     );
   }
 }

devtools/client/inspector/index.xhtml

@@ -12,6 +12,7 @@
   <link rel="stylesheet" href="chrome://devtools/skin/inspector.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/rules.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/changes.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/fonts.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/layout.css"/>

devtools/client/jar.mn

@@ -242,6 +242,7 @@ devtools.jar:
     skin/images/cubic-bezier-swatch.png (themes/images/cubic-bezier-swatch.png)
     skin/images/cubic-bezier-swatch@2x.png (themes/images/cubic-bezier-swatch@2x.png)
     skin/fonts.css (themes/fonts.css)
+    skin/changes.css (themes/changes.css)
     skin/computed.css (themes/computed.css)
     skin/layout.css (themes/layout.css)
     skin/images/arrow-e.png (themes/images/arrow-e.png)

devtools/client/themes/changes.css

@@ -0,0 +1,97 @@
+/* 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/. */
+
+ /* CSS Variables specific to the Changes panel that aren't defined by the themes */
+ :root {
+   --diff-add-background-color: #f1feec;
+   --diff-add-text-color: #54983f;
+   --diff-remove-background-color: #fbf2f5;
+   --diff-remove-text-color: #bf7173;
+ }
+
+#sidebar-panel-changes {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+details {
+  font-family: var(--monospace-font-family);
+  font-size: 12px;
+}
+
+summary {
+  outline: none;
+  padding: 5px 0;
+  -moz-user-select: none;
+  cursor: pointer;
+}
+
+details.source[open] {
+  padding-bottom: 10px;
+}
+
+details.source > summary {
+  background: var(--theme-sidebar-background);
+  border-top: 1px solid var(--theme-splitter-color);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding-left: 5px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+details.selector > summary {
+  padding-left: 10px;
+}
+
+details.selector summary::after{
+  content: "{…}";
+  display: inline-block;
+  padding-left: 5px;
+}
+
+details.selector[open]{
+  margin-bottom: 5px;
+}
+
+details.selector[open] summary::after{
+  content: "{";
+}
+
+details.selector[open]::after{
+  content: "}";
+  display: block;
+  padding-left: 10px;
+}
+
+.line {
+  padding: 3px 5px 3px 15px;
+  position: relative;
+}
+
+.diff-add::before,
+.diff-remove::before{
+  position: absolute;
+  left: 5px;
+}
+
+.diff-add {
+  background-color: var(--diff-add-background-color);
+}
+
+.diff-add::before {
+  content: "+";
+  color: var(--diff-add-text-color);
+}
+
+.diff-remove {
+  background-color: var(--diff-remove-background-color);
+}
+
+.diff-remove::before{
+  content: "-";
+  color: var(--diff-remove-text-color);
+}