--- a/accessible/interfaces/gecko/Makefile.in
+++ b/accessible/interfaces/gecko/Makefile.in
@@ -7,17 +7,19 @@ GARBAGE += $(MIDL_GENERATED_FILES) done_
 MIDL_GENERATED_FILES = \
   dlldata.c \
   IGeckoCustom.h \
   IGeckoCustom_p.c \
   IGeckoCustom_i.c \
   IGeckoCustom.tlb \
   $(NULL)
 
-$(MIDL_GENERATED_FILES): done_gen
+# Bug 1420119: We need the trailing semicolon here to generate a recipe for the
+# midl targets to avoid timestamp caching issues.
+$(MIDL_GENERATED_FILES): done_gen ;
 
 done_gen: IGeckoCustom.idl
 	$(MIDL) $(MIDL_FLAGS) -I $(srcdir) -Oicf $(srcdir)/IGeckoCustom.idl
 	touch $@
 
 export:: done_gen
 
 midl_exports := \

--- a/accessible/interfaces/ia2/Makefile.in
+++ b/accessible/interfaces/ia2/Makefile.in
@@ -77,17 +77,19 @@ export:: midl
 include $(topsrcdir)/config/rules.mk
 
 # generate list of to-be-generated files that are missing
 # but ignore special file dlldata.c and .tlb files
 missing:=$(strip $(foreach onefile,$(strip $(patsubst %.tlb,,$(subst dlldata.c,,$(MIDL_GENERATED_FILES)))),$(if $(wildcard $(onefile)),,$(onefile))))
 
 missing_base:=$(sort $(basename $(subst _p.c,,$(subst _i.c,,$(missing)))))
 
-$(MIDL_GENERATED_FILES) : midl_done typelib_done
+# Bug 1420119: We need the trailing semicolon here to generate a recipe for the
+# midl targets to avoid timestamp caching issues.
+$(MIDL_GENERATED_FILES) : midl_done typelib_done ;
 
 ifneq ("$(missing)","")
 midl_done : FORCE
 endif
 
 midl_done : $(addprefix $(IA2DIR)/,$(MIDL_INTERFACES) $(MIDL_ENUMS))
 	for idl in $(sort $(subst FORCE,,$?) $(addsuffix .idl,$(addprefix $(IA2DIR)/,$(missing_base)))); do \
 	  $(MIDL) $(MIDL_FLAGS) -app_config -I $(IA2DIR) -Oicf $$idl; \

--- a/accessible/interfaces/msaa/Makefile.in
+++ b/accessible/interfaces/msaa/Makefile.in
@@ -7,17 +7,19 @@ GARBAGE += $(MIDL_GENERATED_FILES) done_
 MIDL_GENERATED_FILES = \
   dlldata.c \
   ISimpleDOM.h \
   ISimpleDOM_i.c \
   ISimpleDOM_p.c \
   ISimpleDOM.tlb \
   $(NULL)
 
-$(MIDL_GENERATED_FILES): done_gen
+# Bug 1420119: We need the trailing semicolon here to generate a recipe for the
+# midl targets to avoid timestamp caching issues.
+$(MIDL_GENERATED_FILES): done_gen ;
 
 done_gen: ISimpleDOM.idl \
           ISimpleDOMNode.idl \
           ISimpleDOMDocument.idl \
           ISimpleDOMText.idl
 
 	$(MIDL) $(MIDL_FLAGS) -I $(srcdir) -robust -Oicf $(srcdir)/ISimpleDOM.idl
 	touch $@

--- a/accessible/ipc/win/handler/Makefile.in
+++ b/accessible/ipc/win/handler/Makefile.in
@@ -12,17 +12,19 @@ MIDL_GENERATED_FILES = \
   HandlerData_c.c \
   HandlerData_i.c \
   HandlerData_p.c \
   HandlerData.tlb \
   $(NULL)
 
 export:: $(MIDL_GENERATED_FILES)
 
-$(MIDL_GENERATED_FILES): midl_done
+# Bug 1420119: We need the trailing semicolon here to generate a recipe for the
+# midl targets to avoid timestamp caching issues.
+$(MIDL_GENERATED_FILES): midl_done ;
 
 midl_done: HandlerData.acf HandlerData.idl
 	$(MIDL) $(MIDL_FLAGS) $(DEFINES) -I $(topobjdir) -I $(DIST)/include -I $(IA2DIR) -I $(MSAADIR) -Oicf -acf $(srcdir)/HandlerData.acf $(srcdir)/HandlerData.idl
 	touch $@
 
 INSTALL_TARGETS += midl
 midl_FILES := HandlerData.h \
               HandlerData_i.c \

--- a/accessible/ipc/win/typelib/Makefile.in
+++ b/accessible/ipc/win/typelib/Makefile.in
@@ -6,17 +6,19 @@ GARBAGE += $(MIDL_GENERATED_FILES) done_
 
 MIDL_GENERATED_FILES = \
   Accessible.h \
   Accessible_i.c \
   Accessible_p.c \
   Accessible.tlb \
   $(NULL)
 
-$(MIDL_GENERATED_FILES): done_gen
+# Bug 1420119: We need the trailing semicolon here to generate a recipe for the
+# midl targets to avoid timestamp caching issues.
+$(MIDL_GENERATED_FILES): done_gen ;
 
 done_gen: Accessible.idl
 	$(MIDL) $(MIDL_FLAGS) -Oicf $(srcdir)/Accessible.idl
 	touch $@
 
 export:: done_gen
 
 midl_exports := \

--- a/browser/app/blocklist.xml
+++ b/browser/app/blocklist.xml
@@ -1,10 +1,10 @@
 <?xml version='1.0' encoding='UTF-8'?>
-<blocklist lastupdate="1518553957211" xmlns="http://www.mozilla.org/2006/addons-blocklist">
+<blocklist lastupdate="1518640450735" xmlns="http://www.mozilla.org/2006/addons-blocklist">
   <emItems>
     <emItem blockID="i334" id="{0F827075-B026-42F3-885D-98981EE7B1AE}">
       <prefs/>
       <versionRange minVersion="0" maxVersion="*" severity="3"/>
     </emItem>
     <emItem blockID="i1211" id="flvto@hotger.com">
       <prefs/>
       <versionRange minVersion="0" maxVersion="*" severity="1"/>
@@ -2190,16 +2190,20 @@
     <emItem blockID="2104a522-bb2f-4b04-ad0d-b0c571644552" id="{ed352072-ddf0-4cb4-9cb6-d8aa3741c2de}">
       <prefs/>
       <versionRange minVersion="0" maxVersion="*" severity="3"/>
     </emItem>
     <emItem blockID="646e2384-f894-41bf-b7fc-8879e0095109" id="/^(https|youtube)@vietbacsecurity\.com$/">
       <prefs/>
       <versionRange minVersion="0" maxVersion="*" severity="3"/>
     </emItem>
+    <emItem blockID="cc5848e8-23d5-4655-b45c-dc239839b74e" id="/^(\{01c9a4a4-06dd-426b-9500-2ea6fe841b88\}|{5e024309-042c-4b9d-a634-5d92cf9c7514\}|{f4262989-6de0-4604-918f-663b85fad605\}|{e341ed12-a703-47fe-b8dd-5948c38070e4\}|{cd89045b-2e06-46bb-9e34-48e8799e5ef2\}|{ac296b47-7c03-486f-a1d6-c48b24419749\}|{5da81d3d-5db1-432a-affc-4a2fe9a70749\}|{df09f268-3c92-49db-8c31-6a25a6643896\}|{81ac42f3-3d17-4cff-85af-8b7f89c8826b\}|{09c8fa16-4eec-4f78-b19d-9b24b1b57e1e\}|{71639610-9cc3-47e0-86ed-d5b99eaa41d5\}|{83d38ac3-121b-4f28-bf9c-1220bd3c643b\}|{7f8bc48d-1c7c-41a0-8534-54adc079338f\})$/">
+      <prefs/>
+      <versionRange minVersion="0" maxVersion="*" severity="3"/>
+    </emItem>
   </emItems>
   <pluginItems>
     <pluginItem blockID="p1063">
       <match exp="Java(\(TM\))? Plug-in 10\.(8[1-9]|90)(\.[0-9]+)?([^\d\._]|$)" name="name"/>
       <match exp="libnpjp2\.so" name="filename"/>
       <infoURL>https://java.com/</infoURL>
       <versionRange severity="0" vulnerabilitystatus="1"/>
     </pluginItem>

--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -13,21 +13,25 @@
 }
 
 :root:-moz-lwtheme {
   color: var(--lwt-text-color) !important;
 }
 
 :root:-moz-lwtheme {
   background-color: var(--lwt-accent-color) !important;
-  background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
+  background-image: var(--lwt-additional-images) !important;
   background-position: var(--lwt-background-alignment) !important;
   background-repeat: var(--lwt-background-tiling) !important;
 }
 
+:root:-moz-lwtheme[lwtheme-image] {
+  background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
+}
+
 :root:-moz-lwtheme:-moz-window-inactive {
   background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
 }
 
 #main-window:not([chromehidden~="toolbar"]) {
 %ifdef XP_MACOSX
   min-width: 335px;
 %else

deleted file mode 100644
index e4e8dcaa3b3cd01a1287359902561166d7f942ee..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

--- a/browser/base/content/test/general/browser_compacttheme.js
+++ b/browser/base/content/test/general/browser_compacttheme.js
@@ -41,17 +41,16 @@ add_task(async function startTests() {
   LightweightThemeManager.currentTheme = null;
   ok(!CompactTheme.isStyleSheetEnabled, "There is no compact style sheet when no lw theme is applied.");
 });
 
 function dummyLightweightTheme(id) {
   return {
     id,
     name: id,
-    headerURL: "resource:///chrome/browser/content/browser/defaultthemes/compact.header.png",
     iconURL: "resource:///chrome/browser/content/browser/defaultthemes/light.icon.svg",
     textcolor: "red",
     accentcolor: "blue"
   };
 }
 
 add_task(async function testLightweightThemePreview() {
   info("Setting compact to current and previewing others");

--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@@ -91,17 +91,16 @@ browser.jar:
         content/browser/defaultthemes/3.icon.png      (content/defaultthemes/3.icon.png)
         content/browser/defaultthemes/3.preview.png   (content/defaultthemes/3.preview.png)
         content/browser/defaultthemes/4.header.png    (content/defaultthemes/4.header.png)
         content/browser/defaultthemes/4.icon.png      (content/defaultthemes/4.icon.png)
         content/browser/defaultthemes/4.preview.png   (content/defaultthemes/4.preview.png)
         content/browser/defaultthemes/5.header.png    (content/defaultthemes/5.header.png)
         content/browser/defaultthemes/5.icon.jpg      (content/defaultthemes/5.icon.jpg)
         content/browser/defaultthemes/5.preview.jpg   (content/defaultthemes/5.preview.jpg)
-        content/browser/defaultthemes/compact.header.png    (content/defaultthemes/compact.header.png)
         content/browser/defaultthemes/dark.icon.svg  (content/defaultthemes/dark.icon.svg)
         content/browser/defaultthemes/light.icon.svg (content/defaultthemes/light.icon.svg)
         content/browser/newtab/newTab.xhtml           (content/newtab/newTab.xhtml)
 *       content/browser/newtab/newTab.js              (content/newtab/newTab.js)
         content/browser/newtab/newTab.css             (content/newtab/newTab.css)
         content/browser/newtab/alternativeDefaultSites.json   (content/newtab/alternativeDefaultSites.json)
 *       content/browser/pageinfo/pageInfo.xul         (content/pageinfo/pageInfo.xul)
         content/browser/pageinfo/pageInfo.js          (content/pageinfo/pageInfo.js)

--- a/browser/components/customizableui/content/toolbar.xml
+++ b/browser/components/customizableui/content/toolbar.xml
@@ -4,19 +4,16 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <bindings id="browserToolbarBindings"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
 
   <binding id="toolbar">
-    <resources>
-      <stylesheet src="chrome://global/skin/toolbar.css"/>
-    </resources>
     <implementation>
       <field name="overflowedDuringConstruction">null</field>
 
       <constructor><![CDATA[
           let scope = {};
           ChromeUtils.import("resource:///modules/CustomizableUI.jsm", scope);
           let CustomizableUI = scope.CustomizableUI;
           // Add an early overflow event listener that will mark if the

--- a/browser/components/nsBrowserGlue.js
+++ b/browser/components/nsBrowserGlue.js
@@ -695,27 +695,25 @@ BrowserGlue.prototype = {
     SessionStore.init();
 
     let vendorShortName = gBrandBundle.GetStringFromName("vendorShortName");
 
     LightweightThemeManager.addBuiltInTheme({
       id: "firefox-compact-light@mozilla.org",
       name: gBrowserBundle.GetStringFromName("lightTheme.name"),
       description: gBrowserBundle.GetStringFromName("lightTheme.description"),
-      headerURL: "resource:///chrome/browser/content/browser/defaultthemes/compact.header.png",
       iconURL: "resource:///chrome/browser/content/browser/defaultthemes/light.icon.svg",
       textcolor: "black",
       accentcolor: "white",
       author: vendorShortName,
     });
     LightweightThemeManager.addBuiltInTheme({
       id: "firefox-compact-dark@mozilla.org",
       name: gBrowserBundle.GetStringFromName("darkTheme.name"),
       description: gBrowserBundle.GetStringFromName("darkTheme.description"),
-      headerURL: "resource:///chrome/browser/content/browser/defaultthemes/compact.header.png",
       iconURL: "resource:///chrome/browser/content/browser/defaultthemes/dark.icon.svg",
       textcolor: "white",
       accentcolor: "black",
       author: vendorShortName,
     });
 
 
     // Initialize the default l10n resource sources for L10nRegistry.

--- a/browser/components/preferences/clearSiteData.js
+++ b/browser/components/preferences/clearSiteData.js
@@ -51,28 +51,31 @@ var gClearSiteDataDialog = {
   onCheckboxCommand(event) {
     this._clearButton.disabled =
       !(this._clearSiteDataCheckbox.checked || this._clearCacheCheckbox.checked);
   },
 
   onClear() {
     let allowed = true;
 
+    if (this._clearCacheCheckbox.checked && allowed) {
+      SiteDataManager.removeCache();
+      // If we're not clearing site data, we need to tell the
+      // SiteDataManager to signal that it's updating.
+      if (!this._clearSiteDataCheckbox.checked) {
+        SiteDataManager.updateSites();
+      }
+    }
+
     if (this._clearSiteDataCheckbox.checked) {
       allowed = SiteDataManager.promptSiteDataRemoval(window);
       if (allowed) {
         SiteDataManager.removeSiteData();
       }
     }
 
-    if (this._clearCacheCheckbox.checked && allowed) {
-      SiteDataManager.removeCache();
-      // Update cache UI in about:preferences
-      window.opener.gPrivacyPane.updateActualCacheSize();
-    }
-
     if (allowed) {
       window.close();
     }
   },
 };
 
 window.addEventListener("load", () => gClearSiteDataDialog.init());

--- a/browser/components/preferences/in-content/privacy.js
+++ b/browser/components/preferences/in-content/privacy.js
@@ -106,21 +106,16 @@ Preferences.addAll([
   { id: "browser.safebrowsing.phishing.enabled", type: "bool" },
 
   { id: "browser.safebrowsing.downloads.enabled", type: "bool" },
 
   { id: "urlclassifier.malwareTable", type: "string" },
 
   { id: "browser.safebrowsing.downloads.remote.block_potentially_unwanted", type: "bool" },
   { id: "browser.safebrowsing.downloads.remote.block_uncommon", type: "bool" },
-
-  // Network tab
-  { id: "browser.cache.disk.capacity", type: "int" },
-
-  { id: "browser.cache.disk.smart_size.enabled", type: "bool", inverted: "true" },
 ]);
 
 // Data Choices tab
 if (AppConstants.NIGHTLY_BUILD) {
   Preferences.add({ id: "browser.chrome.errorReporter.enabled", type: "bool" });
 }
 if (AppConstants.MOZ_CRASHREPORTER) {
   Preferences.add({ id: "browser.crashReports.unsubmittedCheck.autoSubmit2", type: "bool" });
@@ -323,24 +318,20 @@ var gPrivacyPane = {
     setEventListener("showPasswords", "command",
       gPrivacyPane.showPasswords);
     setEventListener("addonExceptions", "command",
       gPrivacyPane.showAddonExceptions);
     setEventListener("viewCertificatesButton", "command",
       gPrivacyPane.showCertificates);
     setEventListener("viewSecurityDevicesButton", "command",
       gPrivacyPane.showSecurityDevices);
-    setEventListener("clearCacheButton", "command",
-      gPrivacyPane.clearCache);
 
     this._pane = document.getElementById("panePrivacy");
     this._initMasterPasswordUI();
     this._initSafeBrowsing();
-    this.updateCacheSizeInputField();
-    this.updateActualCacheSize();
 
     setEventListener("notificationSettingsButton", "command",
       gPrivacyPane.showNotificationExceptions);
     setEventListener("locationSettingsButton", "command",
       gPrivacyPane.showLocationExceptions);
     setEventListener("cameraSettingsButton", "command",
       gPrivacyPane.showCameraExceptions);
     setEventListener("microphoneSettingsButton", "command",
@@ -365,19 +356,16 @@ var gPrivacyPane = {
       checkbox.setAttribute("accesskey", bundlePrefs.getString("pauseNotifications.accesskey"));
       if (AlertsServiceDND.manualDoNotDisturb) {
         let notificationsDoNotDisturb =
           document.getElementById("notificationsDoNotDisturb");
         notificationsDoNotDisturb.setAttribute("checked", true);
       }
     }
 
-    setEventListener("cacheSize", "change",
-      gPrivacyPane.updateCacheSizePref);
-
     if (Services.prefs.getBoolPref("browser.storageManager.enabled")) {
       Services.obs.addObserver(this, "sitedatamanager:sites-updated");
       Services.obs.addObserver(this, "sitedatamanager:updating-sites");
       let unload = () => {
         window.removeEventListener("unload", unload);
         Services.obs.removeObserver(this, "sitedatamanager:sites-updated");
         Services.obs.removeObserver(this, "sitedatamanager:updating-sites");
       };
@@ -1413,121 +1401,41 @@ var gPrivacyPane = {
 
   /**
    * Displays a dialog from which the user can manage his security devices.
    */
   showSecurityDevices() {
     gSubDialog.open("chrome://pippki/content/device_manager.xul");
   },
 
-  /**
-   * Clears the cache.
-   */
-  clearCache() {
-    try {
-      Services.cache2.clear();
-    } catch (ex) { }
-    this.updateActualCacheSize();
-  },
-
   showSiteDataSettings() {
     gSubDialog.open("chrome://browser/content/preferences/siteDataSettings.xul");
   },
 
   toggleSiteData(shouldShow) {
     let clearButton = document.getElementById("clearSiteDataButton");
     let settingsButton = document.getElementById("siteDataSettings");
     clearButton.disabled = !shouldShow;
     settingsButton.disabled = !shouldShow;
   },
 
-  updateTotalDataSizeLabel(usage) {
-    let prefStrBundle = document.getElementById("bundlePreferences");
+  showSiteDataLoading() {
     let totalSiteDataSizeLabel = document.getElementById("totalSiteDataSize");
-    if (usage < 0) {
-      totalSiteDataSizeLabel.textContent = prefStrBundle.getString("loadingSiteDataSize");
-    } else {
-      let size = DownloadUtils.convertByteUnits(usage);
-      totalSiteDataSizeLabel.textContent = prefStrBundle.getFormattedString("totalSiteDataSize", size);
-    }
-  },
-
-  // Retrieves the amount of space currently used by disk cache
-  updateActualCacheSize() {
-    var actualSizeLabel = document.getElementById("actualDiskCacheSize");
-    var prefStrBundle = document.getElementById("bundlePreferences");
-
-    // Needs to root the observer since cache service keeps only a weak reference.
-    this.observer = {
-      onNetworkCacheDiskConsumption(consumption) {
-        var size = DownloadUtils.convertByteUnits(consumption);
-        // The XBL binding for the string bundle may have been destroyed if
-        // the page was closed before this callback was executed.
-        if (!prefStrBundle.getFormattedString) {
-          return;
-        }
-        actualSizeLabel.textContent = prefStrBundle.getFormattedString("actualDiskCacheSize", size);
-      },
-
-      QueryInterface: XPCOMUtils.generateQI([
-        Components.interfaces.nsICacheStorageConsumptionObserver,
-        Components.interfaces.nsISupportsWeakReference
-      ])
-    };
-
-    actualSizeLabel.textContent = prefStrBundle.getString("actualDiskCacheSizeCalculated");
-
-    try {
-      Services.cache2.asyncGetDiskConsumption(this.observer);
-    } catch (e) { }
+    let prefStrBundle = document.getElementById("bundlePreferences");
+    totalSiteDataSizeLabel.textContent = prefStrBundle.getString("loadingSiteDataSize1");
   },
 
-  updateCacheSizeUI(smartSizeEnabled) {
-    document.getElementById("useCacheBefore").disabled = smartSizeEnabled;
-    document.getElementById("cacheSize").disabled = smartSizeEnabled;
-    document.getElementById("useCacheAfter").disabled = smartSizeEnabled;
-  },
-
-  readSmartSizeEnabled() {
-    // The smart_size.enabled preference element is inverted="true", so its
-    // value is the opposite of the actual pref value
-    var disabled = Preferences.get("browser.cache.disk.smart_size.enabled").value;
-    this.updateCacheSizeUI(!disabled);
-  },
-
-  /**
-   * Converts the cache size from units of KB to units of MB and stores it in
-   * the textbox element.
-   *
-   * Preferences:
-   *
-   * browser.cache.disk.capacity
-   * - the size of the browser cache in KB
-   * - Only used if browser.cache.disk.smart_size.enabled is disabled
-   */
-  updateCacheSizeInputField() {
-    let cacheSizeElem = document.getElementById("cacheSize");
-    let cachePref = Preferences.get("browser.cache.disk.capacity");
-    cacheSizeElem.value = cachePref.value / 1024;
-    if (cachePref.locked)
-      cacheSizeElem.disabled = true;
-  },
-
-  /**
-   * Updates the cache size preference once user enters a new value.
-   * We intentionally do not set preference="browser.cache.disk.capacity"
-   * onto the textbox directly, as that would update the pref at each keypress
-   * not only after the final value is entered.
-   */
-  updateCacheSizePref() {
-    let cacheSizeElem = document.getElementById("cacheSize");
-    let cachePref = Preferences.get("browser.cache.disk.capacity");
-    // Converts the cache size as specified in UI (in MB) to KB.
-    let intValue = parseInt(cacheSizeElem.value, 10);
-    cachePref.value = isNaN(intValue) ? 0 : intValue * 1024;
+  updateTotalDataSizeLabel(siteDataUsage) {
+    SiteDataManager.getCacheSize().then(function(cacheUsage) {
+      let prefStrBundle = document.getElementById("bundlePreferences");
+      let totalSiteDataSizeLabel = document.getElementById("totalSiteDataSize");
+      let totalUsage = siteDataUsage + cacheUsage;
+      let size = DownloadUtils.convertByteUnits(totalUsage);
+      totalSiteDataSizeLabel.textContent = prefStrBundle.getFormattedString("totalSiteDataSize1", size);
+    });
   },
 
   clearSiteData() {
     gSubDialog.open("chrome://browser/content/preferences/clearSiteData.xul");
   },
 
   initDataCollection() {
     this._setupLearnMoreLink("toolkit.datacollection.infoURL",
@@ -1588,17 +1496,17 @@ var gPrivacyPane = {
     Services.prefs.setBoolPref(PREF_UPLOAD_ENABLED, checkbox.checked);
   },
 
   observe(aSubject, aTopic, aData) {
     switch (aTopic) {
       case "sitedatamanager:updating-sites":
         // While updating, we want to disable this section and display loading message until updated
         this.toggleSiteData(false);
-        this.updateTotalDataSizeLabel(-1);
+        this.showSiteDataLoading();
         break;
 
       case "sitedatamanager:sites-updated":
         this.toggleSiteData(true);
         SiteDataManager.getTotalUsage()
           .then(this.updateTotalDataSizeLabel.bind(this));
         break;
     }

--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -256,43 +256,16 @@
   <checkbox id="openpageSuggestion" label="&locbar.openpage.label;"
             accesskey="&locbar.openpage.accesskey;"
             preference="browser.urlbar.suggest.openpage"/>
   <label class="text-link" id="openSearchEnginePreferences">
     &suggestionSettings2.label;
   </label>
 </groupbox>
 
-<!-- Cache -->
-<groupbox id="cacheGroup" data-category="panePrivacy" hidden="true">
-  <caption><label>&httpCache.label;</label></caption>
-
-  <hbox align="center">
-    <label id="actualDiskCacheSize" flex="1"/>
-    <button id="clearCacheButton"
-            class="accessory-button"
-            icon="clear"
-            label="&clearCacheNow.label;" accesskey="&clearCacheNow.accesskey;"/>
-  </hbox>
-  <checkbox preference="browser.cache.disk.smart_size.enabled"
-            id="allowSmartSize"
-            onsyncfrompreference="return gPrivacyPane.readSmartSizeEnabled();"
-            label="&overrideSmartCacheSize.label;"
-            accesskey="&overrideSmartCacheSize.accesskey;"/>
-  <hbox align="center" class="indent">
-    <label id="useCacheBefore" control="cacheSize"
-            accesskey="&limitCacheSizeBefore.accesskey;">
-      &limitCacheSizeBefore.label;
-    </label>
-    <textbox id="cacheSize" type="number" size="4" max="1024"
-              aria-labelledby="useCacheBefore cacheSize useCacheAfter"/>
-    <label id="useCacheAfter" flex="1">&limitCacheSizeAfter.label;</label>
-  </hbox>
-</groupbox>
-
 <!-- Site Data -->
 <groupbox id="siteDataGroup" hidden="true" data-category="panePrivacy" data-hidden-from-search="true">
   <caption><label>&siteData.label;</label></caption>
 
   <hbox align="baseline">
     <vbox flex="1">
       <description flex="1">
         <label id="totalSiteDataSize" class="tail-with-learn-more"></label>

--- a/browser/components/preferences/in-content/tests/browser_bug795764_cachedisabled.js
+++ b/browser/components/preferences/in-content/tests/browser_bug795764_cachedisabled.js
@@ -11,20 +11,16 @@ function test() {
   // Otherwise, without any site then it would just return so we would end up in not testing SiteDataManager.
   let principal = Services.scriptSecurityManager.createCodebasePrincipalFromOrigin("https://www.foo.com");
   Services.perms.addFromPrincipal(principal, "persistent-storage", Ci.nsIPermissionManager.ALLOW_ACTION);
   registerCleanupFunction(function() {
     Services.perms.removeFromPrincipal(principal, "persistent-storage");
   });
 
   SpecialPowers.pushPrefEnv({set: [
-    ["browser.cache.offline.enable", false],
-    ["browser.cache.disk.enable", false],
-    ["browser.cache.memory.enable", false],
-    ["browser.storageManager.enabled", true],
     ["privacy.userContext.ui.enabled", true]
   ]}).then(() => open_preferences(runTest));
 }
 
 function runTest(win) {
   is(gBrowser.currentURI.spec, "about:preferences", "about:preferences loaded");
 
   let tab = win.document;

--- a/browser/components/preferences/in-content/tests/browser_clearSiteData.js
+++ b/browser/components/preferences/in-content/tests/browser_clearSiteData.js
@@ -11,45 +11,16 @@ const { DownloadUtils } = ChromeUtils.im
 const TEST_QUOTA_USAGE_HOST = "example.com";
 const TEST_QUOTA_USAGE_ORIGIN = "https://" + TEST_QUOTA_USAGE_HOST;
 const TEST_QUOTA_USAGE_URL = TEST_QUOTA_USAGE_ORIGIN + "/browser/browser/components/preferences/in-content/tests/site_data_test.html";
 const TEST_OFFLINE_HOST = "example.org";
 const TEST_OFFLINE_ORIGIN = "https://" + TEST_OFFLINE_HOST;
 const TEST_OFFLINE_URL = TEST_OFFLINE_ORIGIN + "/browser/browser/components/preferences/in-content/tests/offline/offline.html";
 const TEST_SERVICE_WORKER_URL = TEST_OFFLINE_ORIGIN + "/browser/browser/components/preferences/in-content/tests/service_worker_test.html";
 
-// XXX: The intermittent bug 1331851
-// The implementation of nsICacheStorageConsumptionObserver must be passed as weak referenced,
-// so we must hold this observer here well. If we didn't, there would be a chance that
-// in Linux debug test run the observer was released before the operation at gecko was completed
-// (may be because of a relatively quicker GC cycle or a relatively slower operation).
-// As a result of that, we would never get the cache usage we want so the test would fail from timeout.
-const cacheUsageGetter = {
-  _promise: null,
-  _resolve: null,
-  get() {
-    if (!this._promise) {
-      this._promise = new Promise(resolve => {
-        this._resolve = resolve;
-        Services.cache2.asyncGetDiskConsumption(this);
-      });
-    }
-    return this._promise;
-  },
-  // nsICacheStorageConsumptionObserver implementations
-  onNetworkCacheDiskConsumption(usage) {
-    cacheUsageGetter._promise = null;
-    cacheUsageGetter._resolve(usage);
-  },
-  QueryInterface: XPCOMUtils.generateQI([
-    Components.interfaces.nsICacheStorageConsumptionObserver,
-    Components.interfaces.nsISupportsWeakReference
-  ]),
-};
-
 async function testClearData(clearSiteData, clearCache) {
   let quotaURI = Services.io.newURI(TEST_QUOTA_USAGE_ORIGIN);
   SitePermissions.set(quotaURI, "persistent-storage", SitePermissions.ALLOW);
 
   // Open a test site which saves into appcache.
   await BrowserTestUtils.openNewForegroundTab(gBrowser, TEST_OFFLINE_URL);
   await BrowserTestUtils.removeTab(gBrowser.selectedTab);
 
@@ -64,23 +35,28 @@ async function testClearData(clearSiteDa
 
   // Register some service workers.
   await loadServiceWorkerTestPage(TEST_SERVICE_WORKER_URL);
   await promiseServiceWorkerRegisteredFor(TEST_SERVICE_WORKER_URL);
 
   await openPreferencesViaOpenPreferencesAPI("privacy", { leaveOpen: true });
 
   // Test the initial states.
-  let cacheUsage = await cacheUsageGetter.get();
+  let cacheUsage = await SiteDataManager.getCacheSize();
   let quotaUsage = await getQuotaUsage(TEST_QUOTA_USAGE_ORIGIN);
   let totalUsage = await SiteDataManager.getTotalUsage();
   Assert.greater(cacheUsage, 0, "The cache usage should not be 0");
   Assert.greater(quotaUsage, 0, "The quota usage should not be 0");
   Assert.greater(totalUsage, 0, "The total usage should not be 0");
 
+  let initialSizeLabelValue = await ContentTask.spawn(gBrowser.selectedBrowser, null, async function() {
+    let sizeLabel = content.document.getElementById("totalSiteDataSize");
+    return sizeLabel.textContent;
+  });
+
   let doc = gBrowser.selectedBrowser.contentDocument;
   let clearSiteDataButton = doc.getElementById("clearSiteDataButton");
 
   let dialogOpened = promiseLoadSubDialog("chrome://browser/content/preferences/clearSiteData.xul");
   clearSiteDataButton.doCommand();
   let dialogWin = await dialogOpened;
 
   // Convert the usage numbers in the same way the UI does it to assert
@@ -140,47 +116,48 @@ async function testClearData(clearSiteDa
   if (clearSiteData) {
     await acceptPromise;
   }
 
   await dialogClosed;
 
   if (clearCache) {
     TestUtils.waitForCondition(async function() {
-      let usage = await cacheUsageGetter.get();
+      let usage = await SiteDataManager.getCacheSize();
       return usage == 0;
     }, "The cache usage should be removed");
   } else {
-    Assert.greater(await cacheUsageGetter.get(), 0, "The cache usage should not be 0");
+    Assert.greater(await SiteDataManager.getCacheSize(), 0, "The cache usage should not be 0");
   }
 
   if (clearSiteData) {
     await updatePromise;
     await cookiesClearedPromise;
     await promiseServiceWorkersCleared();
 
     TestUtils.waitForCondition(async function() {
       let usage = await SiteDataManager.getTotalUsage();
       return usage == 0;
     }, "The total usage should be removed");
-
-    // Check that the size label in about:preferences updates after we cleared data.
-    await ContentTask.spawn(gBrowser.selectedBrowser, null, async function() {
-      let sizeLabel = content.document.getElementById("totalSiteDataSize");
-
-      await ContentTaskUtils.waitForCondition(
-        () => sizeLabel.textContent.includes("0"), "Site data size label should have updated.");
-    });
   } else {
     quotaUsage = await getQuotaUsage(TEST_QUOTA_USAGE_ORIGIN);
     totalUsage = await SiteDataManager.getTotalUsage();
     Assert.greater(quotaUsage, 0, "The quota usage should not be 0");
     Assert.greater(totalUsage, 0, "The total usage should not be 0");
   }
 
+  if (clearCache || clearSiteData) {
+    // Check that the size label in about:preferences updates after we cleared data.
+    await ContentTask.spawn(gBrowser.selectedBrowser, {initialSizeLabelValue}, async function(opts) {
+      let sizeLabel = content.document.getElementById("totalSiteDataSize");
+      await ContentTaskUtils.waitForCondition(
+        () => sizeLabel.textContent != opts.initialSizeLabelValue, "Site data size label should have updated.");
+    });
+  }
+
   let desiredPermissionState = clearSiteData ? SitePermissions.UNKNOWN : SitePermissions.ALLOW;
   let permission = SitePermissions.get(quotaURI, "persistent-storage");
   is(permission.state, desiredPermissionState, "Should have the correct permission state.");
 
   await BrowserTestUtils.removeTab(gBrowser.selectedTab);
   await SiteDataManager.removeAll();
 }
 

--- a/browser/components/preferences/in-content/tests/browser_extension_controlled.js
+++ b/browser/components/preferences/in-content/tests/browser_extension_controlled.js
@@ -439,16 +439,19 @@ add_task(async function testExtensionCon
 
   await ExtensionSettingsStore.initialize();
 
   // Verify the setting isn't reported as controlled and the inputs are enabled.
   is(ExtensionSettingsStore.getSetting("prefs", "homepage_override"), null,
      "The homepage_override is not set");
   await checkHomepageEnabled();
 
+  // Disarm any pending writes before we modify the JSONFile directly.
+  await ExtensionSettingsStore._reloadFile(false);
+
   // Write out a bad store file.
   let storeData = {
     prefs: {
       homepage_override: {
         initialValue: "",
         precedenceList: [{
           id: "bad@mochi.test",
           installDate: 1508802672,

--- a/browser/components/preferences/in-content/tests/browser_siteData.js
+++ b/browser/components/preferences/in-content/tests/browser_siteData.js
@@ -67,49 +67,51 @@ add_task(async function() {
 });
 
 // Test buttons are disabled and loading message shown while updating sites
 add_task(async function() {
   await SpecialPowers.pushPrefEnv({set: [["browser.storageManager.enabled", true]]});
   let updatedPromise = promiseSiteDataManagerSitesUpdated();
   await openPreferencesViaOpenPreferencesAPI("privacy", { leaveOpen: true });
   await updatedPromise;
+  let cacheSize = await SiteDataManager.getCacheSize();
 
   let actual = null;
   let expected = null;
   let doc = gBrowser.selectedBrowser.contentDocument;
   let clearBtn = doc.getElementById("clearSiteDataButton");
   let settingsButton = doc.getElementById("siteDataSettings");
   let prefStrBundle = doc.getElementById("bundlePreferences");
   let totalSiteDataSizeLabel = doc.getElementById("totalSiteDataSize");
   is(clearBtn.disabled, false, "Should enable clear button after sites updated");
   is(settingsButton.disabled, false, "Should enable settings button after sites updated");
   await SiteDataManager.getTotalUsage()
                        .then(usage => {
                          actual = totalSiteDataSizeLabel.textContent;
                          expected = prefStrBundle.getFormattedString(
-                           "totalSiteDataSize", DownloadUtils.convertByteUnits(usage));
+                           "totalSiteDataSize1", DownloadUtils.convertByteUnits(usage + cacheSize));
                           is(actual, expected, "Should show the right total site data size");
                        });
 
   Services.obs.notifyObservers(null, "sitedatamanager:updating-sites");
   is(clearBtn.disabled, true, "Should disable clear button while updating sites");
   is(settingsButton.disabled, true, "Should disable settings button while updating sites");
   actual = totalSiteDataSizeLabel.textContent;
-  expected = prefStrBundle.getString("loadingSiteDataSize");
+  expected = prefStrBundle.getString("loadingSiteDataSize1");
   is(actual, expected, "Should show the loading message while updating");
 
   Services.obs.notifyObservers(null, "sitedatamanager:sites-updated");
   is(clearBtn.disabled, false, "Should enable clear button after sites updated");
   is(settingsButton.disabled, false, "Should enable settings button after sites updated");
+  cacheSize = await SiteDataManager.getCacheSize();
   await SiteDataManager.getTotalUsage()
                        .then(usage => {
                          actual = totalSiteDataSizeLabel.textContent;
                          expected = prefStrBundle.getFormattedString(
-                           "totalSiteDataSize", DownloadUtils.convertByteUnits(usage));
+                           "totalSiteDataSize1", DownloadUtils.convertByteUnits(usage + cacheSize));
                           is(actual, expected, "Should show the right total site data size");
                        });
 
   await BrowserTestUtils.removeTab(gBrowser.selectedTab);
 });
 
 // Test clearing service wroker through the settings panel
 add_task(async function() {

--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -738,17 +738,17 @@ you can use these alternative items. Oth
 <!ENTITY editBookmark.done.label                     "Done">
 <!ENTITY editBookmark.removeBookmark.accessKey       "R">
 
 <!-- LOCALIZATION NOTE (identity.securityView.label)
      This is the header of the security subview in the Site Identity panel. -->
 <!ENTITY identity.securityView.label "Site Security">
 
 <!ENTITY identity.connectionSecure "Secure Connection">
-<!ENTITY identity.connectionNotSecure "Connection is Not Secure">
+<!ENTITY identity.connectionNotSecure "Connection Is Not Secure">
 <!ENTITY identity.connectionFile "This page is stored on your computer.">
 <!ENTITY identity.connectionVerified2 "You are securely connected to this site, owned by:">
 <!ENTITY identity.connectionInternal "This is a secure &brandShortName; page.">
 <!ENTITY identity.extensionPage "This page is loaded from an extension.">
 <!ENTITY identity.insecureLoginForms2 "Logins entered on this page could be compromised.">
 
 <!-- Strings for connection state warnings. -->
 <!ENTITY identity.activeBlocked "&brandShortName; has blocked parts of this page that are not secure.">

--- a/browser/locales/en-US/chrome/browser/preferences/advanced.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/advanced.dtd
@@ -48,40 +48,24 @@ available. -->
 <!ENTITY networkTab.label                "Network">
 
 <!ENTITY networkProxy.label              "Network Proxy">
 
 <!ENTITY connectionSettingsLearnMore.label "Learn more">
 <!ENTITY connectionSettings.label        "Settings…">
 <!ENTITY connectionSettings.accesskey    "e">
 
-<!ENTITY httpCache.label                 "Cached Web Content">
-
 <!--  Site Data section manages sites using Storage API and is under Network -->
 <!ENTITY siteData.label                  "Site Data">
 <!ENTITY clearSiteData.label             "Clear All Data">
 <!ENTITY clearSiteData.accesskey         "l">
 <!ENTITY siteDataSettings.label          "Settings…">
 <!ENTITY siteDataSettings.accesskey      "i">
 <!ENTITY siteDataLearnMoreLink.label     "Learn more">
 
-<!-- LOCALIZATION NOTE:
-  The entities limitCacheSizeBefore.label and limitCacheSizeAfter.label appear on a single
-  line in preferences as follows:
-
-  &limitCacheSizeBefore.label [textbox for cache size in MB] &limitCacheSizeAfter.label;
--->
-<!ENTITY limitCacheSizeBefore.label      "Limit cache to">
-<!ENTITY limitCacheSizeBefore.accesskey  "L">
-<!ENTITY limitCacheSizeAfter.label       "MB of space">
-<!ENTITY clearCacheNow.label             "Clear Now">
-<!ENTITY clearCacheNow.accesskey         "C">
-<!ENTITY overrideSmartCacheSize.label    "Override automatic cache management">
-<!ENTITY overrideSmartCacheSize.accesskey "O">
-
 <!ENTITY updateTab.label                 "Update">
 
 <!-- LOCALIZATION NOTE (updateApplication.label):
   Strings from aboutDialog.dtd are displayed in this section of the preferences.
   Please check for possible accesskey conflicts.
 -->
 <!ENTITY updateApplication.label         "&brandShortName; Updates">
 <!-- LOCALIZATION NOTE (updateApplication.version.*): updateApplication.version.pre

--- a/browser/locales/en-US/chrome/browser/preferences/preferences.properties
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.properties
@@ -161,38 +161,22 @@ removeAllShownCookies.accesskey=A
 # you can use #1 in your localization as a placeholder for the number.
 # For example this is the English string with numbers:
 # removeSelectedCookied=Remove #1 Selected;Remove #1 Selected
 removeSelectedCookies.label=Remove Selected;Remove Selected
 removeSelectedCookies.accesskey=R
 
 defaultUserContextLabel=None
 
-####Preferences::Advanced::Network
-#LOCALIZATION NOTE: The next string is for the disk usage of the web content cache.
-#   e.g., "Your web content cache is currently using 200 MB"
-#   %1$S = size
-#   %2$S = unit (MB, KB, etc.)
-actualDiskCacheSize=Your web content cache is currently using %1$S %2$S of disk space
-actualDiskCacheSizeCalculated=Calculating web content cache size…
-
-####Preferences::Advanced::Network
-#LOCALIZATION NOTE: The next string is for the disk usage of the application cache.
-#   e.g., "Your application cache is currently using 200 MB"
-#   %1$S = size
-#   %2$S = unit (MB, KB, etc.)
-actualAppCacheSize=Your application cache is currently using %1$S %2$S of disk space
-
-####Preferences::Advanced::Network
 #LOCALIZATION NOTE: The next string is for the total usage of site data.
 #   e.g., "The total usage is currently using 200 MB"
 #   %1$S = size
 #   %2$S = unit (MB, KB, etc.)
-totalSiteDataSize=Your stored site data is currently using %1$S %2$S of disk space
-loadingSiteDataSize=Calculating site data size…
+totalSiteDataSize1=Your stored site data and cache are currently using %1$S %2$S of disk space
+loadingSiteDataSize1=Calculating site data and cache size…
 persistent=Persistent
 siteUsage=%1$S %2$S
 acceptRemove=Remove
 # LOCALIZATION NOTE (siteDataSettings2.description): %S = brandShortName
 siteDataSettings2.description=The following websites store site data on your computer. %S keeps data from websites with persistent storage until you delete it, and deletes data from websites with non-persistent storage as space is needed.
 # LOCALIZATION NOTE (removeAllSiteData, removeAllSiteDataShown):
 # removeAllSiteData and removeAllSiteDataShown are both used on the same one button,
 # never displayed together and can share the same accesskey.

--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -465,18 +465,18 @@ notification[value="translation"] menuli
   color: -moz-menubartext;
 }
 
 #nav-bar {
   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
 }
 
 @media (-moz-menubar-drag) {
-  #toolbar-menubar:not([autohide="true"]):not(:-moz-lwtheme),
-  #TabsToolbar:not(:-moz-lwtheme) {
+  #toolbar-menubar:not([autohide="true"]),
+  #TabsToolbar {
     -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
   }
 }
 
 .tabbrowser-tab:focus > .tab-stack > .tab-content {
   outline: 1px dotted;
   outline-offset: -6px;
 }

--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -2,18 +2,16 @@
 % 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/.
 
 /* compacttheme.css is loaded in browser.xul after browser.css when it is
    preffed on.  The bulk of the styling is here in the shared file, but
    there are overrides for each platform in their compacttheme.css files. */
 
 :root:-moz-lwtheme {
-  text-shadow: none;
-
   --toolbar-bgcolor: var(--chrome-secondary-background-color);
   --toolbar-gbimage: none;
   --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
   --toolbar-non-lwt-textcolor: var(--chrome-color);
   --toolbar-non-lwt-bgimage: none;
 
   --toolbarbutton-icon-fill-opacity: .7;
 }
@@ -104,14 +102,8 @@ toolbar[brighttext] .toolbarbutton-1 {
 
 #urlbar-zoom-button:-moz-lwtheme-brighttext:hover {
   background-color: rgba(255,255,255,.2);
 }
 
 #urlbar-zoom-button:-moz-lwtheme-brighttext:hover:active {
   background-color: rgba(255,255,255,.3);
 }
-
-.tab-icon-sound[soundplaying],
-.tab-icon-sound[muted] {
-  filter: none !important; /* removes drop-shadow filter */
-}
-

--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -14,32 +14,32 @@
 
 #customization-container {
   background-color: var(--toolbar-non-lwt-bgcolor);
   background-image: var(--toolbar-non-lwt-bgimage);
   color: var(--toolbar-non-lwt-textcolor);
   text-shadow: none;
 }
 
-#customization-container:-moz-lwtheme {
+:root[lwtheme-image] #customization-container {
   background-color: transparent;
   background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-non-lwt-bgcolor) 45px);
 }
 
 #customization-palette {
   padding: 5px 20px 20px;
 }
 
 #customization-header {
   font-weight: 500;
   font-size: 1.2em;
   margin: 20px 20px 15px;
 }
 
-#customization-header:-moz-lwtheme {
+:root[lwtheme-image] #customization-header {
   text-shadow: 0 0 1em var(--toolbar-non-lwt-bgcolor),
                0 0 1em var(--toolbar-non-lwt-bgcolor),
                0 0 .5em var(--toolbar-non-lwt-bgcolor);
 }
 
 #customization-panel-container {
   padding: 0 20px 25px;
 }

--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -406,25 +406,25 @@ tabbrowser {
 .tab-icon-sound[muted] {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
 }
 
 .tab-icon-sound[activemedia-blocked] {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
 }
 
-.tab-icon-sound:-moz-lwtheme-darktext[soundplaying],
-.tab-icon-sound:-moz-lwtheme-darktext[muted],
-.tab-icon-sound:-moz-lwtheme-darktext[activemedia-blocked] {
+:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[soundplaying],
+:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[muted],
+:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[activemedia-blocked] {
   filter: drop-shadow(1px 1px 1px white);
 }
 
-.tab-icon-sound:-moz-lwtheme-brighttext[soundplaying],
-.tab-icon-sound:-moz-lwtheme-brighttext[muted],
-.tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] {
+:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[soundplaying],
+:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[muted],
+:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] {
   filter: drop-shadow(1px 1px 1px black);
 }
 
 .tab-icon-sound[soundplaying]:not(:hover),
 .tab-icon-sound[muted]:not(:hover),
 .tab-icon-sound[activemedia-blocked]:not(:hover) {
   opacity: .8;
 }
@@ -525,17 +525,17 @@ tabbrowser {
 }
 
 /*
  * LightweightThemeConsumer will set the current lightweight theme's header
  * image to the lwt-header-image variable, used in each of the following rulesets.
  */
 
 /* Lightweight theme on tabs */
-#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
+:root[lwtheme-image] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true] {
   background-attachment: scroll, fixed;
   background-color: transparent;
   background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
                     var(--lwt-header-image);
   background-position: 0 0, right top;
   background-repeat: repeat-x, no-repeat;
   background-size: auto 100%, auto auto;
 }

--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -101,29 +101,29 @@
       :root[sizemode="maximized"] #titlebar-max {
         list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
       }
 
       #titlebar-close {
         list-style-image: url(chrome://browser/skin/window-controls/close.svg);
       }
 
-      .titlebar-button:-moz-lwtheme {
+      :root[lwtheme-image] .titlebar-button {
         -moz-context-properties: unset;
       }
-      #titlebar-min:-moz-lwtheme {
+      :root[lwtheme-image] #titlebar-min {
         list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg);
       }
-      #titlebar-max:-moz-lwtheme {
+      :root[lwtheme-image] #titlebar-max {
         list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg);
       }
-      :root[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
+      :root[lwtheme-image][sizemode="maximized"] #titlebar-max {
         list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg);
       }
-      #titlebar-close:-moz-lwtheme {
+      :root[lwtheme-image] #titlebar-close {
         list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg);
       }
 
       /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
        * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
       @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
         .titlebar-button > .toolbarbutton-icon {
           width: 11.5px;

--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -26,20 +26,16 @@
       background-color: rgb(185,209,234) !important;
     }
     #main-window:-moz-window-inactive {
       background-color: rgb(215,228,242) !important;
     }
   }
 }
 
-#toolbar-menubar {
-  text-shadow: none !important;
-}
-
 @media (-moz-os-version: windows-win7) {
   @media (-moz-windows-default-theme) {
     /* Always show light toolbar elements on aero surface. */
     #TabsToolbar {
       color: hsl(240,9%,98%);
     }
 
     /* Keep showing the correct color inside the tabs. */
@@ -60,21 +56,16 @@
 }
 
 @media (-moz-windows-glass) {
   /* Set to full fill-opacity to improve visibility of toolbar buttons on aero glass. */
   #TabsToolbar {
     --toolbarbutton-icon-fill-opacity: 1;
   }
 
-  /* Make the menubar text readable on aero glass (copied from browser-aero.css). */
-  #toolbar-menubar {
-    text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
-  }
-
   #main-menubar:not(:-moz-window-inactive) {
     background-color: rgba(255,255,255,.5);
     color: black;
     border-radius: 4px;
   }
 }
 
 @media (-moz-os-version: windows-win7),
@@ -150,28 +141,8 @@
  * over the native border with our custom borders: */
 #navigator-toolbox {
   /* These are !important to avoid specificity-wars with the selectors that add borders here. */
   background-image: none !important;
   border-top: none !important;
   box-shadow: none !important;
   padding-top: 0 !important;
 }
-
-@media (-moz-os-version: windows-win10) {
-  .titlebar-button:-moz-lwtheme {
-    -moz-context-properties: stroke;
-    stroke: currentColor;
-  }
-  #titlebar-min:-moz-lwtheme {
-    list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
-  }
-  #titlebar-max:-moz-lwtheme {
-    list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
-  }
-  :root[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
-    list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
-  }
-  #titlebar-close:-moz-lwtheme {
-    list-style-image: url(chrome://browser/skin/window-controls/close.svg);
-  }
-}
-

--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -22,16 +22,17 @@ const {
 const { isAllAnimationEqual } = require("./utils/utils");
 
 class AnimationInspector {
   constructor(inspector, win) {
     this.inspector = inspector;
     this.win = win;
 
     this.getAnimatedPropertyMap = this.getAnimatedPropertyMap.bind(this);
+    this.getComputedStyle = this.getComputedStyle.bind(this);
     this.getNodeFromActor = this.getNodeFromActor.bind(this);
     this.selectAnimation = this.selectAnimation.bind(this);
     this.setDetailVisibility = this.setDetailVisibility.bind(this);
     this.simulateAnimation = this.simulateAnimation.bind(this);
     this.toggleElementPicker = this.toggleElementPicker.bind(this);
     this.update = this.update.bind(this);
     this.onElementPickerStarted = this.onElementPickerStarted.bind(this);
     this.onElementPickerStopped = this.onElementPickerStopped.bind(this);
@@ -52,16 +53,17 @@ class AnimationInspector {
 
     const {
       onHideBoxModelHighlighter,
     } = this.inspector.getPanel("boxmodel").getComponentProps();
 
     const {
       emit: emitEventForTest,
       getAnimatedPropertyMap,
+      getComputedStyle,
       getNodeFromActor,
       selectAnimation,
       setDetailVisibility,
       simulateAnimation,
       toggleElementPicker,
     } = this;
 
     const target = this.inspector.target;
@@ -72,16 +74,17 @@ class AnimationInspector {
         id: "newanimationinspector",
         key: "newanimationinspector",
         store: this.inspector.store
       },
       App(
         {
           emitEventForTest,
           getAnimatedPropertyMap,
+          getComputedStyle,
           getNodeFromActor,
           onHideBoxModelHighlighter,
           onShowBoxModelHighlighterForNode,
           selectAnimation,
           setDetailVisibility,
           setSelectedNode,
           simulateAnimation,
           toggleElementPicker,
@@ -152,16 +155,37 @@ class AnimationInspector {
       });
 
       animatedPropertyMap.set(name, keyframes);
     }
 
     return animatedPropertyMap;
   }
 
+  /**
+   * Return the computed style of the specified property after setting the given styles
+   * to the simulated element.
+   *
+   * @param {String} property
+   *        CSS property name (e.g. text-align).
+   * @param {Object} styles
+   *        Map of CSS property name and value.
+   * @return {String}
+   *         Computed style of property.
+   */
+  getComputedStyle(property, styles) {
+    this.simulatedElement.style.cssText = "";
+
+    for (let propertyName in styles) {
+      this.simulatedElement.style.setProperty(propertyName, styles[propertyName]);
+    }
+
+    return this.win.getComputedStyle(this.simulatedElement).getPropertyValue(property);
+  }
+
   getNodeFromActor(actorID) {
     return this.inspector.walker.getNodeFromActor(actorID, ["node"]);
   }
 
   isPanelVisible() {
     return this.inspector && this.inspector.toolbox && this.inspector.sidebar &&
            this.inspector.toolbox.currentToolId === "inspector" &&
            this.inspector.sidebar.getCurrentTabID() === "newanimationinspector";

--- a/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
@@ -1,28 +1,59 @@
 /* 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/. */
 
 "use strict";
 
-const { PureComponent } = require("devtools/client/shared/vendor/react");
+const { createFactory, 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 AnimatedPropertyName = createFactory(require("./AnimatedPropertyName"));
+const KeyframesGraph = createFactory(require("./keyframes-graph/KeyframesGraph"));
+
 class AnimatedPropertyItem extends PureComponent {
   static get propTypes() {
     return {
+      getComputedStyle: PropTypes.func.isRequired,
       property: PropTypes.string.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      state: PropTypes.object.isRequired,
+      type: PropTypes.string.isRequired,
       values: PropTypes.array.isRequired,
     };
   }
 
   render() {
+    const {
+      getComputedStyle,
+      property,
+      simulateAnimation,
+      state,
+      type,
+      values,
+    } = this.props;
+
     return dom.li(
       {
         className: "animated-property-item"
-      }
+      },
+      AnimatedPropertyName(
+        {
+          property,
+          state,
+        }
+      ),
+      KeyframesGraph(
+        {
+          getComputedStyle,
+          property,
+          simulateAnimation,
+          type,
+          values,
+        }
+      )
     );
   }
 }
 
 module.exports = AnimatedPropertyItem;

--- a/devtools/client/inspector/animation/components/AnimatedPropertyList.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyList.js
@@ -11,16 +11,18 @@ const PropTypes = require("devtools/clie
 const AnimatedPropertyItem = createFactory(require("./AnimatedPropertyItem"));
 
 class AnimatedPropertyList extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getComputedStyle: PropTypes.func.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       animatedPropertyMap: null
@@ -30,43 +32,69 @@ class AnimatedPropertyList extends PureC
   componentDidMount() {
     this.updateKeyframesList(this.props.animation);
   }
 
   componentWillReceiveProps(nextProps) {
     this.updateKeyframesList(nextProps.animation);
   }
 
+  getPropertyState(property) {
+    const { animation } = this.props;
+
+    for (const propState of animation.state.propertyState) {
+      if (propState.property === property) {
+        return propState;
+      }
+    }
+
+    return null;
+  }
+
   async updateKeyframesList(animation) {
     const {
       getAnimatedPropertyMap,
       emitEventForTest,
     } = this.props;
     const animatedPropertyMap = await getAnimatedPropertyMap(animation);
+    const animationTypes = await animation.getAnimationTypes(animatedPropertyMap.keys());
 
-    this.setState({ animatedPropertyMap });
+    this.setState({ animatedPropertyMap, animationTypes });
 
     emitEventForTest("animation-keyframes-rendered");
   }
 
   render() {
-    const { animatedPropertyMap } = this.state;
+    const {
+      getComputedStyle,
+      simulateAnimation,
+    } = this.props;
+    const {
+      animatedPropertyMap,
+      animationTypes,
+    } = this.state;
 
     if (!animatedPropertyMap) {
       return null;
     }
 
     return dom.ul(
       {
         className: "animated-property-list"
       },
       [...animatedPropertyMap.entries()].map(([property, values]) => {
+        const state = this.getPropertyState(property);
+        const type = animationTypes[property];
         return AnimatedPropertyItem(
           {
+            getComputedStyle,
             property,
+            simulateAnimation,
+            state,
+            type,
             values,
           }
         );
       })
     );
   }
 }
 

--- a/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
@@ -12,35 +12,41 @@ const AnimatedPropertyList = createFacto
 const AnimatedPropertyListHeader = createFactory(require("./AnimatedPropertyListHeader"));
 
 class AnimatedPropertyListContainer extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getComputedStyle: PropTypes.func.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
     };
   }
 
   render() {
     const {
       animation,
       emitEventForTest,
       getAnimatedPropertyMap,
+      getComputedStyle,
+      simulateAnimation,
     } = this.props;
 
     return dom.div(
       {
-        className: "animated-property-list-container"
+        className: `animated-property-list-container ${ animation.state.type }`
       },
       AnimatedPropertyListHeader(),
       AnimatedPropertyList(
         {
           animation,
           emitEventForTest,
           getAnimatedPropertyMap,
+          getComputedStyle,
+          simulateAnimation,
         }
       )
     );
   }
 }
 
 module.exports = AnimatedPropertyListContainer;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyName.js
@@ -0,0 +1,40 @@
+/* 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/. */
+
+"use strict";
+
+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");
+
+class AnimatedPropertyName extends PureComponent {
+  static get propTypes() {
+    return {
+      property: PropTypes.string.isRequired,
+      state: PropTypes.oneOfType([null, PropTypes.object]).isRequired,
+    };
+  }
+
+  render() {
+    const {
+      property,
+      state,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: "animated-property-name" +
+                   (state && state.runningOnCompositor ? " compositor" : "") +
+                   (state && state.warning ? " warning" : ""),
+        title: state ? state.warning : "",
+      },
+      dom.span(
+        {},
+        property
+      )
+    );
+  }
+}
+
+module.exports = AnimatedPropertyName;

--- a/devtools/client/inspector/animation/components/AnimationDetailContainer.js
+++ b/devtools/client/inspector/animation/components/AnimationDetailContainer.js
@@ -14,26 +14,30 @@ const AnimatedPropertyListContainer =
   createFactory(require("./AnimatedPropertyListContainer"));
 
 class AnimationDetailContainer extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getComputedStyle: PropTypes.func.isRequired,
       setDetailVisibility: PropTypes.func.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
     };
   }
 
   render() {
     const {
       animation,
       emitEventForTest,
       getAnimatedPropertyMap,
+      getComputedStyle,
       setDetailVisibility,
+      simulateAnimation,
     } = this.props;
 
     return dom.div(
       {
         className: "animation-detail-container"
       },
       animation ?
         AnimationDetailHeader(
@@ -45,16 +49,18 @@ class AnimationDetailContainer extends P
       :
         null,
       animation ?
         AnimatedPropertyListContainer(
           {
             animation,
             emitEventForTest,
             getAnimatedPropertyMap,
+            getComputedStyle,
+            simulateAnimation,
           }
         )
       :
         null
     );
   }
 }
 

--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -16,16 +16,17 @@ const SplitBox = createFactory(require("
 
 class App extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
       detailVisibility: PropTypes.bool.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
+      getComputedStyle: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       selectAnimation: PropTypes.func.isRequired,
       setDetailVisibility: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
       toggleElementPicker: PropTypes.func.isRequired,
@@ -37,16 +38,17 @@ class App extends PureComponent {
   }
 
   render() {
     const {
       animations,
       detailVisibility,
       emitEventForTest,
       getAnimatedPropertyMap,
+      getComputedStyle,
       getNodeFromActor,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       selectAnimation,
       setDetailVisibility,
       setSelectedNode,
       simulateAnimation,
       toggleElementPicker,
@@ -59,17 +61,19 @@ class App extends PureComponent {
       },
       animations.length ?
       SplitBox({
         className: "animation-container-splitter",
         endPanel: AnimationDetailContainer(
           {
             emitEventForTest,
             getAnimatedPropertyMap,
+            getComputedStyle,
             setDetailVisibility,
+            simulateAnimation,
           }
         ),
         endPanelControl: true,
         initialHeight: "50%",
         splitterSize: 1,
         startPanel: AnimationListContainer(
           {
             animations,

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
@@ -0,0 +1,184 @@
+/* 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/. */
+
+"use strict";
+
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const {colorUtils} = require("devtools/shared/css/color.js");
+
+const ComputedStylePath = require("./ComputedStylePath");
+
+/* Count for linearGradient ID */
+let LINEAR_GRADIENT_ID_COUNT = 0;
+
+class ColorPath extends ComputedStylePath {
+  constructor(props) {
+    super(props);
+
+    this.state = this.propToState(props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState(this.propToState(nextProps));
+  }
+
+  getPropertyName() {
+    return "color";
+  }
+
+  getPropertyValue(keyframe) {
+    return keyframe.value;
+  }
+
+  propToState({ values }) {
+    const maxObject = { distance: 0 };
+
+    for (let i = 0; i < values.length - 1; i++) {
+      const value1 = getRGBA(values[i].value);
+      for (let j = i + 1; j < values.length; j++) {
+        const value2 = getRGBA(values[j].value);
+        const distance = getRGBADistance(value1, value2);
+
+        if (maxObject.distance >= distance) {
+          continue;
+        }
+
+        maxObject.distance = distance;
+        maxObject.value1 = value1;
+        maxObject.value2 = value2;
+      }
+    }
+
+    const maxDistance = maxObject.distance;
+    const baseValue =
+      maxObject.value1 < maxObject.value2 ? maxObject.value1 : maxObject.value2;
+
+    return { baseValue, maxDistance };
+  }
+
+  toSegmentValue(computedStyle) {
+    const { baseValue, maxDistance } = this.state;
+    const value = getRGBA(computedStyle);
+    return getRGBADistance(baseValue, value) / maxDistance;
+  }
+
+  /**
+   * Overide parent's method.
+   */
+  renderEasingHint() {
+    const {
+      easingHintStrokeWidth,
+      graphHeight,
+      totalDuration,
+      values,
+    } = this.props;
+
+    const hints = [];
+
+    for (let i = 0; i < values.length - 1; i++) {
+      const startKeyframe = values[i];
+      const endKeyframe = values[i + 1];
+      const startTime = startKeyframe.offset * totalDuration;
+      const endTime = endKeyframe.offset * totalDuration;
+
+      const g = dom.g(
+        {
+          className: "hint"
+        },
+        dom.title({}, startKeyframe.easing),
+        dom.rect(
+          {
+            x: startTime,
+            y: -graphHeight,
+            height: graphHeight,
+            width: endTime - startTime,
+            style: {
+              "stroke-width": easingHintStrokeWidth,
+            },
+          }
+        )
+      );
+      hints.push(g);
+    }
+
+    return hints;
+  }
+
+  /**
+   * Overide parent's method.
+   */
+  renderPathSegments(segments) {
+    for (const segment of segments) {
+      segment.y = 1;
+    }
+
+    const lastSegment = segments[segments.length - 1];
+    const id = `color-property-${ LINEAR_GRADIENT_ID_COUNT++ }`;
+    const path = super.renderPathSegments(segments, { fill: `url(#${ id })` });
+    const linearGradient = dom.linearGradient(
+      { id },
+      segments.map(segment => {
+        return dom.stop(
+          {
+            "stopColor": segment.computedStyle,
+            "offset": segment.x / lastSegment.x,
+          }
+        );
+      })
+    );
+
+    return [path, linearGradient];
+  }
+
+  render() {
+    return dom.g(
+      {
+        className: "color-path",
+      },
+      super.renderGraph()
+    );
+  }
+}
+
+/**
+ * Parse given RGBA string.
+ *
+ * @param {String} colorString
+ *        e.g. rgb(0, 0, 0) or rgba(0, 0, 0, 0.5) and so on.
+ * @return {Object}
+ *         RGBA {r: r, g: g, b: b, a: a}.
+ */
+function getRGBA(colorString) {
+  const color = new colorUtils.CssColor(colorString);
+  return color.getRGBATuple();
+}
+
+/**
+ * Return the distance from give two RGBA.
+ *
+ * @param {Object} rgba1
+ *        RGBA (format is same to getRGBA)
+ * @param {Object} rgba2
+ *        RGBA (format is same to getRGBA)
+ * @return {Number}
+ *         The range is 0 - 1.0.
+ */
+function getRGBADistance(rgba1, rgba2) {
+  const startA = rgba1.a;
+  const startR = rgba1.r * startA;
+  const startG = rgba1.g * startA;
+  const startB = rgba1.b * startA;
+  const endA = rgba2.a;
+  const endR = rgba2.r * endA;
+  const endG = rgba2.g * endA;
+  const endB = rgba2.b * endA;
+  const diffA = startA - endA;
+  const diffR = startR - endR;
+  const diffG = startG - endG;
+  const diffB = startB - endB;
+  return Math.sqrt(diffA * diffA + diffR * diffR + diffG * diffG + diffB * diffB);
+}
+
+module.exports = ColorPath;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js
@@ -0,0 +1,233 @@
+/* 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/. */
+
+"use strict";
+
+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 {
+  createPathSegments,
+  DEFAULT_DURATION_RESOLUTION,
+  getPreferredProgressThresholdByKeyframes,
+  toPathString,
+} = require("../../utils/graph-helper");
+
+/*
+ * This class is an abstraction for computed style path of keyframes.
+ * Subclass of this should implement the following methods:
+ *
+ * getPropertyName()
+ *   Returns property name which will be animated.
+ *   @return {String}
+ *           e.g. opacity
+ *
+ * getPropertyValue(keyframe)
+ *   Returns value which uses as animated keyframe value from given parameter.
+ *   @param {Object} keyframe
+ *   @return {String||Number}
+ *           e.g. 0
+ *
+ * toSegmentValue(computedStyle)
+ *   Convert computed style to segment value of graph.
+ *   @param {String||Number}
+ *          e.g. 0
+ *   @return {Number}
+ *          e.g. 0 (should be 0 - 1.0)
+ */
+class ComputedStylePath extends PureComponent {
+  static get propTypes() {
+    return {
+      componentWidth: PropTypes.number.isRequired,
+      easingHintStrokeWidth: PropTypes.number.isRequired,
+      graphHeight: PropTypes.number.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      totalDuration: PropTypes.number.isRequired,
+      values: PropTypes.array.isRequired,
+    };
+  }
+
+  /**
+   * Return an array containing the path segments between the given start and
+   * end keyframe values.
+   *
+   * @param {Object} startValue
+   *        Starting keyframe.
+   * @param {Object} startValue
+   *        Ending keyframe.
+   * @return {Array}
+   *         Array of path segment.
+   *         [{x: {Number} time, y: {Number} segment value}, ...]
+   */
+  getPathSegments(startValue, endValue) {
+    const {
+      componentWidth,
+      simulateAnimation,
+      totalDuration,
+    } = this.props;
+
+    const propertyName = this.getPropertyName();
+    const offsetDistance = endValue.offset - startValue.offset;
+    const duration = offsetDistance * totalDuration;
+
+    const keyframes = [startValue, endValue].map((keyframe, index) => {
+      return {
+        offset: index,
+        easing: keyframe.easing,
+        [getJsPropertyName(propertyName)]: this.getPropertyValue(keyframe),
+      };
+    });
+    const effect = {
+      duration,
+      fill: "forwards",
+    };
+    const simulatedAnimation = simulateAnimation(keyframes, effect, true);
+    const simulatedElement = simulatedAnimation.effect.target;
+    const win = simulatedElement.ownerGlobal;
+    const threshold = getPreferredProgressThresholdByKeyframes(keyframes);
+
+    const getSegment = time => {
+      simulatedAnimation.currentTime = time;
+      const computedStyle =
+        win.getComputedStyle(simulatedElement).getPropertyValue(propertyName);
+
+      return {
+        computedStyle,
+        x: time,
+        y: this.toSegmentValue(computedStyle),
+      };
+    };
+
+    const segments = createPathSegments(0, duration, duration / componentWidth, threshold,
+                                        DEFAULT_DURATION_RESOLUTION, getSegment);
+    const offset = startValue.offset * totalDuration;
+
+    for (const segment of segments) {
+      segment.x += offset;
+    }
+
+    return segments;
+  }
+
+  /**
+   * Render easing hint from given path segments.
+   *
+   * @param {Array} segments
+   *        Path segments.
+   * @return {Element}
+   *         Element which represents easing hint.
+   */
+  renderEasingHint(segments) {
+    const {
+      easingHintStrokeWidth,
+      totalDuration,
+      values,
+    } = this.props;
+
+    const hints = [];
+
+    for (let i = 0, indexOfSegments = 0; i < values.length - 1; i++) {
+      const startKeyframe = values[i];
+      const endKeyframe = values[i + 1];
+      const endTime = endKeyframe.offset * totalDuration;
+      const hintSegments = [];
+
+      for (; indexOfSegments < segments.length; indexOfSegments++) {
+        const segment = segments[indexOfSegments];
+        hintSegments.push(segment);
+
+        if (startKeyframe.offset === endKeyframe.offset) {
+          hintSegments.push(segments[++indexOfSegments]);
+          break;
+        } else if (segment.x === endTime) {
+          break;
+        }
+      }
+
+      const g = dom.g(
+        {
+          className: "hint"
+        },
+        dom.title({}, startKeyframe.easing),
+        dom.path(
+          {
+            d: `M${ hintSegments[0].x },${ hintSegments[0].y } ` +
+               toPathString(hintSegments),
+            style: {
+              "stroke-width": easingHintStrokeWidth,
+            }
+          }
+        )
+      );
+
+      hints.push(g);
+    }
+
+    return hints;
+  }
+
+  /**
+   * Render graph. This method returns React dom.
+   *
+   * @return {Element}
+   */
+  renderGraph() {
+    const { values } = this.props;
+
+    const segments = [];
+
+    for (let i = 0; i < values.length - 1; i++) {
+      const startValue = values[i];
+      const endValue = values[i + 1];
+      segments.push(...this.getPathSegments(startValue, endValue));
+    }
+
+    return [
+      this.renderPathSegments(segments),
+      this.renderEasingHint(segments)
+    ];
+  }
+
+  /**
+   * Return react dom fron given path segments.
+   *
+   * @param {Array} segments
+   * @param {Object} style
+   * @return {Element}
+   */
+  renderPathSegments(segments, style) {
+    const { graphHeight } = this.props;
+
+    for (const segment of segments) {
+      segment.y *= graphHeight;
+    }
+
+    let d = `M${ segments[0].x },0 `;
+    d += toPathString(segments);
+    d += `L${ segments[segments.length - 1].x },0 Z`;
+
+    return dom.path({ d, style });
+  }
+}
+
+/**
+ * Convert given CSS property name to JavaScript CSS name.
+ *
+ * @param {String} cssPropertyName
+ *        CSS property name (e.g. background-color).
+ * @return {String}
+ *         JavaScript CSS property name (e.g. backgroundColor).
+ */
+function getJsPropertyName(cssPropertyName) {
+  if (cssPropertyName == "float") {
+    return "cssFloat";
+  }
+  // https://drafts.csswg.org/cssom/#css-property-to-idl-attribute
+  return cssPropertyName.replace(/-([a-z])/gi, (str, group) => {
+    return group.toUpperCase();
+  });
+}
+
+module.exports = ComputedStylePath;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/DiscretePath.js
@@ -0,0 +1,66 @@
+/* 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/. */
+
+"use strict";
+
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const ComputedStylePath = require("./ComputedStylePath");
+
+class DiscretePath extends ComputedStylePath {
+  static get propTypes() {
+    return {
+      property: PropTypes.string.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = this.propToState(props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState(this.propToState(nextProps));
+  }
+
+  getPropertyName() {
+    return this.props.property;
+  }
+
+  getPropertyValue(keyframe) {
+    return keyframe.value;
+  }
+
+  propToState({ property, getComputedStyle, values }) {
+    const discreteValues = [];
+
+    for (const keyframe of values) {
+      const style = getComputedStyle(property, { [property]: keyframe.value });
+
+      if (!discreteValues.includes(style)) {
+        discreteValues.push(style);
+      }
+    }
+
+    return { discreteValues };
+  }
+
+  toSegmentValue(computedStyle) {
+    const { discreteValues } = this.state;
+    return discreteValues.indexOf(computedStyle) / (discreteValues.length - 1);
+  }
+
+  render() {
+    return dom.g(
+      {
+        className: "discrete-path",
+      },
+      super.renderGraph()
+    );
+  }
+}
+
+module.exports = DiscretePath;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/DistancePath.js
@@ -0,0 +1,34 @@
+/* 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/. */
+
+"use strict";
+
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const ComputedStylePath = require("./ComputedStylePath");
+
+class DistancePath extends ComputedStylePath {
+  getPropertyName() {
+    return "opacity";
+  }
+
+  getPropertyValue(keyframe) {
+    return keyframe.distance;
+  }
+
+  toSegmentValue(computedStyle) {
+    return computedStyle;
+  }
+
+  render() {
+    return dom.g(
+      {
+        className: "distance-path",
+      },
+      super.renderGraph()
+    );
+  }
+}
+
+module.exports = DistancePath;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerItem.js
@@ -0,0 +1,33 @@
+/* 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/. */
+
+"use strict";
+
+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");
+
+class KeyframeMarkerItem extends PureComponent {
+  static get propTypes() {
+    return {
+      keyframe: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { keyframe } = this.props;
+
+    return dom.li(
+      {
+        className: "keyframe-marker-item",
+        title: keyframe.value,
+        style: {
+          left: `${ keyframe.offset * 100 }%`,
+        },
+      }
+    );
+  }
+}
+
+module.exports = KeyframeMarkerItem;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
@@ -0,0 +1,32 @@
+/* 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/. */
+
+"use strict";
+
+const { createFactory, 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 KeyframeMarkerItem = createFactory(require("./KeyframeMarkerItem"));
+
+class KeyframeMarkerList extends PureComponent {
+  static get propTypes() {
+    return {
+      values: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { values } = this.props;
+
+    return dom.ul(
+      {
+        className: "keyframe-marker-list"
+      },
+      values.map(value => KeyframeMarkerItem({ keyframe: value }))
+    );
+  }
+}
+
+module.exports = KeyframeMarkerList;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
@@ -0,0 +1,52 @@
+/* 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/. */
+
+"use strict";
+
+const { createFactory, 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 KeyframeMarkerList = createFactory(require("./KeyframeMarkerList"));
+const KeyframesGraphPath = createFactory(require("./KeyframesGraphPath"));
+
+class KeyframesGraph extends PureComponent {
+  static get propTypes() {
+    return {
+      getComputedStyle: PropTypes.func.isRequired,
+      property: PropTypes.string.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      type: PropTypes.string.isRequired,
+      values: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      getComputedStyle,
+      property,
+      simulateAnimation,
+      type,
+      values,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: `keyframes-graph ${ property }`
+      },
+      KeyframesGraphPath(
+        {
+          getComputedStyle,
+          property,
+          simulateAnimation,
+          type,
+          values,
+        }
+      ),
+      KeyframeMarkerList({ values })
+    );
+  }
+}
+
+module.exports = KeyframesGraph;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraphPath.js
@@ -0,0 +1,110 @@
+/* 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/. */
+
+"use strict";
+
+const { createFactory, 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 ReactDOM = require("devtools/client/shared/vendor/react-dom");
+
+const ColorPath = createFactory(require("./ColorPath"));
+const DiscretePath = createFactory(require("./DiscretePath"));
+const DistancePath = createFactory(require("./DistancePath"));
+
+const {
+  DEFAULT_EASING_HINT_STROKE_WIDTH,
+  DEFAULT_GRAPH_HEIGHT,
+  DEFAULT_KEYFRAMES_GRAPH_DURATION,
+} = require("../../utils/graph-helper");
+
+class KeyframesGraphPath extends PureComponent {
+  static get propTypes() {
+    return {
+      getComputedStyle: PropTypes.func.isRequired,
+      property: PropTypes.string.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      type: PropTypes.string.isRequired,
+      values: PropTypes.array.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      componentHeight: 0,
+      componentWidth: 0,
+    };
+  }
+
+  componentDidMount() {
+    this.updateState();
+  }
+
+  getPathComponent(type) {
+    switch (type) {
+      case "color" :
+        return ColorPath;
+      case "discrete" :
+        return DiscretePath;
+      default :
+        return DistancePath;
+    }
+  }
+
+  updateState() {
+    const thisEl = ReactDOM.findDOMNode(this);
+    this.setState({
+      componentHeight: thisEl.parentNode.clientHeight,
+      componentWidth: thisEl.parentNode.clientWidth,
+    });
+  }
+
+  render() {
+    const {
+      getComputedStyle,
+      property,
+      simulateAnimation,
+      type,
+      values,
+    } = this.props;
+    const {
+      componentHeight,
+      componentWidth,
+    } = this.state;
+
+    if (!componentWidth) {
+      return dom.svg();
+    }
+
+    const pathComponent = this.getPathComponent(type);
+    const strokeWidthInViewBox =
+      DEFAULT_EASING_HINT_STROKE_WIDTH / 2 / componentHeight * DEFAULT_GRAPH_HEIGHT;
+
+    return dom.svg(
+      {
+        className: "keyframes-graph-path",
+        preserveAspectRatio: "none",
+        viewBox: `0 -${ DEFAULT_GRAPH_HEIGHT + strokeWidthInViewBox } ` +
+                 `${ DEFAULT_KEYFRAMES_GRAPH_DURATION } ` +
+                 `${ DEFAULT_GRAPH_HEIGHT + strokeWidthInViewBox * 2 }`,
+      },
+      pathComponent(
+        {
+          componentWidth,
+          easingHintStrokeWidth: DEFAULT_EASING_HINT_STROKE_WIDTH,
+          getComputedStyle,
+          graphHeight: DEFAULT_GRAPH_HEIGHT,
+          property,
+          simulateAnimation,
+          totalDuration: DEFAULT_KEYFRAMES_GRAPH_DURATION,
+          values,
+        }
+      )
+    );
+  }
+}
+
+module.exports = KeyframesGraphPath;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/moz.build
@@ -0,0 +1,14 @@
+# 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/.
+
+DevToolsModules(
+    'ColorPath.js',
+    'ComputedStylePath.js',
+    'DiscretePath.js',
+    'DistancePath.js',
+    'KeyframeMarkerItem.js',
+    'KeyframeMarkerList.js',
+    'KeyframesGraph.js',
+    'KeyframesGraphPath.js',
+)

--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -1,21 +1,23 @@
 # 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/.
 
 DIRS += [
-    'graph'
+    'graph',
+    'keyframes-graph'
 ]
 
 DevToolsModules(
     'AnimatedPropertyItem.js',
     'AnimatedPropertyList.js',
     'AnimatedPropertyListContainer.js',
     'AnimatedPropertyListHeader.js',
+    'AnimatedPropertyName.js',
     'AnimationDetailContainer.js',
     'AnimationDetailHeader.js',
     'AnimationItem.js',
     'AnimationList.js',
     'AnimationListContainer.js',
     'AnimationListHeader.js',
     'AnimationTarget.js',
     'AnimationTimelineTickItem.js',

--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -1,30 +1,36 @@
 [DEFAULT]
 tags = devtools
 subsuite = devtools
 support-files =
+  doc_multi_easings.html
+  doc_multi_keyframes.html
   doc_multi_timings.html
   doc_simple_animation.html
   head.js
   !/devtools/client/framework/test/shared-head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/test-actor-registry.js
   !/devtools/client/shared/test/test-actor.js
 
 [browser_animation_animated-property-list.js]
+[browser_animation_animated-property-name.js]
 [browser_animation_animation-detail_close-button.js]
 [browser_animation_animation-detail_title.js]
 [browser_animation_animation-detail_visibility.js]
 [browser_animation_animation-list.js]
 [browser_animation_animation-target.js]
 [browser_animation_animation-timeline-tick.js]
 [browser_animation_empty_on_invalid_nodes.js]
 [browser_animation_inspector_exists.js]
+[browser_animation_keyframes-graph_computed-value-path.js]
+[browser_animation_keyframes-graph_computed-value-path_easing-hint.js]
+[browser_animation_keyframes-graph_keyframe-marker.js]
 [browser_animation_summary-graph_animation-name.js]
 [browser_animation_summary-graph_compositor.js]
 [browser_animation_summary-graph_computed-timing-path.js]
 [browser_animation_summary-graph_delay-sign.js]
 [browser_animation_summary-graph_end-delay-sign.js]
 [browser_animation_summary-graph_effect-timing-path.js]
 [browser_animation_summary-graph_negative-delay-path.js]
 [browser_animation_summary-graph_negative-end-delay-path.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the following animated property name component features:
+// * name of property
+// * display compositor sign when the property was running on compositor.
+// * display warning when the property is runnable on compositor but was not.
+
+const TEST_DATA = [
+  {
+    property: "opacity",
+    isOnCompositor: true,
+  },
+  {
+    property: "transform",
+    isWarning: true,
+  },
+  {
+    property: "width",
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  const { inspector, panel } = await openAnimationInspector();
+
+  info("Checking animated property name component");
+  await selectNodeAndWaitForAnimations(".compositor-notall", inspector);
+
+  const animatedPropertyNameEls = panel.querySelectorAll(".animated-property-name");
+  is(animatedPropertyNameEls.length, TEST_DATA.length,
+    `Number of animated property name elements should be ${ TEST_DATA.length }`);
+
+  for (const [index, animatedPropertyNameEl] of animatedPropertyNameEls.entries()) {
+    const testData = TEST_DATA[index];
+
+    info(`Checking text content for ${ testData.property }`);
+
+    const spanEl = animatedPropertyNameEl.querySelector("span");
+    ok(spanEl,
+      `<span> element should be in animated-property-name of ${ testData.property }`);
+    is(spanEl.textContent, testData.property,
+      `textContent should be ${ testData.property }`);
+
+    info(`Checking compositor sign for ${ testData.property }`);
+
+    if (testData.isOnCompositor) {
+      ok(animatedPropertyNameEl.classList.contains("compositor"),
+        "animatedPropertyNameEl should has .compositor class");
+      isnot(getComputedStyle(spanEl, "::before").width, "auto",
+        "width of ::before pseud should not be auto");
+    } else {
+      ok(!animatedPropertyNameEl.classList.contains("compositor"),
+        "animatedPropertyNameEl should not have .compositor class");
+      is(getComputedStyle(spanEl, "::before").width, "auto",
+        "width of ::before pseud should be auto");
+    }
+
+    info(`Checking warning for ${ testData.property }`);
+
+    if (testData.isWarning) {
+      ok(animatedPropertyNameEl.classList.contains("warning"),
+        "animatedPropertyNameEl should has .warning class");
+      is(getComputedStyle(spanEl).textDecorationStyle, "dotted",
+        "text-decoration-style of spanEl should be 'dotted'");
+      is(getComputedStyle(spanEl).textDecorationLine, "underline",
+        "text-decoration-line of spanEl should be 'underline'");
+    } else {
+      ok(!animatedPropertyNameEl.classList.contains("warning"),
+        "animatedPropertyNameEl should not have .warning class");
+      is(getComputedStyle(spanEl).textDecorationStyle, "solid",
+        "text-decoration-style of spanEl should be 'solid'");
+      is(getComputedStyle(spanEl).textDecorationLine, "none",
+        "text-decoration-line of spanEl should be 'none'");
+    }
+  }
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
@@ -0,0 +1,461 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following ComputedValuePath component:
+// * element existence
+// * path segments
+// * fill color by animation type
+// * stop color if the animation type is color
+
+const TEST_DATA = [
+  {
+    targetName: "multi-types",
+    properties: [
+      {
+        name: "background-color",
+        computedValuePathClass: "color-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 0, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+        expectedStopColors: [
+          { offset: 0, color: "rgb(255, 0, 0)" },
+          { offset: 1, color: "rgb(0, 255, 0)" },
+        ]
+      },
+      {
+        name: "background-repeat",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "font-size",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "margin-left",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "text-align",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "transform",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "multi-types-reverse",
+    properties: [
+      {
+        name: "background-color",
+        computedValuePathClass: "color-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 0, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+        expectedStopColors: [
+          { offset: 0, color: "rgb(0, 255, 0)" },
+          { offset: 1, color: "rgb(255, 0, 0)" },
+        ]
+      },
+      {
+        name: "background-repeat",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "font-size",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 100 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "margin-left",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 100 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 100 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "text-align",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "transform",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 100 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "middle-keyframe",
+    properties: [
+      {
+        name: "background-color",
+        computedValuePathClass: "color-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 0, y: 100 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+        expectedStopColors: [
+          { offset: 0, color: "rgb(255, 0, 0)" },
+          { offset: 0.5, color: "rgb(0, 0, 255)" },
+          { offset: 1, color: "rgb(0, 255, 0)" },
+        ]
+      },
+      {
+        name: "background-repeat",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 249.999, y: 0 },
+          { x: 250, y: 100 },
+          { x: 749.999, y: 100 },
+          { x: 750, y: 0 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "font-size",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 250, y: 50 },
+          { x: 500, y: 100 },
+          { x: 750, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "margin-left",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 250, y: 50 },
+          { x: 500, y: 100 },
+          { x: 750, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 250, y: 50 },
+          { x: 500, y: 100 },
+          { x: 750, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "text-align",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 249.999, y: 0 },
+          { x: 250, y: 100 },
+          { x: 749.999, y: 100 },
+          { x: 750, y: 0 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "transform",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 250, y: 50 },
+          { x: 500, y: 100 },
+          { x: 750, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "steps-keyframe",
+    properties: [
+      {
+        name: "background-color",
+        computedValuePathClass: "color-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 0, y: 100 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+        expectedStopColors: [
+          { offset: 0, color: "rgb(255, 0, 0)" },
+          { offset: 0.499, color: "rgb(255, 0, 0)" },
+          { offset: 0.5, color: "rgb(128, 128, 0)" },
+          { offset: 0.999, color: "rgb(128, 128, 0)" },
+          { offset: 1, color: "rgb(0, 255, 0)" },
+        ]
+      },
+      {
+        name: "background-repeat",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "font-size",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "margin-left",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 50 },
+          { x: 999.999, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 50 },
+          { x: 999.999, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "text-align",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "transform",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "steps-effect",
+    properties: [
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 250, y: 25 },
+          { x: 500, y: 50 },
+          { x: 750, y: 75 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "frames-keyframe",
+    properties: [
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 199, y: 0 },
+          { x: 200, y: 25 },
+          { x: 399, y: 25 },
+          { x: 400, y: 50 },
+          { x: 599, y: 50 },
+          { x: 600, y: 75 },
+          { x: 799, y: 75 },
+          { x: 800, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "narrow-offsets",
+    properties: [
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 100, y: 100 },
+          { x: 110, y: 100 },
+          { x: 114.9, y: 100 },
+          { x: 115, y: 50 },
+          { x: 129.9, y: 50 },
+          { x: 130, y: 0 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "duplicate-offsets",
+    properties: [
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 100 },
+          { x: 250, y: 100 },
+          { x: 499, y: 100 },
+          { x: 500, y: 100 },
+          { x: 500, y: 0 },
+          { x: 750, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_keyframes.html");
+
+  const { inspector, panel } = await openAnimationInspector();
+
+  for (const { properties, targetName } of TEST_DATA) {
+    info(`Checking keyframes graph for ${ targetName }`);
+    await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector);
+
+    for (const property of properties) {
+      const {
+        name,
+        computedValuePathClass,
+        expectedPathSegments,
+        expectedStopColors,
+      } = property;
+
+      const testTarget = `${ name } in ${ targetName }`;
+      info(`Checking keyframes graph for ${ testTarget }`);
+      info(`Checking keyframes graph path existence for ${ testTarget }`);
+      const keyframesGraphPathEl = panel.querySelector(`.${ name }`);
+      ok(keyframesGraphPathEl,
+        `The keyframes graph path element of ${ testTarget } should be existence`);
+
+      info(`Checking computed value path existence for ${ testTarget }`);
+      const computedValuePathEl =
+        keyframesGraphPathEl.querySelector(`.${ computedValuePathClass }`);
+      ok(computedValuePathEl,
+        `The computed value path element of ${ testTarget } should be existence`);
+
+      info(`Checking path segments for ${ testTarget }`);
+      const pathEl = computedValuePathEl.querySelector("path");
+      ok(pathEl, `The <path> element of ${ testTarget } should be existence`);
+      assertPathSegments(pathEl, true, expectedPathSegments);
+
+      if (!expectedStopColors) {
+        continue;
+      }
+
+      info(`Checking linearGradient for ${ testTarget }`);
+      const linearGradientEl = computedValuePathEl.querySelector("linearGradient");
+      ok(linearGradientEl,
+        `The <linearGradientEl> element of ${ testTarget } should be existence`);
+
+      for (const expectedStopColor of expectedStopColors) {
+        const { offset, color } = expectedStopColor;
+        assertLinearGradient(linearGradientEl, offset, color);
+      }
+    }
+  }
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
@@ -0,0 +1,275 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following easing hint in ComputedValuePath.
+// * element existence
+// * path segments
+// * hint text
+
+const TEST_DATA = [
+  {
+    targetName: "no-easing",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "linear",
+            path: [
+              { x: 0, y: 100 },
+              { x: 500, y: 50 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "effect-easing",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "linear",
+            path: [
+              { x: 0, y: 100 },
+              { x: 500, y: 50 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "keyframe-easing",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "steps(2)",
+            path: [
+              { x: 0, y: 100 },
+              { x: 499, y: 100 },
+              { x: 500, y: 50 },
+              { x: 999, y: 50 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "both-easing",
+    properties: [
+      {
+        name: "margin-left",
+        expectedHints: [
+          {
+            hint: "steps(1)",
+            path: [
+              { x: 0, y: 0 },
+              { x: 999, y: 0 },
+              { x: 1000, y: 100 },
+            ],
+          },
+        ],
+      },
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "steps(2)",
+            path: [
+              { x: 0, y: 100 },
+              { x: 499, y: 100 },
+              { x: 500, y: 50 },
+              { x: 999, y: 50 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "narrow-keyframes",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "linear",
+            path: [
+              { x: 0, y: 0 },
+              { x: 100, y: 100 },
+            ],
+          },
+          {
+            hint: "steps(1)",
+            path: [
+              { x: 129, y: 100 },
+              { x: 130, y: 0 },
+            ],
+          },
+          {
+            hint: "linear",
+            path: [
+              { x: 130, y: 0 },
+              { x: 1000, y: 100 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "duplicate-keyframes",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "linear",
+            path: [
+              { x: 0, y: 0 },
+              { x: 500, y: 100 },
+            ],
+          },
+          {
+            hint: "",
+            path: [
+              { x: 500, y: 100 },
+              { x: 500, y: 0 },
+            ],
+          },
+          {
+            hint: "steps(1)",
+            path: [
+              { x: 500, y: 0 },
+              { x: 999, y: 0 },
+              { x: 1000, y: 100 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "color-keyframes",
+    properties: [
+      {
+        name: "color",
+        expectedHints: [
+          {
+            hint: "ease-in",
+            rect: {
+              x: 0,
+              height: 100,
+              width: 400,
+            },
+          },
+          {
+            hint: "ease-out",
+            rect: {
+              x: 400,
+              height: 100,
+              width: 600,
+            },
+          },
+        ],
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_easings.html");
+
+  const { inspector, panel } = await openAnimationInspector();
+
+  for (const { properties, targetName } of TEST_DATA) {
+    info(`Checking keyframes graph for ${ targetName }`);
+    await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector);
+
+    for (const property of properties) {
+      const {
+        name,
+        expectedHints,
+      } = property;
+
+      const testTarget = `${ name } in ${ targetName }`;
+      info(`Checking easing hint for ${ testTarget }`);
+      info(`Checking easing hint existence for ${ testTarget }`);
+      const hintEls = panel.querySelectorAll(`.${ name } .hint`);
+      is(hintEls.length, expectedHints.length,
+        `Count of easing hint elements of ${ testTarget } `
+        + `should be ${ expectedHints.length }`);
+
+      for (let i = 0; i < expectedHints.length; i++) {
+        const hintTarget = `hint[${ i }] of ${ testTarget }`;
+
+        info(`Checking ${ hintTarget }`);
+        const hintEl = hintEls[i];
+        const expectedHint = expectedHints[i];
+
+        info(`Checking <title> in ${ hintTarget }`);
+        const titleEl = hintEl.querySelector("title");
+        ok(titleEl,
+          `<title> element in ${ hintTarget } should be existence`);
+        is(titleEl.textContent, expectedHint.hint,
+          `Content of <title> in ${ hintTarget } should be ${ expectedHint.hint }`);
+
+        let interactionEl = null;
+        if (expectedHint.path) {
+          info(`Checking <path> in ${ hintTarget }`);
+          interactionEl = hintEl.querySelector("path");
+          ok(interactionEl, `The <path> element  in ${ hintTarget } should be existence`);
+          assertPathSegments(interactionEl, false, expectedHint.path);
+        } else {
+          info(`Checking <rect> in ${ hintTarget }`);
+          interactionEl = hintEl.querySelector("rect");
+          ok(interactionEl, `The <rect> element  in ${ hintTarget } should be existence`);
+          is(interactionEl.getAttribute("x"), expectedHint.rect.x,
+            `x of <rect> in ${ hintTarget } should be ${ expectedHint.rect.x }`);
+          is(interactionEl.getAttribute("width"), expectedHint.rect.width,
+            `width of <rect> in ${ hintTarget } should be ${ expectedHint.rect.width }`);
+        }
+
+        info(`Checking interaction for ${ hintTarget }`);
+        interactionEl.scrollIntoView(false);
+        const win = hintEl.ownerGlobal;
+        // Mouse out once from pathEl.
+        EventUtils.synthesizeMouse(interactionEl, -1, -1, { type: "mouseout" }, win);
+        is(win.getComputedStyle(interactionEl).strokeOpacity, 0,
+          `stroke-opacity of hintEl for ${ hintTarget } should be 0`
+          + " while mouse is out from the element");
+        // Mouse over the pathEl.
+        ok(isStrokeChangedByMouseOver(interactionEl, win),
+          `stroke-opacity of hintEl for ${ hintTarget } should be 1`
+          + " while mouse is over the element");
+      }
+    }
+  }
+});
+
+function isStrokeChangedByMouseOver(pathEl, win) {
+  const boundingBox = pathEl.getBoundingClientRect();
+  const x = boundingBox.width / 2;
+
+  for (let y = 0; y < boundingBox.height; y++) {
+    EventUtils.synthesizeMouse(pathEl, x, y, { type: "mouseover" }, win);
+
+    if (win.getComputedStyle(pathEl).strokeOpacity == 1) {
+      return true;
+    }
+  }
+
+  return false;
+}

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
@@ -0,0 +1,176 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following keyframe marker.
+// * element existence
+// * title
+// * and left style
+
+const TEST_DATA = [
+  {
+    targetName: "multi-types",
+    properties: [
+      {
+        name: "background-color",
+        expectedValues: [
+          {
+            title: "rgb(255, 0, 0)",
+            left: "0%",
+          },
+          {
+            title: "rgb(0, 255, 0)",
+            left: "100%",
+          }
+        ],
+      },
+      {
+        name: "background-repeat",
+        expectedValues: [
+          {
+            title: "space round",
+            left: "0%",
+          },
+          {
+            title: "round space",
+            left: "100%",
+          }
+        ],
+      },
+      {
+        name: "font-size",
+        expectedValues: [
+          {
+            title: "10px",
+            left: "0%",
+          },
+          {
+            title: "20px",
+            left: "100%",
+          }
+        ],
+      },
+      {
+        name: "margin-left",
+        expectedValues: [
+          {
+            title: "0px",
+            left: "0%",
+          },
+          {
+            title: "100px",
+            left: "100%",
+          }
+        ],
+      },
+      {
+        name: "opacity",
+        expectedValues: [
+          {
+            title: "0",
+            left: "0%",
+          },
+          {
+            title: "1",
+            left: "100%",
+          }
+        ],
+      },
+      {
+        name: "text-align",
+        expectedValues: [
+          {
+            title: "right",
+            left: "0%",
+          },
+          {
+            title: "center",
+            left: "100%",
+          }
+        ],
+      },
+      {
+        name: "transform",
+        expectedValues: [
+          {
+            title: "translate(0px)",
+            left: "0%",
+          },
+          {
+            title: "translate(100px)",
+            left: "100%",
+          }
+        ],
+      },
+    ],
+  },
+  {
+    targetName: "narrow-offsets",
+    properties: [
+      {
+        name: "opacity",
+        expectedValues: [
+          {
+            title: "0",
+            left: "0%",
+          },
+          {
+            title: "1",
+            left: "10%",
+          },
+          {
+            title: "0",
+            left: "13%",
+          },
+          {
+            title: "1",
+            left: "100%",
+          },
+        ],
+      },
+    ],
+  }
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_keyframes.html");
+
+  const { inspector, panel } = await openAnimationInspector();
+
+  for (const { properties, targetName } of TEST_DATA) {
+    info(`Checking keyframe marker for ${ targetName }`);
+    await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector);
+
+    for (const property of properties) {
+      const {
+        name,
+        expectedValues,
+      } = property;
+
+      const testTarget = `${ name } in ${ targetName }`;
+      info(`Checking keyframe marker for ${ testTarget }`);
+      info(`Checking keyframe marker existence for ${ testTarget }`);
+      const markerEls = panel.querySelectorAll(`.${ name } .keyframe-marker-item`);
+      is(markerEls.length, expectedValues.length,
+        `Count of keyframe marker elements of ${ testTarget } `
+        + `should be ${ expectedValues.length }`);
+
+      for (let i = 0; i < expectedValues.length; i++) {
+        const hintTarget = `.keyframe-marker-item[${ i }] of ${ testTarget }`;
+
+        info(`Checking ${ hintTarget }`);
+        const markerEl = markerEls[i];
+        const expectedValue = expectedValues[i];
+
+        info(`Checking title in ${ hintTarget }`);
+        is(markerEl.getAttribute("title"), expectedValue.title,
+          `title in ${ hintTarget } should be ${ expectedValue.title }`);
+
+        info(`Checking left style in ${ hintTarget }`);
+        is(markerEl.style.left, expectedValue.left,
+          `left in ${ hintTarget } should be ${ expectedValue.left }`);
+      }
+    }
+  }
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_multi_easings.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 50px;
+    }
+    </style>
+  </head>
+  <body>
+    <script>
+    "use strict";
+
+    function createAnimation(name, keyframes, effectEasing) {
+      const div = document.createElement("div");
+      div.id = name;
+      document.body.appendChild(div);
+
+      const effect = {
+        duration: 100000,
+        fill: "forwards"
+      };
+
+      if (effectEasing) {
+        effect.easing = effectEasing;
+      }
+
+      div.animate(keyframes, effect);
+    }
+
+    createAnimation(
+      "no-easing",
+      [
+        { opacity: 1 },
+        { opacity: 0 },
+      ]
+    );
+
+    createAnimation(
+      "effect-easing",
+      [
+        { opacity: 1 },
+        { opacity: 0 },
+      ],
+      "frames(5)"
+    );
+
+    createAnimation(
+      "keyframe-easing",
+      [
+        { opacity: 1, easing: "steps(2)", },
+        { opacity: 0 },
+      ]
+    );
+
+    createAnimation(
+      "both-easing",
+      [
+        { offset: 0, opacity: 1, easing: "steps(2)", },
+        { offset: 0, marginLeft: "0px", easing: "steps(1)", },
+        { marginLeft: "100px", opacity: 0 },
+      ],
+      "steps(10)"
+    );
+
+    createAnimation(
+      "narrow-keyframes",
+      [
+        { opacity: 0, },
+        { offset: 0.1, opacity: 1, easing: "steps(1)", },
+        { offset: 0.13, opacity: 0, },
+      ]
+    );
+
+    createAnimation(
+      "duplicate-keyframes",
+      [
+        { opacity: 0 },
+        { offset: 0.5, opacity: 1, },
+        { offset: 0.5, opacity: 0, easing: "steps(1)", },
+        { opacity: 1, },
+      ]
+    );
+
+    createAnimation(
+      "color-keyframes",
+      [
+        { color: "red", easing: "ease-in", },
+        { offset: 0.4, color: "blue", easing: "ease-out", },
+        { color: "lime", },
+      ]
+    );
+    </script>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_multi_keyframes.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      width: 50px;
+      height: 50px;
+    }
+    </style>
+  </head>
+  <body>
+    <script>
+    "use strict";
+
+    function createAnimation(name, keyframes, effectEasing) {
+      const div = document.createElement("div");
+      div.id = name;
+      document.body.appendChild(div);
+
+      const effect = {
+        duration: 100000,
+        fill: "forwards"
+      };
+
+      if (effectEasing) {
+        effect.easing = effectEasing;
+      }
+
+      div.animate(keyframes, effect);
+    }
+
+    createAnimation(
+      "multi-types",
+      [
+        {
+          backgroundColor: "red",
+          backgroundRepeat: "space round",
+          fontSize: "10px",
+          marginLeft: "0px",
+          opacity: 0,
+          textAlign: "right",
+          transform: "translate(0px)"
+        },
+        {
+          backgroundColor: "lime",
+          backgroundRepeat: "round space",
+          fontSize: "20px",
+          marginLeft: "100px",
+          opacity: 1,
+          textAlign: "center",
+          transform: "translate(100px)"
+        },
+      ]
+    );
+
+    createAnimation(
+      "multi-types-reverse",
+      [
+        {
+          backgroundColor: "lime",
+          backgroundRepeat: "space",
+          fontSize: "20px",
+          marginLeft: "100px",
+          opacity: 1,
+          textAlign: "center",
+          transform: "translate(100px)"
+        },
+        {
+          backgroundColor: "red",
+          backgroundRepeat: "round",
+          fontSize: "10px",
+          marginLeft: "0px",
+          opacity: 0,
+          textAlign: "right",
+          transform: "translate(0px)"
+        },
+      ]
+    );
+
+    createAnimation(
+      "middle-keyframe",
+      [
+        {
+          backgroundColor: "red",
+          backgroundRepeat: "space",
+          fontSize: "10px",
+          marginLeft: "0px",
+          opacity: 0,
+          textAlign: "right",
+          transform: "translate(0px)"
+        },
+        {
+          backgroundColor: "blue",
+          backgroundRepeat: "round",
+          fontSize: "20px",
+          marginLeft: "100px",
+          opacity: 1,
+          textAlign: "center",
+          transform: "translate(100px)"
+        },
+        {
+          backgroundColor: "lime",
+          backgroundRepeat: "space",
+          fontSize: "10px",
+          marginLeft: "0px",
+          opacity: 0,
+          textAlign: "right",
+          transform: "translate(0px)"
+        },
+      ]
+    );
+
+    createAnimation(
+      "steps-keyframe",
+      [
+        {
+          backgroundColor: "red",
+          backgroundRepeat: "space",
+          fontSize: "10px",
+          marginLeft: "0px",
+          opacity: 0,
+          textAlign: "right",
+          transform: "translate(0px)",
+          easing: "steps(2)"
+        },
+        {
+          backgroundColor: "lime",
+          backgroundRepeat: "round",
+          fontSize: "20px",
+          marginLeft: "100px",
+          opacity: 1,
+          textAlign: "center",
+          transform: "translate(100px)"
+        },
+      ]
+    );
+
+    createAnimation(
+      "steps-effect",
+      [
+        {
+          opacity: 0
+        },
+        {
+          opacity: 1
+        },
+      ],
+      "steps(2)"
+    );
+
+    createAnimation(
+      "frames-keyframe",
+      [
+        {
+          easing: "frames(5)",
+          opacity: 0,
+        },
+        {
+          opacity: 1
+        },
+      ]
+    );
+
+    createAnimation(
+      "narrow-offsets",
+      [
+        {
+          opacity: 0,
+        },
+        {
+          opacity: 1,
+          easing: "steps(2)",
+          offset: 0.1,
+        },
+        {
+          opacity: 0,
+          offset: 0.13,
+        },
+      ]
+    );
+
+    createAnimation(
+      "duplicate-offsets",
+      [
+        {
+          opacity: 1,
+        },
+        {
+          opacity: 1,
+          offset: 0.5,
+        },
+        {
+          opacity: 0,
+          offset: 0.5,
+        },
+        {
+          opacity: 1,
+          offset: 1,
+        },
+      ]
+    );
+    </script>
+  </body>
+</html>

--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -204,16 +204,34 @@ const waitForAllAnimationTargets = async
  */
 const waitForAllSummaryGraph = async function (animationInspector) {
   for (let i = 0; i < animationInspector.animations.length; i++) {
     await animationInspector.once("animation-summary-graph-rendered");
   }
 };
 
 /**
+ * Check the <stop> element in the given linearGradientEl for the correct offset
+ * and color attributes.
+ *
+ * @param {Element} linearGradientEl
+          <linearGradient> element which has <stop> element.
+ * @param {Number} offset
+ *        float which represents the "offset" attribute of <stop>.
+ * @param {String} expectedColor
+ *        e.g. rgb(0, 0, 255)
+ */
+function assertLinearGradient(linearGradientEl, offset, expectedColor) {
+  const stopEl = findStopElement(linearGradientEl, offset);
+  ok(stopEl, `stop element at offset ${ offset } should exist`);
+  is(stopEl.getAttribute("stop-color"), expectedColor,
+    `stop-color of stop element at offset ${ offset } should be ${ expectedColor }`);
+}
+
+/**
  * SummaryGraph is constructed by <path> element.
  * This function checks the vertex of path segments.
  *
  * @param {Element} pathEl
  *        <path> element.
  * @param {boolean} hasClosePath
  *        Set true if the path shoud be closing.
  * @param {Object} expectedValues
@@ -289,8 +307,28 @@ function findAnimationItemElementsByTarg
 
     if (className === targetClassName) {
       return animationTargetEl.closest(".animation-item");
     }
   }
 
   return null;
 }
+
+/**
+ * Find the <stop> element which has the given offset in the given linearGradientEl.
+ *
+ * @param {Element} linearGradientEl
+ *        <linearGradient> element which has <stop> element.
+ * @param {Number} offset
+ *        Float which represents the "offset" attribute of <stop>.
+ * @return {Element}
+ *         If can't find suitable element, returns null.
+ */
+function findStopElement(linearGradientEl, offset) {
+  for (const stopEl of linearGradientEl.querySelectorAll("stop")) {
+    if (offset <= parseFloat(stopEl.getAttribute("offset"))) {
+      return stopEl;
+    }
+  }
+
+  return null;
+}