--- a/devtools/client/inspector/rules/test/browser_rules_variables_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_01.js
@@ -14,28 +14,41 @@ add_task(function* () {
   yield selectNode("#target", inspector);
 
   info("Tests basic support for CSS Variables for both single variable " +
   "and double variable. Formats tested: var(x, constant), var(x, var(y))");
 
   let unsetColor = getRuleViewProperty(view, "div", "color").valueSpan
     .querySelector(".ruleview-unmatched-variable");
   let setColor = unsetColor.previousElementSibling;
+  let setColorSwatch = setColor.previousElementSibling;
   is(unsetColor.textContent, " red", "red is unmatched in color");
   is(setColor.textContent, "--color", "--color is not set correctly");
   is(setColor.dataset.variable, "--color = chartreuse",
                                 "--color's dataset.variable is not set correctly");
+  is(setColorSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+     "var(--color, red)'s swatch class is not set correctly");
+  is(setColorSwatch.title, "chartreuse",
+    "var(--color, red)'s swatch title is not set correctly");
   let previewTooltip = yield assertShowPreviewTooltip(view, setColor);
   yield assertTooltipHiddenOnMouseOut(previewTooltip, setColor);
 
   let unsetVar = getRuleViewProperty(view, "div", "background-color").valueSpan
     .querySelector(".ruleview-unmatched-variable");
+  let unsetVarSwatch = unsetVar.previousElementSibling;
   let setVar = unsetVar.nextElementSibling;
-  let setVarName = setVar.firstElementChild.firstElementChild;
+  let setVarSwatch = setVar.firstElementChild.firstElementChild
+  let setVarName = setVarSwatch.nextElementSibling;
   is(unsetVar.textContent, "--not-set",
      "--not-set is unmatched in background-color");
+  is(unsetVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+     "var(--not-set, var(--bg))'s swatch class is not set correctly");
+  is(unsetVarSwatch.title, "seagreen", "var(--not-set, var(--bg))'s swatch title is not set correctly");
+  is(setVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+     "var(--bg)'s swatch class is not set correctly");
+  is(setVarSwatch.title, "seagreen", "var(--bg)'s swatch title is not set correctly");
   is(setVar.textContent, " var(--bg)", "var(--bg) parsed incorrectly");
   is(setVarName.textContent, "--bg", "--bg is not set correctly");
   is(setVarName.dataset.variable, "--bg = seagreen",
                                   "--bg's dataset.variable is not set correctly");
   previewTooltip = yield assertShowPreviewTooltip(view, setVarName);
   yield assertTooltipHiddenOnMouseOut(previewTooltip, setVarName);
 });

--- a/devtools/client/inspector/rules/test/browser_rules_variables_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_02.js
@@ -13,58 +13,81 @@ add_task(function* () {
   let {inspector, view} = yield openRuleView();
 
   yield testBasic(inspector, view);
   yield testNestedCssFunctions(inspector, view);
   yield testBorderShorthandAndInheritance(inspector, view);
   yield testSingleLevelVariable(inspector, view);
   yield testDoubleLevelVariable(inspector, view);
   yield testTripleLevelVariable(inspector, view);
+  yield testUnresolvableVariableSwatch(inspector, view);
 });
 
 function* testBasic(inspector, view) {
   info("Test support for basic variable functionality for var() with 2 variables." +
        "Format: var(--var1, var(--var2))");
 
   yield selectNode("#a", inspector);
   let unsetVar = getRuleViewProperty(view, "#a", "font-size").valueSpan
     .querySelector(".ruleview-unmatched-variable");
+  let unsetVarSwatch = unsetVar.previousElementSibling;
   let setVarParent = unsetVar.nextElementSibling;
   let setVar = getVarFromParent(setVarParent);
+  let setVarSwatch = setVar.previousElementSibling;
   is(unsetVar.textContent, "--var-not-defined",
     "--var-not-defined is not set correctly");
   is(unsetVar.dataset.variable, "--var-not-defined is not set",
     "--var-not-defined's dataset.variable is not set correctly");
+  is(unsetVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-not-defined, ...)'s swatch class is not set correctly");
+  is(unsetVarSwatch.title, "60px",
+    "var(..., --var-defined-font-size)'s swatch title is not set correctly");
   is(setVarParent.textContent, " var(--var-defined-font-size)",
-    "var(--var-defined-font-size) parsed incorrectly");
+    "var(..., --var-defined-font-size) parsed incorrectly");
   is(setVar.textContent, "--var-defined-font-size",
     "--var-defined-font-size is not set correctly");
   is(setVar.dataset.variable, "--var-defined-font-size = 60px",
     "--bg's dataset.variable is not set correctly");
+  is(setVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-defined-font-size)'s swatch class is not set correctly");
+  is(setVarSwatch.title, "60px",
+    "var(--var-defined-font-size)'s swatch title is not set correctly");
 }
 
 function* testNestedCssFunctions(inspector, view) {
   info("Test support for variable functionality for a var() nested inside " +
   "another CSS function. Format: rgb(0, 0, var(--var1, var(--var2)))");
 
   yield selectNode("#b", inspector);
   let unsetVarParent = getRuleViewProperty(view, "#b", "color").valueSpan
     .querySelector(".ruleview-unmatched-variable");
   let unsetVar = getVarFromParent(unsetVarParent);
+  let unsetVarSwatch = unsetVar.previousElementSibling;
   let setVar = unsetVarParent.previousElementSibling;
+  let setVarSwatch = setVar.previousElementSibling;
   is(unsetVarParent.textContent, " var(--var-defined-r-2)",
     "var(--var-defined-r-2) not parsed correctly");
   is(unsetVar.textContent, "--var-defined-r-2",
     "--var-defined-r-2 is not set correctly");
   is(unsetVar.dataset.variable, "--var-defined-r-2 = 0",
     "--var-defined-r-2's dataset.variable is not set correctly");
+  is(unsetVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-defined-r-2)'s swatch class is not set correctly");
+  is(unsetVarSwatch.title, "0",
+    "var(--var-defined-r-2)'s swatch title is not set correctly");
   is(setVar.textContent, "--var-defined-r-1",
     "--var-defined-r-1 is not set correctly");
   is(setVar.dataset.variable, "--var-defined-r-1 = 255",
     "--var-defined-r-1's dataset.variable is not set correctly");
+  is(setVar.textContent, "--var-defined-r-1",
+    "--var-defined-r-1 is not set correctly");
+  is(setVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-defined-r-1, ...)'s swatch class is not set correctly");
+  is(setVarSwatch.title, "255",
+    "var(--var-defined-r-1, ...)'s swatch title is not set correctly");
 }
 
 function* testBorderShorthandAndInheritance(inspector, view) {
   info("Test support for variable functionality for shorthands/CSS styles with spaces " +
   "like \"margin: w x y z\". Also tests functionality for inherticance of CSS" +
   " variables. Format: var(l, var(m)) var(x) rgb(var(r) var(g) var(b))");
 
   yield selectNode("#c", inspector);
@@ -76,115 +99,198 @@ function* testBorderShorthandAndInherita
   let setVarXParent = setVarMParent.parentNode.nextElementSibling;
 
   // var(r) is the next sibling of var(x), and var(g) is the next sibling of var(r), etc.
   let setVarRParent = setVarXParent.nextElementSibling;
   let setVarGParent = setVarRParent.nextElementSibling;
   let setVarBParent = setVarGParent.nextElementSibling;
 
   let setVarM = getVarFromParent(setVarMParent);
-  let setVarX = setVarXParent.firstElementChild;
-  let setVarR = setVarRParent.firstElementChild;
-  let setVarG = setVarGParent.firstElementChild;
-  let setVarB = setVarBParent.firstElementChild;
+  let setVarX = setVarXParent.firstElementChild.nextElementSibling;
+  let setVarR = setVarRParent.firstElementChild.nextElementSibling;
+  let setVarG = setVarGParent.firstElementChild.nextElementSibling;
+  let setVarB = setVarBParent.firstElementChild.nextElementSibling;
+
+  let unsetVarLSwatch = unsetVarL.previousElementSibling;
+  let setVarMSwatch = setVarM.previousElementSibling;
+  let setVarXSwatch = setVarX.previousElementSibling;
+  let setVarRSwatch = setVarR.previousElementSibling;
+  let setVarGSwatch = setVarG.previousElementSibling;
+  let setVarBSwatch = setVarB.previousElementSibling;
 
   is(unsetVarL.textContent, "--var-undefined",
     "--var-undefined is not set correctly");
   is(unsetVarL.dataset.variable, "--var-undefined is not set",
     "--var-undefined's dataset.variable is not set correctly");
+  is(unsetVarLSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-undefined)'s swatch class is not set correctly");
+  is(unsetVarLSwatch.title, "10px",
+    "var(--var-undefined)'s swatch title is not set correctly");
 
   is(setVarM.textContent, "--var-border-px",
     "--var-border-px is not set correctly");
   is(setVarM.dataset.variable, "--var-border-px = 10px",
     "--var-border-px's dataset.variable is not set correctly");
+  is(setVarMSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-border-px)'s swatch class is not set correctly");
+  is(setVarMSwatch.title, "10px",
+    "var(--var-border-px)'s swatch title is not set correctly");
 
   is(setVarX.textContent, "--var-border-style",
     "--var-border-style is not set correctly");
   is(setVarX.dataset.variable, "--var-border-style = solid",
     "var-border-style's dataset.variable is not set correctly");
+  is(setVarXSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-border-style)'s swatch class is not set correctly");
+  is(setVarXSwatch.title, "solid",
+    "var(--var-border-style)'s swatch title is not set correctly");
 
   is(setVarR.textContent, "--var-border-r",
     "--var-defined-r is not set correctly");
   is(setVarR.dataset.variable, "--var-border-r = 255",
     "--var-defined-r's dataset.variable is not set correctly");
+  is(setVarRSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-defined-r)'s swatch class is not set correctly");
+  is(setVarRSwatch.title, "255",
+    "var(--var-defined-r)'s swatch title is not set correctly");
 
   is(setVarG.textContent, "--var-border-g",
     "--var-defined-g is not set correctly");
   is(setVarG.dataset.variable, "--var-border-g = 0",
     "--var-defined-g's dataset.variable is not set correctly");
+  is(setVarGSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-defined-g)'s swatch class is not set correctly");
+  is(setVarGSwatch.title, "0",
+    "var(--var-defined-g)'s swatch title is not set correctly");
 
   is(setVarB.textContent, "--var-border-b",
     "--var-defined-b is not set correctly");
   is(setVarB.dataset.variable, "--var-border-b = 0",
     "--var-defined-b's dataset.variable is not set correctly");
+  is(setVarGSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-defined-b)'s swatch class is not set correctly");
+  is(setVarGSwatch.title, "0",
+    "var(--var-defined-b)'s swatch title is not set correctly");
 }
 
 function* testSingleLevelVariable(inspector, view) {
   info("Test support for variable functionality of a single level of " +
   "undefined variables. Format: var(x, constant)");
 
   yield selectNode("#d", inspector);
   let unsetVar = getRuleViewProperty(view, "#d", "font-size").valueSpan
     .querySelector(".ruleview-unmatched-variable");
+  let unsetVarSwatch = unsetVar.previousElementSibling;
 
   is(unsetVar.textContent, "--var-undefined",
     "--var-undefined is not set correctly");
   is(unsetVar.dataset.variable, "--var-undefined is not set",
     "--var-undefined's dataset.variable is not set correctly");
+  is(unsetVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-undefined, 30px)'s swatch class is not set correctly");
+  is(unsetVarSwatch.title, "30px",
+    "var(--var-undefined, 30px)'s swatch title is not set correctly");
 }
 
 function* testDoubleLevelVariable(inspector, view) {
   info("Test support for variable functionality of double level of " +
   "undefined variables. Format: var(x, var(y, constant))");
 
   yield selectNode("#e", inspector);
   let allUnsetVars = getRuleViewProperty(view, "#e", "color").valueSpan
     .querySelectorAll(".ruleview-unmatched-variable");
 
   is(allUnsetVars.length, 2, "The number of unset variables is mismatched.");
 
   let unsetVar1 = allUnsetVars[0];
   let unsetVar2 = allUnsetVars[1];
 
+  let unsetVar1Swatch = unsetVar1.previousElementSibling;
+  let unsetVar2Swatch = unsetVar2.previousElementSibling;
+
   is(unsetVar1.textContent, "--var-undefined",
     "--var-undefined is not set correctly");
   is(unsetVar1.dataset.variable, "--var-undefined is not set",
     "--var-undefined's dataset.variable is not set correctly");
+  is(unsetVar1Swatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-undefined, var(..., blue))'s swatch class is not set correctly");
+  is(unsetVar1Swatch.title, "blue",
+    "var(--var-undefined, var(..., blue))'s swatch title is not set correctly");
 
   is(unsetVar2.textContent, "--var-undefined-2",
     "--var-undefined is not set correctly");
   is(unsetVar2.dataset.variable, "--var-undefined-2 is not set",
     "--var-undefined-2's dataset.variable is not set correctly");
+  is(unsetVar2Swatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-undefined-2, blue)'s swatch class is not set correctly");
+  is(unsetVar2Swatch.title, "blue",
+    "var(--var-undefined-2, blue)'s swatch title is not set correctly");
 }
 
 function* testTripleLevelVariable(inspector, view) {
   info("Test support for variable functionality of triple level of " +
   "undefined variables. Format: var(x, var(y, var(z, constant)))");
 
   yield selectNode("#f", inspector);
   let allUnsetVars = getRuleViewProperty(view, "#f", "border-style").valueSpan
     .querySelectorAll(".ruleview-unmatched-variable");
 
   is(allUnsetVars.length, 3, "The number of unset variables is mismatched.");
 
   let unsetVar1 = allUnsetVars[0];
   let unsetVar2 = allUnsetVars[1];
   let unsetVar3 = allUnsetVars[2];
 
+  let unsetVar1Swatch = unsetVar1.previousElementSibling;
+  let unsetVar2Swatch = unsetVar2.previousElementSibling;
+  let unsetVar3Swatch = unsetVar3.previousElementSibling;
+
   is(unsetVar1.textContent, "--var-undefined",
     "--var-undefined is not set correctly");
   is(unsetVar1.dataset.variable, "--var-undefined is not set",
     "--var-undefined's dataset.variable is not set correctly");
+  is(unsetVar1Swatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-undefined, var(..., solid))'s swatch class is not set correctly");
+  is(unsetVar1Swatch.title, "solid",
+    "var(--var-undefined, var(..., solid))'s swatch title is not set correctly");
 
   is(unsetVar2.textContent, "--var-undefined-2",
     "--var-undefined-2 is not set correctly");
   is(unsetVar2.dataset.variable, "--var-undefined-2 is not set",
     "--var-defined-r-2's dataset.variable is not set correctly");
+  is(unsetVar2Swatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-undefined-2, var(..., solid))'s swatch class is not set correctly");
+  is(unsetVar2Swatch.title, "solid",
+    "var(--var-undefined-2, var(..., solid))'s swatch title is not set correctly");
 
   is(unsetVar3.textContent, "--var-undefined-3",
     "--var-undefined-3 is not set correctly");
   is(unsetVar3.dataset.variable, "--var-undefined-3 is not set",
     "--var-defined-r-3's dataset.variable is not set correctly");
+  is(unsetVar3Swatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(..., solid)'s swatch class is not set correctly");
+  is(unsetVar3Swatch.title, "solid",
+    "var(..., solid)'s swatch title is not set correctly");
+}
+
+function* testUnresolvableVariableSwatch(inspector, view) {
+  info("Test support for variable swatch functionality of unresolvable var()");
+
+  yield selectNode("#g", inspector);
+  let unsetVarParent = getRuleViewProperty(view, "#g", "border-style").valueSpan
+    .querySelector(".ruleview-unmatched-variable");
+
+  let unsetVarSwatch = getVarFromParent(unsetVarParent).previousElementSibling;
+  let setVarSwatch = unsetVarParent.previousElementSibling.previousElementSibling;
+
+  is(unsetVarSwatch.className, "ruleview-swatch ruleview-variableswatch-unmatched",
+    "var(--var-undefined)'s swatch class is not set correctly");
+  is(unsetVarSwatch.title, "Cannot be resolved",
+    "var(--var-undefined)'s swatch title is not set correctly");
+  is(setVarSwatch.className, "ruleview-swatch ruleview-variableswatch-matched",
+    "var(--var-defined, ...)'s swatch class is not set correctly");
+  is(setVarSwatch.title, "solid",
+    "var(--var-defined, ...)'s swatch title is not set correctly");
 }
 
 function getVarFromParent(varParent) {
-  return varParent.firstElementChild.firstElementChild;
+  return varParent.firstElementChild.firstElementChild.nextElementSibling;
 }

--- a/devtools/client/inspector/rules/test/doc_variables_2.html
+++ b/devtools/client/inspector/rules/test/doc_variables_2.html
@@ -27,19 +27,24 @@
       font-size: var(--var-undefined, 30px);
     }
     #e {
       color: var(--var-undefined, var(--var-undefined-2, blue));
     }
     #f {
       border-style: var(--var-undefined, var(--var-undefined-2, var(--var-undefined-3, solid)));
     }
+    #g {
+      --var-defined: solid;
+      border-style: var(--var-defined, var(--var-undefined))
+    }
   </style>
 </head>
 <body>
   <div id="a">A</div><br>
   <div id="b">B</div><br>
   <div id="c">C</div><br>
   <div id="d">D</div><br>
   <div id="e">E</div><br>
-  <div id="f">F</div>
+  <div id="f">F</div><br>
+  <div id="g">G</div>
 </body>
 </html>