--- a/addon-sdk/source/test/fixtures/native-addon-test/index.js
+++ b/addon-sdk/source/test/fixtures/native-addon-test/index.js
@@ -16,17 +16,22 @@ exports.customMainModule = require('test
 exports.customMainModuleRelative = require('test-custom-main-relative');
 exports.defaultMain = require('test-default-main');
 exports.testJSON = require('./dir/c');
 exports.dummyModule = require('./dir/dummy');
 
 exports.eventCore = require('sdk/event/core');
 exports.promise = require('sdk/core/promise');
 
-exports.localJSM  = require('./dir/test.jsm');
+if (module.uri.startsWith("file:"))
+  // We can't load the same file multiple times with different URLs, so
+  // skip this one.
+  exports.localJSM = { test: "this is a jsm" };
+else
+  exports.localJSM = require('./dir/test.jsm');
 exports.promisejsm = require('modules/Promise.jsm').Promise;
 exports.require = require;
 
 var math = require('test-math');
 exports.areModulesCached = (math === exports.math);
 
 // Added noise to test AST walker
 function square (x) {

--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1100,30 +1100,32 @@ pref("security.sandbox.content.level", 1
 #endif
 #endif
 
 #if defined(XP_LINUX) && defined(MOZ_SANDBOX) && defined(MOZ_CONTENT_SANDBOX)
 // This pref is introduced as part of bug 742434, the naming is inspired from
 // its Windows/Mac counterpart, but on Linux it's an integer which means:
 // 0 -> "no sandbox"
 // 1 -> "content sandbox using seccomp-bpf when available"
-// 2 -> "seccomp-bpf + file broker"
+// 2 -> "seccomp-bpf + write file broker"
+// 3 -> "seccomp-bpf + read/write file brokering"
 // Content sandboxing on Linux is currently in the stage of
 // 'just getting it enabled', which includes a very permissive whitelist. We
 // enable seccomp-bpf on nightly to see if everything is running, or if we need
 // to whitelist more system calls.
 //
 // So the purpose of this setting is to allow nightly users to disable the
 // sandbox while we fix their problems. This way, they won't have to wait for
 // another nightly release which disables seccomp-bpf again.
 //
 // This setting may not be required anymore once we decide to permanently
 // enable the content sandbox.
-pref("security.sandbox.content.level", 2);
+pref("security.sandbox.content.level", 3);
 pref("security.sandbox.content.write_path_whitelist", "");
+pref("security.sandbox.content.read_path_whitelist", "");
 pref("security.sandbox.content.syscall_whitelist", "");
 #endif
 
 #if defined(XP_MACOSX) || defined(XP_WIN)
 #if defined(MOZ_SANDBOX) && defined(MOZ_CONTENT_SANDBOX)
 // ID (a UUID when set by gecko) that is used to form the name of a
 // sandbox-writable temporary directory to be used by content processes
 // when a temporary writable file is required in a level 1 sandbox.

--- a/browser/base/content/test/plugins/browser.ini
+++ b/browser/base/content/test/plugins/browser.ini
@@ -17,17 +17,16 @@ support-files =
   plugin_both2.html
   plugin_bug744745.html
   plugin_bug749455.html
   plugin_bug787619.html
   plugin_bug797677.html
   plugin_bug820497.html
   plugin_clickToPlayAllow.html
   plugin_clickToPlayDeny.html
-  plugin_data_url.html
   plugin_favorfallback.html
   plugin_hidden_to_visible.html
   plugin_iframe.html
   plugin_outsideScrollArea.html
   plugin_overlayed.html
   plugin_positioned.html
   plugin_simple_blank.swf
   plugin_small.html
@@ -53,18 +52,16 @@ tags = blocklist
 [browser_clearplugindata.js]
 tags = blocklist
 [browser_CTP_context_menu.js]
 skip-if = toolkit == "gtk2" || toolkit == "gtk3"   # fails intermittently on Linux (bug 909342)
 tags = blocklist
 [browser_CTP_crashreporting.js]
 skip-if = !crashreporter
 tags = blocklist
-[browser_CTP_data_urls.js]
-tags = blocklist
 [browser_CTP_drag_drop.js]
 tags = blocklist
 [browser_CTP_favorfallback.js]
 [browser_CTP_hide_overlay.js]
 tags = blocklist
 [browser_CTP_iframe.js]
 tags = blocklist
 [browser_CTP_multi_allow.js]

deleted file mode 100644
--- a/browser/base/content/test/plugins/browser_CTP_data_urls.js
+++ /dev/null
@@ -1,255 +0,0 @@
-var rootDir = getRootDirectory(gTestPath);
-const gTestRoot = rootDir.replace("chrome://mochitests/content/", "http://127.0.0.1:8888/");
-var gPluginHost = Components.classes["@mozilla.org/plugin/host;1"].getService(Components.interfaces.nsIPluginHost);
-var gTestBrowser = null;
-
-add_task(async function() {
-  registerCleanupFunction(function() {
-    clearAllPluginPermissions();
-    setTestPluginEnabledState(Ci.nsIPluginTag.STATE_ENABLED, "Test Plug-in");
-    setTestPluginEnabledState(Ci.nsIPluginTag.STATE_ENABLED, "Second Test Plug-in");
-    Services.prefs.clearUserPref("plugins.click_to_play");
-    Services.prefs.clearUserPref("extensions.blocklist.suppressUI");
-    gBrowser.removeCurrentTab();
-    window.focus();
-    gTestBrowser = null;
-  });
-
-  gBrowser.selectedTab =  BrowserTestUtils.addTab(gBrowser);
-  gTestBrowser = gBrowser.selectedBrowser;
-
-  Services.prefs.setBoolPref("plugins.click_to_play", true);
-  Services.prefs.setBoolPref("extensions.blocklist.suppressUI", true);
-
-  setTestPluginEnabledState(Ci.nsIPluginTag.STATE_CLICKTOPLAY, "Test Plug-in");
-  setTestPluginEnabledState(Ci.nsIPluginTag.STATE_CLICKTOPLAY, "Second Test Plug-in");
-});
-
-// Test that the click-to-play doorhanger still works when navigating to data URLs
-add_task(async function() {
-  await promiseTabLoadEvent(gBrowser.selectedTab, gTestRoot + "plugin_data_url.html");
-
-  // Work around for delayed PluginBindingAttached
-  await promiseUpdatePluginBindings(gTestBrowser);
-
-  let popupNotification = PopupNotifications.getNotification("click-to-play-plugins", gTestBrowser);
-  ok(popupNotification, "Test 1a, Should have a click-to-play notification");
-
-  let pluginInfo = await promiseForPluginInfo("test");
-  ok(!pluginInfo.activated, "Test 1a, plugin should not be activated");
-
-  let loadPromise = promiseTabLoadEvent(gBrowser.selectedTab);
-  await ContentTask.spawn(gTestBrowser, {}, async function() {
-    // navigate forward to a page with 'test' in it
-    content.document.getElementById("data-link-1").click();
-  });
-  await loadPromise;
-
-  // Work around for delayed PluginBindingAttached
-  await promiseUpdatePluginBindings(gTestBrowser);
-
-  popupNotification = PopupNotifications.getNotification("click-to-play-plugins", gTestBrowser);
-  ok(popupNotification, "Test 1b, Should have a click-to-play notification");
-
-  pluginInfo = await promiseForPluginInfo("test");
-  ok(!pluginInfo.activated, "Test 1b, plugin should not be activated");
-
-  let promise = promisePopupNotification("click-to-play-plugins");
-  await ContentTask.spawn(gTestBrowser, {}, async function() {
-    let plugin = content.document.getElementById("test");
-    let bounds = plugin.getBoundingClientRect();
-    let left = (bounds.left + bounds.right) / 2;
-    let top = (bounds.top + bounds.bottom) / 2;
-    let utils = content.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
-                       .getInterface(Components.interfaces.nsIDOMWindowUtils);
-    utils.sendMouseEvent("mousedown", left, top, 0, 1, 0, false, 0, 0);
-    utils.sendMouseEvent("mouseup", left, top, 0, 1, 0, false, 0, 0);
-  });
-  await promise;
-
-  // Simulate clicking the "Allow Always" button.
-  let condition = () => !PopupNotifications.getNotification("click-to-play-plugins", gTestBrowser).dismissed &&
-    PopupNotifications.panel.firstChild;
-  await promiseForCondition(condition);
-  PopupNotifications.panel.firstChild._primaryButton.click();
-
-  // check plugin state
-  pluginInfo = await promiseForPluginInfo("test");
-  ok(pluginInfo.activated, "Test 1b, plugin should be activated");
-});
-
-// Test that the click-to-play notification doesn't break when navigating
-// to data URLs with multiple plugins.
-add_task(async function() {
-  // We click activated above
-  clearAllPluginPermissions();
-
-  await promiseTabLoadEvent(gBrowser.selectedTab, gTestRoot + "plugin_data_url.html");
-
-  // Work around for delayed PluginBindingAttached
-  await promiseUpdatePluginBindings(gTestBrowser);
-
-  let notification = PopupNotifications.getNotification("click-to-play-plugins", gTestBrowser);
-  ok(notification, "Test 2a, Should have a click-to-play notification");
-
-  let pluginInfo = await promiseForPluginInfo("test");
-  ok(!pluginInfo.activated, "Test 2a, plugin should not be activated");
-
-  let loadPromise = promiseTabLoadEvent(gBrowser.selectedTab);
-  await ContentTask.spawn(gTestBrowser, {}, async function() {
-    // navigate forward to a page with 'test1' & 'test2' in it
-    content.document.getElementById("data-link-2").click();
-  });
-  await loadPromise;
-
-  // Work around for delayed PluginBindingAttached
-  await ContentTask.spawn(gTestBrowser, {}, async function() {
-    content.document.getElementById("test1").clientTop;
-    content.document.getElementById("test2").clientTop;
-  });
-
-  pluginInfo = await promiseForPluginInfo("test1");
-  ok(!pluginInfo.activated, "Test 2a, test1 should not be activated");
-  pluginInfo = await promiseForPluginInfo("test2");
-  ok(!pluginInfo.activated, "Test 2a, test2 should not be activated");
-
-  notification = PopupNotifications.getNotification("click-to-play-plugins", gTestBrowser);
-  ok(notification, "Test 2b, Should have a click-to-play notification");
-
-  await promiseForNotificationShown(notification);
-
-  // Simulate choosing "Allow now" for the test plugin
-  is(notification.options.pluginData.size, 2, "Test 2b, Should have two types of plugin in the notification");
-
-  let centerAction = null;
-  for (let action of notification.options.pluginData.values()) {
-    if (action.pluginName == "Test") {
-      centerAction = action;
-      break;
-    }
-  }
-  ok(centerAction, "Test 2b, found center action for the Test plugin");
-
-  let centerItem = null;
-  for (let item of PopupNotifications.panel.firstChild.childNodes) {
-    is(item.value, "block", "Test 2b, all plugins should start out blocked");
-    if (item.action == centerAction) {
-      centerItem = item;
-      break;
-    }
-  }
-  ok(centerItem, "Test 2b, found center item for the Test plugin");
-
-  // "click" the button to activate the Test plugin
-  centerItem.value = "allownow";
-  PopupNotifications.panel.firstChild._primaryButton.click();
-
-  // Work around for delayed PluginBindingAttached
-  await promiseUpdatePluginBindings(gTestBrowser);
-
-  // check plugin state
-  pluginInfo = await promiseForPluginInfo("test1");
-  ok(pluginInfo.activated, "Test 2b, plugin should be activated");
-});
-
-add_task(async function() {
-  // We click activated above
-  clearAllPluginPermissions();
-
-  await promiseTabLoadEvent(gBrowser.selectedTab, gTestRoot + "plugin_data_url.html");
-
-  // Work around for delayed PluginBindingAttached
-  await promiseUpdatePluginBindings(gTestBrowser);
-});
-
-// Test that when navigating to a data url, the plugin permission is inherited
-add_task(async function() {
-  let notification = PopupNotifications.getNotification("click-to-play-plugins", gTestBrowser);
-  ok(notification, "Test 3a, Should have a click-to-play notification");
-
-  // check plugin state
-  let pluginInfo = await promiseForPluginInfo("test");
-  ok(!pluginInfo.activated, "Test 3a, plugin should not be activated");
-
-  let promise = promisePopupNotification("click-to-play-plugins");
-  await ContentTask.spawn(gTestBrowser, {}, async function() {
-    let plugin = content.document.getElementById("test");
-    let bounds = plugin.getBoundingClientRect();
-    let left = (bounds.left + bounds.right) / 2;
-    let top = (bounds.top + bounds.bottom) / 2;
-    let utils = content.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
-                       .getInterface(Components.interfaces.nsIDOMWindowUtils);
-    utils.sendMouseEvent("mousedown", left, top, 0, 1, 0, false, 0, 0);
-    utils.sendMouseEvent("mouseup", left, top, 0, 1, 0, false, 0, 0);
-  });
-  await promise;
-
-  // Simulate clicking the "Allow Always" button.
-  let condition = () => !PopupNotifications.getNotification("click-to-play-plugins", gTestBrowser).dismissed &&
-    PopupNotifications.panel.firstChild;
-  await promiseForCondition(condition);
-  PopupNotifications.panel.firstChild._primaryButton.click();
-
-  // check plugin state
-  pluginInfo = await promiseForPluginInfo("test");
-  ok(pluginInfo.activated, "Test 3a, plugin should be activated");
-
-  let loadPromise = promiseTabLoadEvent(gBrowser.selectedTab);
-  await ContentTask.spawn(gTestBrowser, {}, async function() {
-    // navigate forward to a page with 'test' in it
-    content.document.getElementById("data-link-1").click();
-  });
-  await loadPromise;
-
-  // Work around for delayed PluginBindingAttached
-  await promiseUpdatePluginBindings(gTestBrowser);
-
-  // check plugin state
-  pluginInfo = await promiseForPluginInfo("test");
-  ok(pluginInfo.activated, "Test 3b, plugin should be activated");
-
-  clearAllPluginPermissions();
-});
-
-// Test that the click-to-play doorhanger still works
-// when directly navigating to data URLs.
-// Fails, bug XXX. Plugins plus a data url don't fire a load event.
-/*
-add_task(function* () {
-  yield promiseTabLoadEvent(gBrowser.selectedTab,
-   "data:text/html,Hi!<embed id='test' style='width:200px; height:200px' type='application/x-test'/>");
-
-  // Work around for delayed PluginBindingAttached
-  yield promiseUpdatePluginBindings(gTestBrowser);
-
-  let notification = PopupNotifications.getNotification("click-to-play-plugins", gTestBrowser);
-  ok(notification, "Test 4a, Should have a click-to-play notification");
-
-  // check plugin state
-  let pluginInfo = yield promiseForPluginInfo("test");
-  ok(!pluginInfo.activated, "Test 4a, plugin should not be activated");
-
-  let promise = promisePopupNotification("click-to-play-plugins");
-  yield ContentTask.spawn(gTestBrowser, {}, function* () {
-    let plugin = content.document.getElementById("test");
-    let bounds = plugin.getBoundingClientRect();
-    let left = (bounds.left + bounds.right) / 2;
-    let top = (bounds.top + bounds.bottom) / 2;
-    let utils = content.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
-                       .getInterface(Components.interfaces.nsIDOMWindowUtils);
-    utils.sendMouseEvent("mousedown", left, top, 0, 1, 0, false, 0, 0);
-    utils.sendMouseEvent("mouseup", left, top, 0, 1, 0, false, 0, 0);
-  });
-  yield promise;
-
-  // Simulate clicking the "Allow Always" button.
-  let condition = () => !PopupNotifications.getNotification("click-to-play-plugins", gTestBrowser).dismissed &&
-    PopupNotifications.panel.firstChild;
-  yield promiseForCondition(condition);
-  PopupNotifications.panel.firstChild._primaryButton.click();
-
-  // check plugin state
-  pluginInfo = yield promiseForPluginInfo("test");
-  ok(pluginInfo.activated, "Test 4a, plugin should be activated");
-});
-*/

deleted file mode 100644
--- a/browser/base/content/test/plugins/plugin_data_url.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<html>
-<body>
-  <a id="data-link-1" href='data:text/html,<embed id="test" style="width: 200px; height: 200px" type="application/x-test"/>'>
-    data: with one plugin
-  </a><br />
-  <a id="data-link-2" href='data:text/html,<embed id="test1" style="width: 200px; height: 200px" type="application/x-test"/><embed id="test2" style="width: 200px; height: 200px" type="application/x-second-test"/>'>
-    data: with two plugins
-  </a><br />
-  <object id="test" style="width: 200px; height: 200px" type="application/x-test"></object>
-</body>
-</html>

--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@@ -1688,23 +1688,25 @@ file, You can obtain one at http://mozil
 
       <method name="enableOneOffSearches">
         <parameter name="enable"/>
         <body><![CDATA[
           this._oneOffSearchesEnabled = enable;
           if (enable) {
             this.oneOffSearchButtons.telemetryOrigin = "urlbar";
             this.oneOffSearchButtons.style.display = "-moz-box";
+            // Set .textbox first, since the popup setter will cause
+            // a _rebuild call that uses it.
+            this.oneOffSearchButtons.textbox = this.input;
             this.oneOffSearchButtons.popup = this;
-            this.oneOffSearchButtons.textbox = this.input;
           } else {
             this.oneOffSearchButtons.telemetryOrigin = null;
             this.oneOffSearchButtons.style.display = "none";
+            this.oneOffSearchButtons.textbox = null;
             this.oneOffSearchButtons.popup = null;
-            this.oneOffSearchButtons.textbox = null;
           }
         ]]></body>
       </method>
 
       <method name="openSearchSuggestionsNotificationLearnMoreURL">
         <body><![CDATA[
         let url = Services.urlFormatter.formatURL(
           Services.prefs.getCharPref("app.support.baseURL") + "suggestions"

--- a/browser/components/search/content/search.xml
+++ b/browser/components/search/content/search.xml
@@ -97,18 +97,20 @@
         // Wait until the popupshowing event to avoid forcing immediate
         // attachment of the search-one-offs binding.
         this.textbox.popup.addEventListener("popupshowing", () => {
           let oneOffButtons = this.textbox.popup.oneOffButtons;
           // Some accessibility tests create their own <searchbar> that doesn't
           // use the popup binding below, so null-check oneOffButtons.
           if (oneOffButtons) {
             oneOffButtons.telemetryOrigin = "searchbar";
+            // Set .textbox first, since the popup setter will cause
+            // a _rebuild call that uses it.
+            oneOffButtons.textbox = this.textbox;
             oneOffButtons.popup = this.textbox.popup;
-            oneOffButtons.textbox = this.textbox;
           }
         }, {capturing: true, once: true});
       ]]></constructor>
 
       <destructor><![CDATA[
         this.destroy();
       ]]></destructor>
 

--- a/browser/themes/shared/incontentprefs-old/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs-old/preferences.inc.css
@@ -381,17 +381,17 @@ description > html|a {
  * Sync
  */
 
 #fxaProfileImage {
   max-width: 60px;
   border-radius: 50%;
   list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
   margin-inline-end: 15px;
-  image-rendering: -moz-crisp-edges;
+  image-rendering: auto;
   border: 1px solid transparent;
 }
 
 #fxaLoginStatus[hasName] #fxaProfileImage {
   max-width: 80px;
 }
 
 #fxaProfileImage.actionable {

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -401,17 +401,17 @@ groupbox {
  * Sync
  */
 
 #fxaProfileImage {
   max-width: 60px;
   border-radius: 50%;
   list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
   margin-inline-end: 15px;
-  image-rendering: -moz-crisp-edges;
+  image-rendering: auto;
   border: 1px solid transparent;
 }
 
 #fxaLoginStatus[hasName] #fxaProfileImage {
   max-width: 80px;
 }
 
 #fxaProfileImage.actionable {

--- a/devtools/client/debugger/new/debugger.css
+++ b/devtools/client/debugger/new/debugger.css
@@ -1311,17 +1311,18 @@ html[dir="rtl"] .managed-tree .tree .nod
 
 .source-footer .tab.active {
   color: var(--theme-body-color);
   background-color: var(--theme-body-background);
   border-color: var(--theme-splitter-color);
   border-top-color: transparent;
 }
 
-.source-footer .tab.active path, .source-footer .tab:hover path {
+.source-footer .tab.active path,
+.source-footer .tab:hover path {
   fill: var(--theme-body-color);
 }
 .outline-list {
   list-style-type: none;
   padding-left: 0px;
   width: 100%;
 }
 

--- a/devtools/client/debugger/new/debugger.js
+++ b/devtools/client/debugger/new/debugger.js
@@ -14037,16 +14037,20 @@ return /******/ (function(modules) { // 
 	  if (!source) {
 	    return;
 	  }
 
 	  return getSourceByURL(state, (0, _source2.getPrettySourceURL)(source.get("url")));
 	}
 
 	function getSourceByUrlInSources(sources, url) {
+	  if (!url) {
+	    return null;
+	  }
+
 	  return sources.find(source => source.get("url") === url);
 	}
 
 	function getSourceInSources(sources, id) {
 	  return sources.get(id);
 	}
 
 	var getSources = exports.getSources = (0, _reselect.createSelector)(getSourcesState, sources => sources.sources);
@@ -16715,17 +16719,17 @@ return /******/ (function(modules) { // 
 	 * @module actions/sources
 	 */
 
 	// If a request has been made to show this source, go ahead and
 	// select it.
 	function checkSelectedSource(state, dispatch, source) {
 	  var pendingLocation = (0, _selectors.getPendingSelectedLocation)(state);
 
-	  if (pendingLocation && pendingLocation.url === source.url) {
+	  if (pendingLocation && !!source.url && pendingLocation.url === source.url) {
 	    dispatch(selectSource(source.id, { line: pendingLocation.line }));
 	  }
 	}
 
 	function newSource(source) {
 	  return (() => {
 	    var _ref3 = _asyncToGenerator(function* (_ref4) {
 	      var dispatch = _ref4.dispatch,
@@ -21796,16 +21800,17 @@ return /******/ (function(modules) { // 
 	  domain: __webpack_require__(353),
 	  file: __webpack_require__(354),
 	  folder: __webpack_require__(355),
 	  globe: __webpack_require__(356),
 	  jquery: __webpack_require__(999),
 	  underscore: __webpack_require__(1117),
 	  lodash: __webpack_require__(1118),
 	  ember: __webpack_require__(1119),
+	  vuejs: __webpack_require__(1174),
 	  "magnifying-glass": __webpack_require__(357),
 	  "arrow-up": __webpack_require__(919),
 	  "arrow-down": __webpack_require__(920),
 	  pause: __webpack_require__(358),
 	  "pause-exceptions": __webpack_require__(359),
 	  plus: __webpack_require__(360),
 	  prettyPrint: __webpack_require__(361),
 	  react: __webpack_require__(1000),
@@ -24112,16 +24117,17 @@ return /******/ (function(modules) { // 
 	var CallSites = (0, _react.createFactory)(_CallSites3.default);
 
 	var cssVars = {
 	  searchbarHeight: "var(--editor-searchbar-height)",
 	  secondSearchbarHeight: "var(--editor-second-searchbar-height)",
 	  footerHeight: "var(--editor-footer-height)"
 	};
 
+	var debugExpression = void 0;
 	class Editor extends _react.PureComponent {
 
 	  constructor() {
 	    super();
 
 	    this.cbPanel = null;
 	    this.pendingJumpLine = null;
 	    this.lastJumpLine = null;
@@ -24144,17 +24150,16 @@ return /******/ (function(modules) { // 
 	  }
 
 	  componentWillReceiveProps(nextProps) {
 	    // This lifecycle method is responsible for updating the editor
 	    // text.
 	    var selectedSource = nextProps.selectedSource,
 	        selectedLocation = nextProps.selectedLocation;
 
-	    this.clearDebugLine(this.props.selectedFrame);
 
 	    if (nextProps.startPanelSize !== this.props.startPanelSize || nextProps.endPanelSize !== this.props.endPanelSize) {
 	      this.state.editor.codeMirror.setSize();
 	    }
 
 	    if (!selectedSource) {
 	      if (this.props.selectedSource) {
 	        this.showMessage("");
@@ -24162,24 +24167,25 @@ return /******/ (function(modules) { // 
 	    } else if (selectedSource.get("loading")) {
 	      this.showMessage(L10N.getStr("loadingText"));
 	    } else if (selectedSource.get("error")) {
 	      this.showMessage(selectedSource.get("error"));
 	    } else if (this.props.selectedSource !== selectedSource) {
 	      (0, _editor.showSourceText)(this.state.editor, selectedSource.toJS());
 	    }
 
-	    if (this.props.linesInScope !== nextProps.linesInScope) {
+	    if (this.state.editor && this.props.linesInScope !== nextProps.linesInScope) {
 	      this.state.editor.codeMirror.operation(() => {
 	        (0, _editor.clearLineClass)(this.state.editor.codeMirror, "in-scope");
 	      });
-	    }
-
-	    this.setDebugLine(nextProps.selectedFrame, selectedLocation);
-	    (0, _editor.resizeBreakpointGutter)(this.state.editor.codeMirror);
+
+	      this.clearDebugLine(this.props.selectedFrame);
+	      this.setDebugLine(nextProps.selectedFrame, selectedLocation);
+	      (0, _editor.resizeBreakpointGutter)(this.state.editor.codeMirror);
+	    }
 	  }
 
 	  setupEditor() {
 	    var editor = (0, _editor.createEditor)();
 
 	    // disables the default search shortcuts
 	    editor._initShortcuts = () => {};
 
@@ -24356,43 +24362,51 @@ return /******/ (function(modules) { // 
 	    var direction = e.shiftKey ? "prev" : "next";
 	    (0, _editor.traverseResults)(e, ctx, query, direction, searchModifiers.toJS());
 	  }
 
 	  clearPreviewSelection() {
 	    this.props.clearSelection();
 	  }
 
-	  openMenu(event, codeMirror) {
+	  inSelectedFrameSource() {
 	    var _props3 = this.props,
-	        selectedSource = _props3.selectedSource,
 	        selectedLocation = _props3.selectedLocation,
-	        showSource = _props3.showSource,
-	        jumpToMappedLocation = _props3.jumpToMappedLocation,
-	        addExpression = _props3.addExpression,
-	        toggleBlackBox = _props3.toggleBlackBox;
+	        selectedFrame = _props3.selectedFrame;
+
+	    return selectedFrame && selectedLocation && selectedFrame.location.sourceId == selectedLocation.sourceId;
+	  }
+
+	  openMenu(event, codeMirror) {
+	    var _props4 = this.props,
+	        selectedSource = _props4.selectedSource,
+	        selectedLocation = _props4.selectedLocation,
+	        showSource = _props4.showSource,
+	        jumpToMappedLocation = _props4.jumpToMappedLocation,
+	        addExpression = _props4.addExpression,
+	        toggleBlackBox = _props4.toggleBlackBox;
 
 
 	    return (0, _EditorMenu2.default)({
 	      codeMirror,
 	      event,
 	      selectedLocation,
 	      selectedSource,
 	      showSource,
 	      jumpToMappedLocation,
 	      addExpression,
 	      toggleBlackBox,
 	      onGutterContextMenu: this.onGutterContextMenu
 	    });
 	  }
 
 	  onGutterClick(cm, line, gutter, ev) {
-	    var _props4 = this.props,
-	        selectedSource = _props4.selectedSource,
-	        toggleBreakpoint = _props4.toggleBreakpoint;
+	    var _props5 = this.props,
+	        selectedSource = _props5.selectedSource,
+	        toggleBreakpoint = _props5.toggleBreakpoint;
 
 	    // ignore right clicks in the gutter
 
 	    if (ev.ctrlKey && ev.button === 0 || ev.which === 3 || selectedSource && selectedSource.get("isBlackBoxed")) {
 	      return;
 	    }
 
 	    if (this.isCbPanelOpen()) {
@@ -24400,21 +24414,21 @@ return /******/ (function(modules) { // 
 	    }
 
 	    if (gutter !== "CodeMirror-foldgutter") {
 	      toggleBreakpoint(line + 1);
 	    }
 	  }
 
 	  onGutterContextMenu(event) {
-	    var _props5 = this.props,
-	        selectedSource = _props5.selectedSource,
-	        breakpoints = _props5.breakpoints,
-	        toggleBreakpoint = _props5.toggleBreakpoint,
-	        toggleDisabledBreakpoint = _props5.toggleDisabledBreakpoint;
+	    var _props6 = this.props,
+	        selectedSource = _props6.selectedSource,
+	        breakpoints = _props6.breakpoints,
+	        toggleBreakpoint = _props6.toggleBreakpoint,
+	        toggleDisabledBreakpoint = _props6.toggleDisabledBreakpoint;
 
 
 	    if (selectedSource && selectedSource.get("isBlackBoxed")) {
 	      event.preventDefault();
 	      return;
 	    }
 
 	    var line = (0, _editor.lineAtHeight)(this.state.editor, event);
@@ -24441,20 +24455,20 @@ return /******/ (function(modules) { // 
 	    }
 	  }
 
 	  toggleConditionalPanel(line) {
 	    if (this.isCbPanelOpen()) {
 	      return this.closeConditionalPanel();
 	    }
 
-	    var _props6 = this.props,
-	        selectedLocation = _props6.selectedLocation,
-	        setBreakpointCondition = _props6.setBreakpointCondition,
-	        breakpoints = _props6.breakpoints;
+	    var _props7 = this.props,
+	        selectedLocation = _props7.selectedLocation,
+	        setBreakpointCondition = _props7.setBreakpointCondition,
+	        breakpoints = _props7.breakpoints;
 
 	    var sourceId = selectedLocation ? selectedLocation.sourceId : "";
 
 	    var breakpoint = breakpoints.find(bp => bp.location.line === line);
 	    var location = { sourceId, line };
 	    var condition = breakpoint ? breakpoint.condition : "";
 
 	    var panel = (0, _ConditionalPanel.renderConditionalPanel)({
@@ -24475,35 +24489,38 @@ return /******/ (function(modules) { // 
 	    this.cbPanel = null;
 	  }
 
 	  isCbPanelOpen() {
 	    return !!this.cbPanel;
 	  }
 
 	  clearDebugLine(selectedFrame) {
-	    if (selectedFrame) {
-	      var line = selectedFrame.location.line;
-	      if (this.debugExpression) {
-	        this.debugExpression.clear();
+	    if (this.state.editor && selectedFrame) {
+	      var _selectedFrame$locati = selectedFrame.location,
+	          sourceId = _selectedFrame$locati.sourceId,
+	          line = _selectedFrame$locati.line;
+
+	      if (debugExpression) {
+	        debugExpression.clear();
 	      }
 
 	      this.state.editor.codeMirror.removeLineClass(line - 1, "line", "new-debug-line");
 	    }
 	  }
 
 	  setDebugLine(selectedFrame, selectedLocation) {
-	    if (selectedFrame && selectedLocation && selectedFrame.location.sourceId === selectedLocation.sourceId) {
-	      var _selectedFrame$locati = selectedFrame.location,
-	          line = _selectedFrame$locati.line,
-	          column = _selectedFrame$locati.column;
+	    if (this.state.editor && selectedFrame && selectedLocation && selectedFrame.location.sourceId === selectedLocation.sourceId) {
+	      var _selectedFrame$locati2 = selectedFrame.location,
+	          line = _selectedFrame$locati2.line,
+	          column = _selectedFrame$locati2.column;
 
 	      this.state.editor.codeMirror.addLineClass(line - 1, "line", "new-debug-line");
 
-	      this.debugExpression = (0, _editor.markText)(this.state.editor, "debug-expression", {
+	      debugExpression = (0, _editor.markText)(this.state.editor, "debug-expression", {
 	        start: { line, column },
 	        end: { line, column: null }
 	      });
 	    }
 	  }
 
 	  // If the location has changed and a specific line is requested,
 	  // move to that line and flash it.
@@ -24536,47 +24553,16 @@ return /******/ (function(modules) { // 
 	  }
 
 	  showMessage(msg) {
 	    this.state.editor.replaceDocument(this.state.editor.createDocument());
 	    this.state.editor.setText(msg);
 	    this.state.editor.setMode({ name: "text" });
 	  }
 
-	  renderHighlightLines() {
-	    var highlightedLineRange = this.props.highlightedLineRange;
-
-
-	    if (!highlightedLineRange) {
-	      return;
-	    }
-
-	    return HighlightLines({
-	      editor: this.state.editor,
-	      highlightedLineRange
-	    });
-	  }
-
-	  renderHitCounts() {
-	    var _props7 = this.props,
-	        hitCount = _props7.hitCount,
-	        selectedSource = _props7.selectedSource;
-
-
-	    if (!selectedSource || selectedSource.get("loading") || !hitCount || !this.state.editor) {
-	      return;
-	    }
-
-	    return hitCount.filter(marker => marker.get("count") > 0).map(marker => HitMarker({
-	      key: marker.get("line"),
-	      hitData: marker.toJS(),
-	      editor: this.state.editor.codeMirror
-	    }));
-	  }
-
 	  getInlineEditorStyles() {
 	    var _props8 = this.props,
 	        selectedSource = _props8.selectedSource,
 	        horizontal = _props8.horizontal,
 	        searchOn = _props8.searchOn;
 
 
 	    var subtractions = [];
@@ -24590,20 +24576,51 @@ return /******/ (function(modules) { // 
 	      subtractions.push(cssVars.secondSearchbarHeight);
 	    }
 
 	    return {
 	      height: subtractions.length === 0 ? "100%" : `calc(100% - ${subtractions.join(" - ")})`
 	    };
 	  }
 
-	  renderPreview() {
+	  renderHighlightLines() {
+	    var highlightedLineRange = this.props.highlightedLineRange;
+
+
+	    if (!highlightedLineRange) {
+	      return;
+	    }
+
+	    return HighlightLines({
+	      editor: this.state.editor,
+	      highlightedLineRange
+	    });
+	  }
+
+	  renderHitCounts() {
 	    var _props9 = this.props,
-	        selectedSource = _props9.selectedSource,
-	        selection = _props9.selection;
+	        hitCount = _props9.hitCount,
+	        selectedSource = _props9.selectedSource;
+
+
+	    if (!selectedSource || selectedSource.get("loading") || !hitCount || !this.state.editor) {
+	      return;
+	    }
+
+	    return hitCount.filter(marker => marker.get("count") > 0).map(marker => HitMarker({
+	      key: marker.get("line"),
+	      hitData: marker.toJS(),
+	      editor: this.state.editor.codeMirror
+	    }));
+	  }
+
+	  renderPreview() {
+	    var _props10 = this.props,
+	        selectedSource = _props10.selectedSource,
+	        selection = _props10.selection;
 
 	    if (!this.state.editor || !selectedSource) {
 	      return null;
 	    }
 
 	    if (!selection || selection.updating) {
 	      return;
 	    }
@@ -24626,70 +24643,90 @@ return /******/ (function(modules) { // 
 	      popoverPos: cursorPos,
 	      onClose: () => this.clearPreviewSelection()
 	    });
 	  }
 
 	  renderInScopeLines() {
 	    var linesInScope = this.props.linesInScope;
 
-	    if (!(0, _devtoolsConfig.isEnabled)("highlightScopeLines") || !linesInScope || !this.inSelectedFrameSource()) {
+	    if (!this.state.editor || !(0, _devtoolsConfig.isEnabled)("highlightScopeLines") || !linesInScope || !this.inSelectedFrameSource()) {
 	      return;
 	    }
 
 	    this.state.editor.codeMirror.operation(() => {
 	      linesInScope.forEach(line => {
 	        this.state.editor.codeMirror.addLineClass(line - 1, "line", "in-scope");
 	      });
 	    });
 	  }
 
-	  inSelectedFrameSource() {
-	    var _props10 = this.props,
-	        selectedLocation = _props10.selectedLocation,
-	        selectedFrame = _props10.selectedFrame;
-
-	    return selectedFrame && selectedLocation && selectedFrame.location.sourceId == selectedLocation.sourceId;
-	  }
-
 	  renderCallSites() {
 	    var editor = this.state.editor;
 
 	    if (!editor || !(0, _devtoolsConfig.isEnabled)("columnBreakpoints")) {
 	      return null;
 	    }
 	    return CallSites({ editor });
 	  }
 
-	  render() {
+	  renderSearchBar() {
 	    var _props11 = this.props,
 	        selectSource = _props11.selectSource,
 	        selectedSource = _props11.selectedSource,
 	        highlightLineRange = _props11.highlightLineRange,
-	        clearHighlightLineRange = _props11.clearHighlightLineRange,
-	        coverageOn = _props11.coverageOn,
-	        pauseData = _props11.pauseData,
-	        horizontal = _props11.horizontal;
+	        clearHighlightLineRange = _props11.clearHighlightLineRange;
+
+
+	    if (!this.state.editor) {
+	      return null;
+	    }
+
+	    return SearchBar({
+	      editor: this.state.editor,
+	      selectSource,
+	      selectedSource,
+	      highlightLineRange,
+	      clearHighlightLineRange
+	    });
+	  }
+
+	  renderFooter() {
+	    var horizontal = this.props.horizontal;
+
+
+	    if (!this.state.editor) {
+	      return null;
+	    }
+	    return Footer({ editor: this.state.editor, horizontal });
+	  }
+
+	  renderBreakpoints() {
+	    if (!this.state.editor) {
+	      return null;
+	    }
+
+	    return Breakpoints({ editor: this.state.editor });
+	  }
+
+	  render() {
+	    var _props12 = this.props,
+	        coverageOn = _props12.coverageOn,
+	        pauseData = _props12.pauseData;
 
 
 	    return _react.DOM.div({
 	      className: (0, _classnames2.default)("editor-wrapper", {
 	        "coverage-on": coverageOn,
 	        paused: !!pauseData && (0, _devtoolsConfig.isEnabled)("highlightScopeLines")
 	      })
-	    }, SearchBar({
-	      editor: this.state.editor,
-	      selectSource,
-	      selectedSource,
-	      highlightLineRange,
-	      clearHighlightLineRange
-	    }), _react.DOM.div({
+	    }, this.renderSearchBar(), _react.DOM.div({
 	      className: "editor-mount devtools-monospace",
 	      style: this.getInlineEditorStyles()
-	    }), this.renderHighlightLines(), this.renderInScopeLines(), this.renderHitCounts(), Footer({ editor: this.state.editor, horizontal }), this.renderPreview(), this.renderCallSites(), Breakpoints({ editor: this.state.editor }));
+	    }), this.renderHighlightLines(), this.renderInScopeLines(), this.renderHitCounts(), this.renderFooter(), this.renderPreview(), this.renderCallSites(), this.renderBreakpoints());
 	  }
 	}
 
 	Editor.displayName = "Editor";
 
 	Editor.propTypes = {
 	  breakpoints: _reactImmutableProptypes2.default.map,
 	  hitCount: _react.PropTypes.object,
@@ -27814,35 +27851,31 @@ return /******/ (function(modules) { // 
 	        editor = _props2.editor,
 	        breakpoint = _props2.breakpoint,
 	        selectedSource = _props2.selectedSource;
 
 	    return editor !== nextProps.editor || breakpoint.disabled !== nextProps.breakpoint.disabled || breakpoint.condition !== nextProps.breakpoint.condition || breakpoint.loading !== nextProps.breakpoint.loading || selectedSource !== nextProps.selectedSource;
 	  }
 
 	  componentDidMount() {
-	    if (!this.props.editor) {
-	      return;
-	    }
-
 	    this.addBreakpoint();
 	  }
 
 	  componentDidUpdate() {
 	    this.addBreakpoint();
 	  }
 
 	  componentWillUnmount() {
 	    var _props3 = this.props,
 	        editor = _props3.editor,
 	        breakpoint = _props3.breakpoint,
 	        selectedSource = _props3.selectedSource;
 
 
-	    if (!editor || !selectedSource) {
+	    if (!selectedSource) {
 	      return;
 	    }
 
 	    if (breakpoint.loading) {
 	      return;
 	    }
 
 	    var line = breakpoint.location.line - 1;
@@ -27903,32 +27936,24 @@ return /******/ (function(modules) { // 
 	    this.props.editor.addLineClass(line, "line", "hit-marker");
 	  }
 
 	  shouldComponentUpdate(nextProps) {
 	    return this.props.editor !== nextProps.editor || this.props.hitData !== nextProps.hitData;
 	  }
 
 	  componentDidMount() {
-	    if (!this.props.editor) {
-	      return;
-	    }
-
 	    this.addMarker();
 	  }
 
 	  componentDidUpdate() {
 	    this.addMarker();
 	  }
 
 	  componentWillUnmount() {
-	    if (!this.props.editor) {
-	      return;
-	    }
-
 	    var hitData = this.props.hitData;
 	    var line = hitData.line - 1;
 
 	    this.props.editor.setGutterMarker(line, "hit-markers", null);
 	    this.props.editor.removeLineClass(line, "line", "hit-marker");
 	  }
 
 	  render() {
@@ -45928,17 +45953,18 @@ return /******/ (function(modules) { // 
 	 * numbers gutter. Editor CSS will absolutely position the gutter
 	 * beneath the line numbers. This makes it easy to be flexible with
 	 * how we overlay breakpoints.
 	 */
 	function resizeBreakpointGutter(editor) {
 	  var gutters = editor.display.gutters;
 	  var lineNumbers = gutters.querySelector(".CodeMirror-linenumbers");
 	  var breakpoints = gutters.querySelector(".breakpoints");
-	  breakpoints.style.width = `${lineNumbers.clientWidth}px`;
+	  var width = lineNumbers.clientWidth;
+	  breakpoints.style.width = `${width}px`;
 	}
 
 	module.exports = {
 	  removeLineClass,
 	  clearLineClass,
 	  getTextForLine,
 	  getCursorLine,
 	  resizeBreakpointGutter
@@ -46992,16 +47018,20 @@ return /******/ (function(modules) { // 
 	function isLodash(frame) {
 	  return getFrameUrl(frame).match(/lodash/i);
 	}
 
 	function isEmber(frame) {
 	  return getFrameUrl(frame).match(/ember/i);
 	}
 
+	function isVueJS(frame) {
+	  return getFrameUrl(frame).match(/vue\.js/i);
+	}
+
 	function isRxJs(frame) {
 	  return getFrameUrl(frame).match(/rxjs/i);
 	}
 
 	function isAngular(frame) {
 	  return getFrameUrl(frame).match(/angular/i);
 	}
 
@@ -47048,16 +47078,20 @@ return /******/ (function(modules) { // 
 	  if (isLodash(frame)) {
 	    return "Lodash";
 	  }
 
 	  if (isEmber(frame)) {
 	    return "Ember";
 	  }
 
+	  if (isVueJS(frame)) {
+	    return "VueJS";
+	  }
+
 	  if (isRxJs(frame)) {
 	    return "RxJS";
 	  }
 
 	  if (isAngular(frame)) {
 	    return "Angular";
 	  }
 	}
@@ -47070,16 +47104,19 @@ return /******/ (function(modules) { // 
 	  jQuery: {
 	    "jQuery.event.dispatch": "Dispatch Event"
 	  },
 	  React: {
 	    // eslint-disable-next-line max-len
 	    "ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext/renderedElement<": "Render",
 	    _renderValidatedComponentWithoutOwnerOrContext: "Render"
 	  },
+	  VueJS: {
+	    "renderMixin/Vue.prototype._render": "Render"
+	  },
 	  Webpack: {
 	    // eslint-disable-next-line camelcase
 	    __webpack_require__: "Bootstrap"
 	  }
 	};
 
 	function mapDisplayNames(frame, library) {
 	  var map = displayNameMap[library];
@@ -47376,20 +47413,16 @@ return /******/ (function(modules) { // 
 	class HighlightLines extends _react.Component {
 
 	  constructor() {
 	    super();
 	    this.highlightLineRange = this.highlightLineRange.bind(this);
 	  }
 
 	  componentDidMount() {
-	    if (!this.props.editor) {
-	      return;
-	    }
-
 	    this.highlightLineRange();
 	  }
 
 	  componentWillUpdate() {
 	    this.clearHighlightRange();
 	  }
 
 	  componentDidUpdate() {
@@ -47399,26 +47432,20 @@ return /******/ (function(modules) { // 
 	  componentWillUnmount() {
 	    this.clearHighlightRange();
 	  }
 
 	  clearHighlightRange() {
 	    var _props = this.props,
 	        highlightedLineRange = _props.highlightedLineRange,
 	        editor = _props.editor;
-
-
-	    if (!editor) {
-	      return;
-	    }
-
 	    var codeMirror = editor.codeMirror;
 
 
-	    if ((0, _isEmpty2.default)(highlightedLineRange) || !editor || !codeMirror) {
+	    if ((0, _isEmpty2.default)(highlightedLineRange) || !codeMirror) {
 	      return;
 	    }
 
 	    var start = highlightedLineRange.start,
 	        end = highlightedLineRange.end;
 
 	    codeMirror.operation(() => {
 	      (0, _range2.default)(start - 1, end).forEach(line => {
@@ -47426,22 +47453,16 @@ return /******/ (function(modules) { // 
 	      });
 	    });
 	  }
 
 	  highlightLineRange() {
 	    var _props2 = this.props,
 	        highlightedLineRange = _props2.highlightedLineRange,
 	        editor = _props2.editor;
-
-
-	    if (!editor) {
-	      return;
-	    }
-
 	    var codeMirror = editor.codeMirror;
 
 
 	    if ((0, _isEmpty2.default)(highlightedLineRange) || !codeMirror) {
 	      return;
 	    }
 
 	    var start = highlightedLineRange.start,
@@ -52305,22 +52326,18 @@ return /******/ (function(modules) { // 
 
 	  shouldComponentUpdate(nextProps) {
 	    return this.props.editor !== nextProps.editor;
 	  }
 
 	  componentDidMount() {
 	    var _props = this.props,
 	        breakpoint = _props.breakpoint,
-	        editor = _props.editor,
 	        showCallSite = _props.showCallSite;
 
-	    if (!editor) {
-	      return;
-	    }
 
 	    if (!breakpoint && !showCallSite) {
 	      return;
 	    }
 
 	    this.addCallSite();
 	  }
 
@@ -52344,17 +52361,17 @@ return /******/ (function(modules) { // 
 	        }
 	      } else if (!nextProps.breakpoint) {
 	        this.clearCallSite();
 	      }
 	    }
 	  }
 
 	  componentWillUnmount() {
-	    if (!this.props.editor || !this.marker) {
+	    if (!this.marker) {
 	      return;
 	    }
 	    this.marker.clear();
 	  }
 
 	  render() {
 	    return null;
 	  }
@@ -52467,16 +52484,17 @@ return /******/ (function(modules) { // 
 
 	    if (!prevProps.enabled && this.props.enabled) {
 	      this.updateResults(this.state.query);
 	    }
 	  }
 
 	  openSymbolModal(_, e) {
 	    e.preventDefault();
+	    e.stopPropagation();
 	    this.props.setActiveSearch("symbol");
 	  }
 
 	  onClick(e) {
 	    e.stopPropagation();
 	  }
 
 	  onChange(e) {
@@ -52488,16 +52506,17 @@ return /******/ (function(modules) { // 
 
 	    this.setState({ query: e.target.value });
 	    return this.updateResults(e.target.value);
 	  }
 
 	  closeModal() {
 	    this.props.closeActiveSearch();
 	    this.props.clearHighlightLineRange();
+	    this.setState({ query: "" });
 	  }
 
 	  selectResultItem(e, item) {
 	    var _props = this.props,
 	        selectSource = _props.selectSource,
 	        selectedSource = _props.selectedSource;
 
 
@@ -52693,12 +52712,20 @@ return /******/ (function(modules) { // 
 	}, dispatch => (0, _redux.bindActionCreators)(_actions2.default, dispatch))(SymbolModal);
 
 /***/ },
 /* 1171 */
 /***/ function(module, exports) {
 
 	// removed by extract-text-webpack-plugin
 
+/***/ },
+/* 1172 */,
+/* 1173 */,
+/* 1174 */
+/***/ function(module, exports) {
+
+	module.exports = "<svg xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 400 400\" xml:space=\"preserve\" id=\"svg2\" version=\"1.1\"><metadata id=\"metadata8\"><rdf:RDF><cc:Work rdf:about><dc:format>image/svg+xml</dc:format><dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"></dc></cc:Work></rdf:RDF></metadata><defs id=\"defs6\"></defs><g transform=\"matrix(1.3333333,0,0,-1.3333333,0,400)\" id=\"g10\"><g transform=\"translate(178.0626,235.0086)\" id=\"g12\"><path id=\"path14\" style=\"fill:#41b883;fill-opacity:1;fill-rule:nonzero;stroke:none\" d=\"M 0,0 -22.669,-39.264 -45.338,0 h -75.491 L -22.669,-170.017 75.491,0 Z\"></path></g><g transform=\"translate(178.0626,235.0086)\" id=\"g16\"><path id=\"path18\" style=\"fill:#34495e;fill-opacity:1;fill-rule:nonzero;stroke:none\" d=\"M 0,0 -22.669,-39.264 -45.338,0 H -81.565 L -22.669,-102.01 36.227,0 Z\"></path></g></g></svg>"
+
 /***/ }
 /******/ ])
 });
 ;
\ No newline at end of file

--- a/devtools/client/debugger/new/parser-worker.js
+++ b/devtools/client/debugger/new/parser-worker.js
@@ -30884,17 +30884,17 @@ return /******/ (function(modules) { // 
 
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	var ASTs = new Map();
 
 	function _parse(code, opts) {
 	  return babylon.parse(code, Object.assign({}, opts, {
 	    sourceType: "module",
-	    plugins: ["jsx", "flow"]
+	    plugins: ["jsx", "flow", "objectRestSpread"]
 	  }));
 	}
 
 	function parse(text, opts) {
 	  var ast = void 0;
 	  if (!text) {
 	    return;
 	  }

--- a/devtools/client/debugger/new/test/mochitest/browser.ini
+++ b/devtools/client/debugger/new/test/mochitest/browser.ini
@@ -47,16 +47,17 @@ support-files =
 [browser_dbg-breakpoints.js]
 [browser_dbg-breakpoints-reloading.js]
 [browser_dbg-breakpoints-cond.js]
 [browser_dbg-call-stack.js]
 [browser_dbg-expressions.js]
 [browser_dbg-scopes.js]
 [browser_dbg-chrome-create.js]
 [browser_dbg-chrome-debugging.js]
+skip-if = debug # bug 1374187
 [browser_dbg-console.js]
 [browser_dbg-debugger-buttons.js]
 [browser_dbg-editor-gutter.js]
 [browser_dbg-editor-select.js]
 [browser_dbg-editor-highlight.js]
 [browser_dbg-iframes.js]
 [browser_dbg_keyboard_navigation.js]
 [browser_dbg_keyboard-shortcuts.js]

--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -35,17 +35,16 @@ const App = createClass({
 
   propTypes: {
     boxModel: PropTypes.shape(BoxModelTypes.boxModel).isRequired,
     getSwatchColorPickerTooltip: PropTypes.func.isRequired,
     grids: PropTypes.arrayOf(PropTypes.shape(GridTypes.grid)).isRequired,
     highlighterSettings: PropTypes.shape(GridTypes.highlighterSettings).isRequired,
     setSelectedNode: PropTypes.func.isRequired,
     showBoxModelProperties: PropTypes.bool.isRequired,
-    showGridOutline: PropTypes.bool.isRequired,
     onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onPromoteLearnMoreClick: PropTypes.func.isRequired,
     onSetGridOverlayColor: PropTypes.func.isRequired,
     onShowBoxModelEditor: PropTypes.func.isRequired,
     onShowBoxModelHighlighter: PropTypes.func.isRequired,
     onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
     onToggleShowGridLineNumbers: PropTypes.func.isRequired,

--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -21,16 +21,17 @@ const ClassListPreviewer = require("devt
 const {gDevTools} = require("devtools/client/framework/devtools");
 const {getCssProperties} = require("devtools/shared/fronts/css-properties");
 const {
   VIEW_NODE_SELECTOR_TYPE,
   VIEW_NODE_PROPERTY_TYPE,
   VIEW_NODE_VALUE_TYPE,
   VIEW_NODE_IMAGE_URL_TYPE,
   VIEW_NODE_LOCATION_TYPE,
+  VIEW_NODE_SHAPE_POINT_TYPE,
 } = require("devtools/client/inspector/shared/node-types");
 const StyleInspectorMenu = require("devtools/client/inspector/shared/style-inspector-menu");
 const TooltipsOverlay = require("devtools/client/inspector/shared/tooltips-overlay");
 const {createChild, promiseWarn, debounce} = require("devtools/client/inspector/shared/utils");
 const EventEmitter = require("devtools/shared/event-emitter");
 const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
 const clipboardHelper = require("devtools/shared/platform/clipboard");
 const AutocompletePopup = require("devtools/client/shared/autocomplete-popup");
@@ -43,16 +44,17 @@ const PREF_ENABLE_MDN_DOCS_TOOLTIP =
 const FILTER_CHANGED_TIMEOUT = 150;
 const PREF_ORIG_SOURCES = "devtools.styleeditor.source-maps-enabled";
 
 // This is used to parse user input when filtering.
 const FILTER_PROP_RE = /\s*([^:\s]*)\s*:\s*(.*?)\s*;?$/;
 // This is used to parse the filter search value to see if the filter
 // should be strict or not
 const FILTER_STRICT_RE = /\s*`(.*?)`\s*$/;
+const INSET_POINT_TYPES = ["top", "right", "bottom", "left"];
 
 /**
  * Our model looks like this:
  *
  * ElementStyle:
  *   Responsible for keeping track of which properties are overridden.
  *   Maintains a list of Rule objects that apply to the element.
  * Rule:
@@ -328,16 +330,29 @@ CssRuleView.prototype = {
         property: getPropertyNameAndValue(node).name,
         value: node.textContent,
         enabled: prop.enabled,
         overridden: prop.overridden,
         pseudoElement: prop.rule.pseudoElement,
         sheetHref: prop.rule.domRule.href,
         textProperty: prop
       };
+    } else if (classes.contains("ruleview-shape-point") && prop) {
+      type = VIEW_NODE_SHAPE_POINT_TYPE;
+      value = {
+        property: getPropertyNameAndValue(node).name,
+        value: node.textContent,
+        enabled: prop.enabled,
+        overridden: prop.overridden,
+        pseudoElement: prop.rule.pseudoElement,
+        sheetHref: prop.rule.domRule.href,
+        textProperty: prop,
+        toggleActive: getShapeToggleActive(node),
+        point: getShapePoint(node)
+      };
     } else if (classes.contains("theme-link") &&
                !classes.contains("ruleview-rule-source") && prop) {
       type = VIEW_NODE_IMAGE_URL_TYPE;
       value = {
         property: getPropertyNameAndValue(node).name,
         value: node.parentNode.textContent,
         url: node.href,
         enabled: prop.enabled,
@@ -1534,16 +1549,62 @@ function getPropertyNameAndValue(node) {
         name: node.querySelector(".ruleview-propertyname").textContent,
         value: node.querySelector(".ruleview-propertyvalue").textContent
       };
     }
     node = node.parentNode;
   }
 }
 
+/**
+ * Walk up the DOM from a given node until a parent property holder is found,
+ * and return an active shape toggle if one exists.
+ *
+ * @param {DOMNode} node
+ *        The node to start from
+ * @returns {DOMNode} The active shape toggle node, if one exists.
+ */
+function getShapeToggleActive(node) {
+  while (true) {
+    if (!node || !node.classList) {
+      return null;
+    }
+    // Check first for ruleview-computed since it's the deepest
+    if (node.classList.contains("ruleview-computed") ||
+        node.classList.contains("ruleview-property")) {
+      return node.querySelector(".ruleview-shape.active");
+    }
+    node = node.parentNode;
+  }
+}
+
+/**
+ * Get the point associated with a shape point node.
+ *
+ * @param {DOMNode} node
+ *        A shape point node
+ * @returns {String} The point associated with the given node.
+ */
+function getShapePoint(node) {
+  let classList = node.classList;
+  let point = node.dataset.point;
+  // Inset points use classes instead of data because a single span can represent
+  // multiple points.
+  let insetClasses = [];
+  classList.forEach(className => {
+    if (INSET_POINT_TYPES.includes(className)) {
+      insetClasses.push(className);
+    }
+  });
+  if (insetClasses.length > 0) {
+    point = insetClasses.join(",");
+  }
+  return point;
+}
+
 function RuleViewTool(inspector, window) {
   this.inspector = inspector;
   this.document = window.document;
 
   this.view = new CssRuleView(this.inspector, this.document);
 
   this.clearUserProperties = this.clearUserProperties.bind(this);
   this.refresh = this.refresh.bind(this);

--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -228,16 +228,22 @@ subsuite = clipboard
 skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32 debug devtools for timeouts
 [browser_rules_selector-highlighter-on-navigate.js]
 [browser_rules_selector-highlighter_01.js]
 [browser_rules_selector-highlighter_02.js]
 [browser_rules_selector-highlighter_03.js]
 [browser_rules_selector-highlighter_04.js]
 [browser_rules_selector-highlighter_05.js]
 [browser_rules_selector_highlight.js]
+[browser_rules_shapes-toggle_01.js]
+[browser_rules_shapes-toggle_02.js]
+[browser_rules_shapes-toggle_03.js]
+[browser_rules_shapes-toggle_04.js]
+[browser_rules_shapes-toggle_05.js]
+[browser_rules_shapes-toggle_06.js]
 [browser_rules_shorthand-overridden-lists.js]
 [browser_rules_strict-search-filter-computed-list_01.js]
 [browser_rules_strict-search-filter_01.js]
 [browser_rules_strict-search-filter_02.js]
 [browser_rules_strict-search-filter_03.js]
 [browser_rules_style-editor-link.js]
 skip-if = !debug # Bug 1309759
 [browser_rules_url-click-opens-new-tab.js]

--- a/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-restored-after-reload.js
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-restored-after-reload.js
@@ -45,24 +45,24 @@ add_task(function* () {
   info("Toggling ON the CSS grid highlighter from the rule-view.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown");
   gridToggle.click();
   yield onHighlighterShown;
 
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   info("Reload the page, expect the highlighter to be displayed once again");
-  let onStateRestored = highlighters.once("state-restored");
+  let onStateRestored = highlighters.once("grid-state-restored");
   yield refreshTab(gBrowser.selectedTab);
   let { restored } = yield onStateRestored;
   ok(restored, "The highlighter state was restored");
 
   info("Check that the grid highlighter can be displayed after reloading the page");
   ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
 
   info("Navigate to another URL, and check that the highlighter is hidden");
   let otherUri = "data:text/html;charset=utf-8," + encodeURIComponent(OTHER_URI);
-  onStateRestored = highlighters.once("state-restored");
+  onStateRestored = highlighters.once("grid-state-restored");
   yield navigateTo(inspector, otherUri);
   ({ restored } = yield onStateRestored);
   ok(!restored, "The highlighter state was not restored");
   ok(!highlighters.gridHighlighterShown, "CSS grid highlighter is hidden.");
 });

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
@@ -0,0 +1,63 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view and the display of the
+// shapes highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  let highlighters = view.highlighters;
+
+  yield selectNode("#shape", inspector);
+  let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  let shapesToggle = container.querySelector(".ruleview-shape");
+
+  info("Checking the initial state of the CSS shape toggle in the rule-view.");
+  ok(shapesToggle, "Shapes highlighter toggle is visible.");
+  ok(!shapesToggle.classList.contains("active"),
+    "Shapes highlighter toggle button is not active.");
+  ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
+    "No CSS shapes highlighter exists in the rule-view.");
+  ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
+
+  info("Toggling ON the CSS shapes highlighter from the rule-view.");
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapesToggle.click();
+  yield onHighlighterShown;
+
+  info("Checking the CSS shapes highlighter is created and toggle button is active in " +
+    "the rule-view.");
+  ok(shapesToggle.classList.contains("active"),
+    "Shapes highlighter toggle is active.");
+  ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
+    "CSS shapes highlighter created in the rule-view.");
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+
+  info("Toggling OFF the CSS shapes highlighter from the rule-view.");
+  let onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+  shapesToggle.click();
+  yield onHighlighterHidden;
+
+  info("Checking the CSS shapes highlighter is not shown and toggle button is not " +
+    "active in the rule-view.");
+  ok(!shapesToggle.classList.contains("active"),
+    "shapes highlighter toggle button is not active.");
+  ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_02.js
@@ -0,0 +1,72 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view from an overridden
+// declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+    div {
+      clip-path: circle(30%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  let highlighters = view.highlighters;
+
+  yield selectNode("#shape", inspector);
+  let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  let shapeToggle = container.querySelector(".ruleview-shape");
+  let overriddenContainer = getRuleViewProperty(view, "div", "clip-path").valueSpan;
+  let overriddenShapeToggle = overriddenContainer.querySelector(".ruleview-shape");
+
+  info("Checking the initial state of the CSS shapes toggle in the rule-view.");
+  ok(shapeToggle && overriddenShapeToggle, "Shapes highlighter toggles are visible.");
+  ok(!shapeToggle.classList.contains("active") &&
+    !overriddenShapeToggle.classList.contains("active"),
+    "Shapes highlighter toggle buttons are not active.");
+  ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
+    "No CSS shapes highlighter exists in the rule-view.");
+  ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
+
+  info("Toggling ON the shapes highlighter from the overridden rule in the rule-view.");
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  overriddenShapeToggle.click();
+  yield onHighlighterShown;
+
+  info("Checking the shapes highlighter is created and toggle buttons are active in " +
+    "the rule-view.");
+  ok(shapeToggle.classList.contains("active") &&
+    overriddenShapeToggle.classList.contains("active"),
+    "shapes highlighter toggle is active.");
+  ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
+    "CSS shapes highlighter created in the rule-view.");
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+
+  info("Toggling off the shapes highlighter from the normal shapes declaration in the " +
+    "rule-view.");
+  let onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+  shapeToggle.click();
+  yield onHighlighterHidden;
+
+  info("Checking the CSS shapes highlighter is not shown and toggle buttons are not " +
+    "active in the rule-view.");
+  ok(!shapeToggle.classList.contains("active") &&
+    !overriddenShapeToggle.classList.contains("active"),
+    "shapes highlighter toggle buttons are not active.");
+  ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
@@ -0,0 +1,92 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view with multiple shapes in the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div class="shape" id="shape1"></div>
+  <div class="shape" id="shape2"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  let highlighters = view.highlighters;
+
+  info("Selecting the first shape container.");
+  yield selectNode("#shape1", inspector);
+  let container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  let shapeToggle = container.querySelector(".ruleview-shape");
+
+  info("Checking the state of the CSS shape toggle for the first shape container " +
+    "in the rule-view.");
+  ok(shapeToggle, "shape highlighter toggle is visible.");
+  ok(!shapeToggle.classList.contains("active"),
+    "shape highlighter toggle button is not active.");
+  ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
+    "No CSS shape highlighter exists in the rule-view.");
+  ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
+
+  info("Toggling ON the CSS shapes highlighter for the first shapes container from the " +
+    "rule-view.");
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  yield onHighlighterShown;
+
+  info("Checking the CSS shapes highlighter is created and toggle button is active in " +
+    "the rule-view.");
+  ok(shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle is active.");
+  ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
+    "CSS shapes highlighter created in the rule-view.");
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+
+  info("Selecting the second shapes container.");
+  yield selectNode("#shape2", inspector);
+  let firstShapesHighlighterShown = highlighters.shapesHighlighterShown;
+  container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  shapeToggle = container.querySelector(".ruleview-shape");
+
+  info("Checking the state of the CSS shapes toggle for the second shapes container " +
+    "in the rule-view.");
+  ok(shapeToggle, "shapes highlighter toggle is visible.");
+  ok(!shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle button is not active.");
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is still shown.");
+
+  info("Toggling ON the CSS shapes highlighter for the second shapes container " +
+    "from the rule-view.");
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  yield onHighlighterShown;
+
+  info("Checking the CSS shapes highlighter is created for the second shapes container " +
+    "and toggle button is active in the rule-view.");
+  ok(shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle is active.");
+  ok(highlighters.shapesHighlighterShown != firstShapesHighlighterShown,
+    "shapes highlighter for the second shapes container is shown.");
+
+  info("Selecting the first shapes container.");
+  yield selectNode("#shape1", inspector);
+  container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  shapeToggle = container.querySelector(".ruleview-shape");
+
+  info("Checking the state of the CSS shapes toggle for the first shapes container " +
+    "in the rule-view.");
+  ok(shapeToggle, "shapes highlighter toggle is visible.");
+  ok(!shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle button is not active.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js
@@ -0,0 +1,46 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view and modifying the 'clip-path'
+// declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  let highlighters = view.highlighters;
+
+  yield selectNode("#shape", inspector);
+  let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  let shapeToggle = container.querySelector(".ruleview-shape");
+
+  info("Toggling ON the CSS shape highlighter from the rule-view.");
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  yield onHighlighterShown;
+
+  info("Edit the clip-path property to ellipse.");
+  let editor = yield focusEditableField(view, container, 30);
+  let onDone = view.once("ruleview-changed");
+  editor.input.value = "ellipse(30% 20%);";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  yield onDone;
+
+  info("Check the shape highlighter and shape toggle button are still visible.");
+  shapeToggle = container.querySelector(".ruleview-shape");
+  ok(shapeToggle, "Shape highlighter toggle is visible.");
+  ok(highlighters.shapesHighlighterShown, "CSS shape highlighter is shown.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js
@@ -0,0 +1,43 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the shapes highlighter is hidden when the highlighted shape container is
+// removed from the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view, testActor} = yield openRuleView();
+  let highlighters = view.highlighters;
+
+  yield selectNode("#shape", inspector);
+  let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  let shapeToggle = container.querySelector(".ruleview-shape");
+
+  info("Toggling ON the CSS shapes highlighter from the rule-view.");
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  yield onHighlighterShown;
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+
+  let onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+  info("Remove the #shapes container in the content page");
+  testActor.eval(`
+    content.document.querySelector("#shape").remove();
+  `);
+  yield onHighlighterHidden;
+  ok(!highlighters.shapesHighlighterShown, "CSS shapes highlighter is hidden.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js
@@ -0,0 +1,78 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view with clip-path and shape-outside
+// on the same element.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+      shape-outside: circle(25%);
+    }
+  </style>
+  <div class="shape" id="shape1"></div>
+  <div class="shape" id="shape2"></div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  let highlighters = view.highlighters;
+
+  yield selectNode("#shape1", inspector);
+  let clipPathContainer = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  let clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shape");
+  let shapeOutsideContainer = getRuleViewProperty(view, ".shape",
+    "shape-outside").valueSpan;
+  let shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shape");
+
+  info("Toggling ON the CSS shapes highlighter for clip-path from the rule-view.");
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  clipPathShapeToggle.click();
+  yield onHighlighterShown;
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(clipPathShapeToggle.classList.contains("active"),
+     "clip-path toggle button is active.");
+  ok(!shapeOutsideToggle.classList.contains("active"),
+     "shape-outside toggle button is not active.");
+
+  info("Toggling ON the CSS shapes highlighter for shape-outside from the rule-view.");
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeOutsideToggle.click();
+  yield onHighlighterShown;
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(!clipPathShapeToggle.classList.contains("active"),
+     "clip-path toggle button is not active.");
+  ok(shapeOutsideToggle.classList.contains("active"),
+     "shape-outside toggle button is active.");
+
+  info("Selecting the second shapes container.");
+  yield selectNode("#shape2", inspector);
+  clipPathContainer = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shape");
+  shapeOutsideContainer = getRuleViewProperty(view, ".shape",
+    "shape-outside").valueSpan;
+  shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shape");
+  ok(!clipPathShapeToggle.classList.contains("active"),
+     "clip-path toggle button is not active.");
+  ok(!shapeOutsideToggle.classList.contains("active"),
+     "shape-outside toggle button is not active.");
+
+  info("Selecting the first shapes container.");
+  yield selectNode("#shape1", inspector);
+  clipPathContainer = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shape");
+  shapeOutsideContainer = getRuleViewProperty(view, ".shape",
+    "shape-outside").valueSpan;
+  shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shape");
+  ok(!clipPathShapeToggle.classList.contains("active"),
+     "clip-path toggle button is not active.");
+  ok(shapeOutsideToggle.classList.contains("active"),
+     "shape-outside toggle button is active.");
+});

--- a/devtools/client/inspector/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -18,18 +18,21 @@ var {getInplaceEditorForSpan: inplaceEdi
   require("devtools/client/shared/inplace-editor");
 
 const ROOT_TEST_DIR = getRootDirectory(gTestPath);
 const FRAME_SCRIPT_URL = ROOT_TEST_DIR + "doc_frame_script.js";
 
 const STYLE_INSPECTOR_L10N
       = new LocalizationHelper("devtools/shared/locales/styleinspector.properties");
 
+Services.prefs.setBoolPref("devtools.inspector.shapesHighlighter.enabled", true);
+
 registerCleanupFunction(() => {
   Services.prefs.clearUserPref("devtools.defaultColorUnit");
+  Services.prefs.clearUserPref("devtools.inspector.shapesHighlighter.enabled");
 });
 
 /**
  * The rule-view tests rely on a frame-script to be injected in the content test
  * page. So override the shared-head's addTab to load the frame script after the
  * tab was added.
  * FIXME: Refactor the rule-view tests to use the testActor instead of a frame
  * script, so they can run on remote targets too.

--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -22,16 +22,17 @@ const Services = require("Services");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
 const SHARED_SWATCH_CLASS = "ruleview-swatch";
 const COLOR_SWATCH_CLASS = "ruleview-colorswatch";
 const BEZIER_SWATCH_CLASS = "ruleview-bezierswatch";
 const FILTER_SWATCH_CLASS = "ruleview-filterswatch";
 const ANGLE_SWATCH_CLASS = "ruleview-angleswatch";
+const INSET_POINT_TYPES = ["top", "right", "bottom", "left"];
 
 /*
  * An actionable element is an element which on click triggers a specific action
  * (e.g. shows a color tooltip, opens a link, …).
  */
 const ACTIONABLE_ELEMENTS_SELECTORS = [
   `.${COLOR_SWATCH_CLASS}`,
   `.${BEZIER_SWATCH_CLASS}`,
@@ -73,16 +74,17 @@ function TextPropertyEditor(ruleEditor, 
   this._onNameDone = this._onNameDone.bind(this);
   this._onValueDone = this._onValueDone.bind(this);
   this._onSwatchCommit = this._onSwatchCommit.bind(this);
   this._onSwatchPreview = this._onSwatchPreview.bind(this);
   this._onSwatchRevert = this._onSwatchRevert.bind(this);
   this._onValidate = this.ruleView.debounce(this._previewValue, 10, this);
   this.update = this.update.bind(this);
   this.updatePropertyState = this.updatePropertyState.bind(this);
+  this._onHoverShapePoint = this._onHoverShapePoint.bind(this);
 
   this._create();
   this.update();
 }
 
 TextPropertyEditor.prototype = {
   /**
    * Boolean indicating if the name or value is being currently edited.
@@ -295,16 +297,18 @@ TextPropertyEditor.prototype = {
         contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
         property: this.prop,
         popup: this.popup,
         multiline: true,
         maxWidth: () => this.container.getBoundingClientRect().width,
         cssProperties: this.cssProperties,
         contextMenu: this.ruleView.inspector.onTextBoxContextMenu
       });
+
+      this.ruleView.highlighters.on("hover-shape-point", this._onHoverShapePoint);
     }
   },
 
   /**
    * Get the path from which to resolve requests for this
    * rule's stylesheet.
    *
    * @return {String} the stylesheet's href.
@@ -353,16 +357,17 @@ TextPropertyEditor.prototype = {
       angleSwatchClass: SHARED_SWATCH_CLASS + " " + ANGLE_SWATCH_CLASS,
       bezierClass: "ruleview-bezier",
       bezierSwatchClass: SHARED_SWATCH_CLASS + " " + BEZIER_SWATCH_CLASS,
       colorClass: "ruleview-color",
       colorSwatchClass: SHARED_SWATCH_CLASS + " " + COLOR_SWATCH_CLASS,
       filterClass: "ruleview-filter",
       filterSwatchClass: SHARED_SWATCH_CLASS + " " + FILTER_SWATCH_CLASS,
       gridClass: "ruleview-grid",
+      shapeClass: "ruleview-shape",
       defaultColorType: !propDirty,
       urlClass: "theme-link",
       baseURI: this.sheetHref
     };
     let frag = outputParser.parseCssProperty(name, val, parserOptions);
     this.valueSpan.innerHTML = "";
     this.valueSpan.appendChild(frag);
 
@@ -437,16 +442,31 @@ TextPropertyEditor.prototype = {
     if (gridToggle) {
       gridToggle.setAttribute("title", l10n("rule.gridToggle.tooltip"));
       if (this.ruleView.highlighters.gridHighlighterShown ===
           this.ruleView.inspector.selection.nodeFront) {
         gridToggle.classList.add("active");
       }
     }
 
+    let shapeToggle = this.valueSpan.querySelector(".ruleview-shape");
+    if (shapeToggle) {
+      let mode = "css" + name.split("-").map(s => {
+        return s[0].toUpperCase() + s.slice(1);
+      }).join("");
+      shapeToggle.setAttribute("data-mode", mode);
+
+      let { highlighters, inspector } = this.ruleView;
+      if (highlighters.shapesHighlighterShown === inspector.selection.nodeFront &&
+          highlighters.state.shapes.options.mode === mode) {
+        shapeToggle.classList.add("active");
+        highlighters.highlightRuleViewShapePoint(highlighters.state.shapes.hoverPoint);
+      }
+    }
+
     // Now that we have updated the property's value, we might have a pending
     // click on the value container. If we do, we have to trigger a click event
     // on the right element.
     if (this._hasPendingClick) {
       this._hasPendingClick = false;
       let elToClick;
 
       if (this._clickedElementOptions !== null) {
@@ -924,12 +944,73 @@ TextPropertyEditor.prototype = {
    * Returns true if the property is a `display: [inline-]grid` declaration.
    *
    * @return {Boolean} true if the property is a `display: [inline-]grid` declaration.
    */
   isDisplayGrid: function () {
     return this.prop.name === "display" &&
       (this.prop.value === "grid" ||
        this.prop.value === "inline-grid");
-  }
+  },
+
+  /**
+   * Highlight the given shape point in the rule view. Called when "hover-shape-point"
+   * event is emitted.
+   *
+   * @param {Event} event
+   *        The "hover-shape-point" event.
+   * @param {String} point
+   *        The point to highlight.
+   */
+  _onHoverShapePoint: function (event, point) {
+    // If there is no shape toggle, or it is not active, return.
+    let shapeToggle = this.valueSpan.querySelector(".ruleview-shape.active");
+    if (!shapeToggle) {
+      return;
+    }
+
+    let view = this.ruleView;
+    let { highlighters } = view;
+    let ruleViewEl = view.element;
+    let selector = `.ruleview-shape-point.active`;
+    for (let pointNode of ruleViewEl.querySelectorAll(selector)) {
+      this._toggleShapePointActive(pointNode, false);
+    }
+
+    if (typeof point === "string") {
+      if (point.includes(",")) {
+        point = point.split(",")[0];
+      }
+      // Because one inset value can represent multiple points, inset points use classes
+      // instead of data.
+      selector = (INSET_POINT_TYPES.includes(point)) ?
+                 `.ruleview-shape-point.${point}` :
+                 `.ruleview-shape-point[data-point='${point}']`;
+      for (let pointNode of this.valueSpan.querySelectorAll(selector)) {
+        let nodeInfo = view.getNodeInfo(pointNode);
+        if (highlighters.isRuleViewShapePoint(nodeInfo)) {
+          this._toggleShapePointActive(pointNode, true);
+        }
+      }
+    }
+  },
+
+  /**
+   * Toggle the class "active" on the given shape point in the rule view if the current
+   * inspector selection is highlighted by the shapes highlighter.
+   *
+   * @param {NodeFront} node
+   *        The NodeFront of the shape point to toggle
+   * @param {Boolean} active
+   *        Whether the shape point should be active
+   */
+  _toggleShapePointActive: function (node, active) {
+    let { highlighters } = this.ruleView;
+    if (highlighters.inspector.selection.nodeFront !=
+        highlighters.shapesHighlighterShown) {
+      return;
+    }
+
+    node.classList.toggle("active", active);
+  },
 };
 
 exports.TextPropertyEditor = TextPropertyEditor;

--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -4,19 +4,23 @@
  * 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 Services = require("Services");
 const {Task} = require("devtools/shared/task");
 const EventEmitter = require("devtools/shared/event-emitter");
-const { VIEW_NODE_VALUE_TYPE } = require("devtools/client/inspector/shared/node-types");
+const {
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_SHAPE_POINT_TYPE
+} = require("devtools/client/inspector/shared/node-types");
 
 const DEFAULT_GRID_COLOR = "#4B0082";
+const INSET_POINT_TYPES = ["top", "right", "bottom", "left"];
 
 /**
  * Highlighters overlay is a singleton managing all highlighters in the Inspector.
  *
  * @param  {Inspector} inspector
  *         Inspector toolbox panel.
  */
 function HighlightersOverlay(inspector) {
@@ -30,29 +34,34 @@ function HighlightersOverlay(inspector) 
   // NodeFront of element that is highlighted by the geometry editor.
   this.geometryEditorHighlighterShown = null;
   // NodeFront of the grid container that is highlighted.
   this.gridHighlighterShown = null;
   // Name of the highlighter shown on mouse hover.
   this.hoveredHighlighterShown = null;
   // Name of the selector highlighter shown.
   this.selectorHighlighterShown = null;
+  // NodeFront of the shape that is highlighted
+  this.shapesHighlighterShown = null;
   // Saved state to be restore on page navigation.
   this.state = {
-    // Only the grid highlighter state is saved at the moment.
-    grid: {}
+    grid: {},
+    shapes: {}
   };
 
   this.onClick = this.onClick.bind(this);
   this.onMarkupMutation = this.onMarkupMutation.bind(this);
   this.onMouseMove = this.onMouseMove.bind(this);
   this.onMouseOut = this.onMouseOut.bind(this);
   this.onWillNavigate = this.onWillNavigate.bind(this);
   this.onNavigate = this.onNavigate.bind(this);
+  this.showGridHighlighter = this.showGridHighlighter.bind(this);
+  this.showShapesHighlighter = this.showShapesHighlighter.bind(this);
   this._handleRejection = this._handleRejection.bind(this);
+  this._onHighlighterEvent = this._onHighlighterEvent.bind(this);
 
   // Add inspector events, not specific to a given view.
   this.inspector.on("markupmutation", this.onMarkupMutation);
   this.inspector.target.on("navigate", this.onNavigate);
   this.inspector.target.on("will-navigate", this.onWillNavigate);
 
   EventEmitter.decorate(this);
 }
@@ -97,16 +106,136 @@ HighlightersOverlay.prototype = {
 
     let el = view.element;
     el.removeEventListener("click", this.onClick, true);
     el.removeEventListener("mousemove", this.onMouseMove);
     el.removeEventListener("mouseout", this.onMouseOut);
   },
 
   /**
+   * Toggle the shapes highlighter for the given element with a shape.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the element with a shape to highlight.
+   * @param  {Object} options
+   *         Object used for passing options to the shapes highlighter.
+   */
+  toggleShapesHighlighter: Task.async(function* (node, options = {}) {
+    if (node == this.shapesHighlighterShown &&
+        options.mode === this.state.shapes.options.mode) {
+      yield this.hideShapesHighlighter(node);
+      return;
+    }
+
+    yield this.showShapesHighlighter(node, options);
+  }),
+
+  /**
+   * Show the shapes highlighter for the given element with a shape.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the element with a shape to highlight.
+   * @param  {Object} options
+   *         Object used for passing options to the shapes highlighter.
+   */
+  showShapesHighlighter: Task.async(function* (node, options) {
+    let highlighter = yield this._getHighlighter("ShapesHighlighter");
+    if (!highlighter) {
+      return;
+    }
+
+    let isShown = yield highlighter.show(node, options);
+    if (!isShown) {
+      return;
+    }
+
+    this.shapesHighlighterShown = node;
+    let { mode } = options;
+    this._toggleRuleViewIcon(node, false, ".ruleview-shape");
+    this._toggleRuleViewIcon(node, true, `.ruleview-shape[data-mode='${mode}']`);
+
+    try {
+      // Save shapes highlighter state.
+      let { url } = this.inspector.target;
+      let selector = yield node.getUniqueSelector();
+      this.state.shapes = { selector, options, url };
+
+      this.shapesHighlighterShown = node;
+      this.emit("shapes-highlighter-shown", node, options);
+    } catch (e) {
+      this._handleRejection(e);
+    }
+  }),
+
+  /**
+   * Hide the shapes highlighter for the given element with a shape.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the element with a shape to unhighlight.
+   */
+  hideShapesHighlighter: Task.async(function* (node) {
+    if (!this.shapesHighlighterShown || !this.highlighters.ShapesHighlighter) {
+      return;
+    }
+
+    this._toggleRuleViewIcon(node, false, ".ruleview-shape");
+
+    yield this.highlighters.ShapesHighlighter.hide();
+    this.emit("shapes-highlighter-hidden", this.shapesHighlighterShown,
+      this.state.shapes.options);
+    this.shapesHighlighterShown = null;
+    this.state.shapes = {};
+  }),
+
+  /**
+   * Show the shapes highlighter for the given element, with the given point highlighted.
+   *
+   * @param {NodeFront} node
+   *        The NodeFront of the element to highlight.
+   * @param {String} point
+   *        The point to highlight in the shapes highlighter.
+   */
+  hoverPointShapesHighlighter: Task.async(function* (node, point) {
+    if (node == this.shapesHighlighterShown) {
+      let options = Object.assign({}, this.state.shapes.options);
+      options.hoverPoint = point;
+      yield this.showShapesHighlighter(node, options);
+    }
+  }),
+
+  /**
+   * Highlight the given shape point in the rule view.
+   *
+   * @param {String} point
+   *        The point to highlight.
+   */
+  highlightRuleViewShapePoint: function (point) {
+    let view = this.inspector.getPanel("ruleview").view;
+    let ruleViewEl = view.element;
+    let selector = `.ruleview-shape-point.active`;
+    for (let pointNode of ruleViewEl.querySelectorAll(selector)) {
+      this._toggleShapePointActive(pointNode, false);
+    }
+
+    if (point !== null && point !== undefined) {
+      // Because one inset value can represent multiple points, inset points use classes
+      // instead of data.
+      selector = (INSET_POINT_TYPES.includes(point)) ?
+                 `.ruleview-shape-point.${point}` :
+                 `.ruleview-shape-point[data-point='${point}']`;
+      for (let pointNode of ruleViewEl.querySelectorAll(selector)) {
+        let nodeInfo = view.getNodeInfo(pointNode);
+        if (this.isRuleViewShapePoint(nodeInfo)) {
+          this._toggleShapePointActive(pointNode, true);
+        }
+      }
+    }
+  },
+
+  /**
    * Toggle the grid highlighter for the given grid container element.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element to highlight.
    * @param  {Object} options
    *         Object used for passing options to the grid highlighter.
    * @param. {String|null} trigger
    *         String name matching "grid" or "rule" to indicate where the
@@ -136,17 +265,17 @@ HighlightersOverlay.prototype = {
       return;
     }
 
     let isShown = yield highlighter.show(node, options);
     if (!isShown) {
       return;
     }
 
-    this._toggleRuleViewGridIcon(node, true);
+    this._toggleRuleViewIcon(node, true, ".ruleview-grid");
 
     if (trigger == "grid") {
       Services.telemetry.scalarAdd("devtools.grid.gridinspector.opened", 1);
     } else if (trigger == "rule") {
       Services.telemetry.scalarAdd("devtools.rules.gridinspector.opened", 1);
     }
 
     try {
@@ -170,17 +299,17 @@ HighlightersOverlay.prototype = {
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element to unhighlight.
    */
   hideGridHighlighter: Task.async(function* (node) {
     if (!this.gridHighlighterShown || !this.highlighters.CssGridHighlighter) {
       return;
     }
 
-    this._toggleRuleViewGridIcon(node, false);
+    this._toggleRuleViewIcon(node, false, ".ruleview-grid");
 
     yield this.highlighters.CssGridHighlighter.hide();
 
     // Emit the NodeFront of the grid container element that the grid highlighter was
     // hidden for.
     this.emit("grid-highlighter-hidden", this.gridHighlighterShown,
       this.state.grid.options);
     this.gridHighlighterShown = null;
@@ -236,43 +365,67 @@ HighlightersOverlay.prototype = {
 
     yield this.highlighters.GeometryEditorHighlighter.hide();
 
     this.emit("geometry-editor-highlighter-hidden");
     this.geometryEditorHighlighterShown = null;
   }),
 
   /**
+   * Handle events emitted by the highlighter.
+   *
+   * @param {Object} data
+   *        The data object sent in the event.
+   */
+  _onHighlighterEvent: function (data) {
+    if (data.type === "shape-hover-on") {
+      this.state.shapes.hoverPoint = data.point;
+      this.emit("hover-shape-point", data.point);
+    } else if (data.type === "shape-hover-off") {
+      this.state.shapes.hoverPoint = null;
+      this.emit("hover-shape-point", null);
+    }
+    this.emit("highlighter-event-handled");
+  },
+
+  /**
    * Restore the saved highlighter states.
-   *
+   * @param {String} name
+   *        The name of the highlighter to be restored
+   * @param {Object} state
+   *        The state of the highlighter to be restored
+   * @param {Function} showFunction
+   *        The function that shows the highlighter
    * @return {Promise} that resolves when the highlighter state was restored, and the
-   *          expected highlighters are displayed.
+   *         expected highlighters are displayed.
    */
-  restoreState: Task.async(function* () {
-    let { selector, options, url } = this.state.grid;
-
+  restoreState: Task.async(function* (name, state, showFunction) {
+    let { selector, options, url } = state;
     if (!selector || url !== this.inspector.target.url) {
       // Bail out if no selector was saved, or if we are on a different page.
-      this.emit("state-restored", { restored: false });
+      this.emit(`${name}-state-restored`, { restored: false });
       return;
     }
 
     // Wait for the new root to be ready in the inspector.
     yield this.onInspectorNewRoot;
 
     let walker = this.inspector.walker;
     let rootNode = yield walker.getRootNode();
     let nodeFront = yield walker.querySelector(rootNode, selector);
 
     if (nodeFront) {
-      yield this.showGridHighlighter(nodeFront, options);
-      this.emit("state-restored", { restored: true });
+      if (options.hoverPoint) {
+        options.hoverPoint = null;
+      }
+      yield showFunction(nodeFront, options);
+      this.emit(`${name}-state-restored`, { restored: true });
     }
 
-    this.emit("state-restored", { restored: false });
+    this.emit(`${name}-state-restored`, { restored: false });
   }),
 
   /**
    * Get a highlighter front given a type. It will only be initialized once.
    *
    * @param  {String} type
    *         The highlighter type. One of this.highlighters.
    * @return {Promise} that resolves to the highlighter
@@ -291,48 +444,68 @@ HighlightersOverlay.prototype = {
     } catch (e) {
       // Ignore any error
     }
 
     if (!highlighter) {
       return null;
     }
 
+    highlighter.on("highlighter-event", this._onHighlighterEvent);
     this.highlighters[type] = highlighter;
     return highlighter;
   }),
 
   _handleRejection: function (error) {
     if (!this.destroyed) {
       console.error(error);
     }
   },
 
   /**
-   * Toggle all the grid icons in the rule view if the current inspector selection is the
-   * highlighted node.
+   * Toggle all the icons with the given selector in the rule view if the current
+   * inspector selection is the highlighted node.
    *
    * @param  {NodeFront} node
-   *         The NodeFront of the grid container element to highlight.
+   *         The NodeFront of the element with a shape to highlight.
    * @param  {Boolean} active
-   *         Whether or not the grid icon should be active.
+   *         Whether or not the shape icon should be active.
+   * @param  {String} selector
+   *         The selector of the rule view icon to toggle.
    */
-  _toggleRuleViewGridIcon: function (node, active) {
+  _toggleRuleViewIcon: function (node, active, selector) {
     if (this.inspector.selection.nodeFront != node) {
       return;
     }
 
     let ruleViewEl = this.inspector.getPanel("ruleview").view.element;
 
-    for (let gridIcon of ruleViewEl.querySelectorAll(".ruleview-grid")) {
-      gridIcon.classList.toggle("active", active);
+    for (let icon of ruleViewEl.querySelectorAll(selector)) {
+      icon.classList.toggle("active", active);
     }
   },
 
   /**
+   * Toggle the class "active" on the given shape point in the rule view if the current
+   * inspector selection is highlighted by the shapes highlighter.
+   *
+   * @param {NodeFront} node
+   *        The NodeFront of the shape point to toggle
+   * @param {Boolean} active
+   *        Whether the shape point should be active
+   */
+  _toggleShapePointActive: function (node, active) {
+    if (this.inspector.selection.nodeFront != this.shapesHighlighterShown) {
+      return;
+    }
+
+    node.classList.toggle("active", active);
+  },
+
+  /**
    * Hide the currently shown hovered highlighter.
    */
   _hideHoveredHighlighter: function () {
     if (!this.hoveredHighlighterShown ||
         !this.highlighters[this.hoveredHighlighterShown]) {
       return;
     }
 
@@ -369,46 +542,75 @@ HighlightersOverlay.prototype = {
    * @param  {DOMNode} node
    * @return {Boolean}
    */
   _isRuleViewDisplayGrid: function (node) {
     return this.isRuleView && node.classList.contains("ruleview-grid");
   },
 
   /**
+   * Does the current clicked node have the shapes highlighter toggle in the
+   * rule-view.
+   *
+   * @param  {DOMNode} node
+   * @return {Boolean}
+   */
+  _isRuleViewShape: function (node) {
+    return this.isRuleView && node.classList.contains("ruleview-shape");
+  },
+
+  /**
    * Is the current hovered node a css transform property value in the rule-view.
    *
    * @param  {Object} nodeInfo
    * @return {Boolean}
    */
   _isRuleViewTransform: function (nodeInfo) {
     let isTransform = nodeInfo.type === VIEW_NODE_VALUE_TYPE &&
                       nodeInfo.value.property === "transform";
     let isEnabled = nodeInfo.value.enabled &&
                     !nodeInfo.value.overridden &&
                     !nodeInfo.value.pseudoElement;
     return this.isRuleView && isTransform && isEnabled;
   },
 
-  onClick: function (event) {
-    // Bail out if the target is not a grid property value.
-    if (!this._isRuleViewDisplayGrid(event.target)) {
-      return;
-    }
-
-    event.stopPropagation();
+  /**
+   * Is the current hovered node a highlightable shape point in the rule-view.
+   *
+   * @param  {Object} nodeInfo
+   * @return {Boolean}
+   */
+  isRuleViewShapePoint: function (nodeInfo) {
+    let isShape = nodeInfo.type === VIEW_NODE_SHAPE_POINT_TYPE &&
+                  (nodeInfo.value.property === "clip-path" ||
+                  nodeInfo.value.property === "shape-outside");
+    let isEnabled = nodeInfo.value.enabled &&
+                    !nodeInfo.value.overridden &&
+                    !nodeInfo.value.pseudoElement;
+    return this.isRuleView && isShape && isEnabled && nodeInfo.value.toggleActive;
+  },
 
-    let { store } = this.inspector;
-    let { grids, highlighterSettings } = store.getState();
-    let grid = grids.find(g => g.nodeFront == this.inspector.selection.nodeFront);
+  onClick: function (event) {
+    if (this._isRuleViewDisplayGrid(event.target)) {
+      event.stopPropagation();
+
+      let { store } = this.inspector;
+      let { grids, highlighterSettings } = store.getState();
+      let grid = grids.find(g => g.nodeFront == this.inspector.selection.nodeFront);
 
-    highlighterSettings.color = grid ? grid.color : DEFAULT_GRID_COLOR;
+      highlighterSettings.color = grid ? grid.color : DEFAULT_GRID_COLOR;
 
-    this.toggleGridHighlighter(this.inspector.selection.nodeFront, highlighterSettings,
-      "rule");
+      this.toggleGridHighlighter(this.inspector.selection.nodeFront, highlighterSettings,
+        "rule");
+    } else if (this._isRuleViewShape(event.target)) {
+      event.stopPropagation();
+
+      let settings = { mode: event.target.dataset.mode };
+      this.toggleShapesHighlighter(this.inspector.selection.nodeFront, settings);
+    }
   },
 
   onMouseMove: function (event) {
     // Bail out if the target is the same as for the last mousemove.
     if (event.target === this._lastHovered) {
       return;
     }
 
@@ -420,16 +622,23 @@ HighlightersOverlay.prototype = {
     let view = this.isRuleView ?
       this.inspector.getPanel("ruleview").view :
       this.inspector.getPanel("computedview").computedView;
     let nodeInfo = view.getNodeInfo(event.target);
     if (!nodeInfo) {
       return;
     }
 
+    if (this.isRuleViewShapePoint(nodeInfo)) {
+      let { point } = nodeInfo.value;
+      this.hoverPointShapesHighlighter(this.inspector.selection.nodeFront, point);
+      this.emit("hover-shape-point", point);
+      return;
+    }
+
     // Choose the type of highlighter required for the hovered node.
     let type;
     if (this._isRuleViewTransform(nodeInfo) ||
         this._isComputedViewTransform(nodeInfo)) {
       type = "CssTransformHighlighter";
     }
 
     if (type) {
@@ -448,75 +657,103 @@ HighlightersOverlay.prototype = {
   onMouseOut: function (event) {
     // Only hide the highlighter if the mouse leaves the currently hovered node.
     if (!this._lastHovered ||
         (event && this._lastHovered.contains(event.relatedTarget))) {
       return;
     }
 
     // Otherwise, hide the highlighter.
+    let view = this.isRuleView ?
+      this.inspector.getPanel("ruleview").view :
+      this.inspector.getPanel("computedview").computedView;
+    let nodeInfo = view.getNodeInfo(this._lastHovered);
+    if (nodeInfo && this.isRuleViewShapePoint(nodeInfo)) {
+      this.hoverPointShapesHighlighter(this.inspector.selection.nodeFront, null);
+      this.emit("hover-shape-point", null);
+    }
     this._lastHovered = null;
     this._hideHoveredHighlighter();
   },
 
   /**
-   * Handler function for "markupmutation" events. Hides the grid highlighter if the grid
-   * container is no longer in the DOM tree.
+   * Handler function for "markupmutation" events. Hides the grid/shapes highlighter
+   * if the grid/shapes container is no longer in the DOM tree.
    */
   onMarkupMutation: Task.async(function* (evt, mutations) {
     let hasInterestingMutation = mutations.some(mut => mut.type === "childList");
-    if (!hasInterestingMutation || !this.gridHighlighterShown) {
+    if (!hasInterestingMutation) {
       // Bail out if the mutations did not remove nodes, or if no grid highlighter is
       // displayed.
       return;
     }
 
-    let nodeFront = this.gridHighlighterShown;
+    if (this.gridHighlighterShown) {
+      let nodeFront = this.gridHighlighterShown;
 
-    try {
-      let isInTree = yield this.inspector.walker.isInDOMTree(nodeFront);
-      if (!isInTree) {
-        this.hideGridHighlighter(nodeFront);
+      try {
+        let isInTree = yield this.inspector.walker.isInDOMTree(nodeFront);
+        if (!isInTree) {
+          this.hideGridHighlighter(nodeFront);
+        }
+      } catch (e) {
+        console.error(e);
       }
-    } catch (e) {
-      console.error(e);
+    }
+
+    if (this.shapesHighlighterShown) {
+      let nodeFront = this.shapesHighlighterShown;
+
+      try {
+        let isInTree = yield this.inspector.walker.isInDOMTree(nodeFront);
+        if (!isInTree) {
+          this.hideShapesHighlighter(nodeFront);
+        }
+      } catch (e) {
+        console.error(e);
+      }
     }
   }),
 
   /**
    * Restore saved highlighter state after navigate.
    */
   onNavigate: Task.async(function* () {
     try {
-      yield this.restoreState();
+      yield this.restoreState("grid", this.state.grid, this.showGridHighlighter);
+      yield this.restoreState("shapes", this.state.shapes, this.showShapesHighlighter);
     } catch (e) {
       this._handleRejection(e);
     }
   }),
 
   /**
    * Clear saved highlighter shown properties on will-navigate.
    */
   onWillNavigate: function () {
     this.geometryEditorHighlighterShown = null;
     this.gridHighlighterShown = null;
     this.hoveredHighlighterShown = null;
     this.selectorHighlighterShown = null;
+    this.shapesHighlighterShown = null;
 
     // The inspector panel should emit the new-root event when it is ready after navigate.
     this.onInspectorNewRoot = this.inspector.once("new-root");
   },
 
   /**
    * Destroy this overlay instance, removing it from the view and destroying
    * all initialized highlighters.
    */
   destroy: function () {
     for (let type in this.highlighters) {
       if (this.highlighters[type]) {
+        if (this.highlighters[type].off) {
+          this.highlighters[type].off("highlighter-event", this._onHighlighterEvent);
+        }
         this.highlighters[type].finalize();
         this.highlighters[type] = null;
       }
     }
 
     // Remove inspector events.
     this.inspector.off("markupmutation", this.onMarkupMutation);
     this.inspector.target.off("navigate", this.onNavigate);
@@ -529,14 +766,15 @@ HighlightersOverlay.prototype = {
     this.highlighterUtils = null;
     this.supportsHighlighters = null;
     this.state = null;
 
     this.geometryEditorHighlighterShown = null;
     this.gridHighlighterShown = null;
     this.hoveredHighlighterShown = null;
     this.selectorHighlighterShown = null;
+    this.shapesHighlighterShown = null;
 
     this.destroyed = true;
   }
 };
 
 module.exports = HighlightersOverlay;

--- a/devtools/client/inspector/shared/node-types.js
+++ b/devtools/client/inspector/shared/node-types.js
@@ -10,8 +10,9 @@
  * Types of nodes used in the rule and omputed view.
  */
 
 exports.VIEW_NODE_SELECTOR_TYPE = 1;
 exports.VIEW_NODE_PROPERTY_TYPE = 2;
 exports.VIEW_NODE_VALUE_TYPE = 3;
 exports.VIEW_NODE_IMAGE_URL_TYPE = 4;
 exports.VIEW_NODE_LOCATION_TYPE = 5;
+exports.VIEW_NODE_SHAPE_POINT_TYPE = 6;

--- a/devtools/client/inspector/test/browser.ini
+++ b/devtools/client/inspector/test/browser.ini
@@ -74,16 +74,17 @@ skip-if = os == "mac" # Full keyboard na
 [browser_inspector_highlighter-cancel.js]
 [browser_inspector_highlighter-comments.js]
 [browser_inspector_highlighter-cssgrid_01.js]
 [browser_inspector_highlighter-cssgrid_02.js]
 [browser_inspector_highlighter-cssshape_01.js]
 [browser_inspector_highlighter-cssshape_02.js]
 [browser_inspector_highlighter-cssshape_03.js]
 [browser_inspector_highlighter-cssshape_04.js]
+[browser_inspector_highlighter-cssshape_05.js]
 [browser_inspector_highlighter-csstransform_01.js]
 [browser_inspector_highlighter-csstransform_02.js]
 [browser_inspector_highlighter-embed.js]
 [browser_inspector_highlighter-eyedropper-clipboard.js]
 subsuite = clipboard
 skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32 debug devtools for timeouts
 [browser_inspector_highlighter-eyedropper-csp.js]
 [browser_inspector_highlighter-eyedropper-events.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js
@@ -0,0 +1,110 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test hovering over shape points in the rule-view and shapes highlighter.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+const CSS_SHAPES_ENABLED_PREF = "devtools.inspector.shapesHighlighter.enabled";
+
+add_task(function* () {
+  yield pushPref(CSS_SHAPES_ENABLED_PREF, true);
+  let env = yield openInspectorForURL(TEST_URL);
+  let helper = yield getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
+  let { testActor, inspector } = env;
+  let view = selectRuleView(inspector);
+  let highlighters = view.highlighters;
+
+  yield highlightFromRuleView(inspector, view, highlighters, testActor);
+  yield highlightFromHighlighter(view, highlighters, testActor, helper);
+});
+
+function* highlightFromRuleView(inspector, view, highlighters, testActor) {
+  yield selectNode("#polygon", inspector);
+  yield toggleShapesHighlighter(view, highlighters, "#polygon", "clip-path", true);
+  let container = getRuleViewProperty(view, "#polygon", "clip-path").valueSpan;
+  let shapesToggle = container.querySelector(".ruleview-shape");
+
+  let highlighterFront = highlighters.highlighters[HIGHLIGHTER_TYPE];
+  let markerHidden = yield testActor.getHighlighterNodeAttribute(
+    "shapes-marker-hover", "hidden", highlighterFront);
+  ok(markerHidden, "Hover marker on highlighter is not visible");
+
+  info("Hover over point 0 in rule view");
+  let pointSpan = container.querySelector(".ruleview-shape-point[data-point='0']");
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  EventUtils.synthesizeMouseAtCenter(pointSpan, {type: "mousemove"}, view.styleWindow);
+  yield onHighlighterShown;
+
+  ok(pointSpan.classList.contains("active"), "Hovered span is active");
+  is(highlighters.state.shapes.options.hoverPoint, "0",
+     "Hovered point is saved to state");
+
+  markerHidden = yield testActor.getHighlighterNodeAttribute(
+    "shapes-marker-hover", "hidden", highlighterFront);
+  ok(!markerHidden, "Marker on highlighter is visible");
+
+  info("Move mouse off point");
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  EventUtils.synthesizeMouseAtCenter(shapesToggle, {type: "mousemove"}, view.styleWindow);
+  yield onHighlighterShown;
+
+  ok(!pointSpan.classList.contains("active"), "Hovered span is no longer active");
+  is(highlighters.state.shapes.options.hoverPoint, null, "Hovered point is null");
+
+  markerHidden = yield testActor.getHighlighterNodeAttribute(
+    "shapes-marker-hover", "hidden", highlighterFront);
+  ok(markerHidden, "Marker on highlighter is not visible");
+
+  info("Hide shapes highlighter");
+  yield toggleShapesHighlighter(view, highlighters, "#polygon", "clip-path", false);
+}
+
+function* highlightFromHighlighter(view, highlighters, testActor, helper) {
+  let highlighterFront = highlighters.highlighters[HIGHLIGHTER_TYPE];
+  let { mouse } = helper;
+
+  yield toggleShapesHighlighter(view, highlighters, "#polygon", "clip-path", true);
+  let container = getRuleViewProperty(view, "#polygon", "clip-path").valueSpan;
+
+  info("Hover over first point in highlighter");
+  let onEventHandled = highlighters.once("highlighter-event-handled");
+  yield mouse.move(0, 0);
+  yield onEventHandled;
+  let markerHidden = yield testActor.getHighlighterNodeAttribute(
+    "shapes-marker-hover", "hidden", highlighterFront);
+  ok(!markerHidden, "Marker on highlighter is visible");
+
+  let pointSpan = container.querySelector(".ruleview-shape-point[data-point='0']");
+  ok(pointSpan.classList.contains("active"), "Span for point 0 is active");
+  is(highlighters.state.shapes.hoverPoint, "0", "Hovered point is saved to state");
+
+  info("Check that point is still highlighted after moving it");
+  yield mouse.down(0, 0);
+  yield mouse.move(10, 10);
+  yield mouse.up(10, 10);
+  markerHidden = yield testActor.getHighlighterNodeAttribute(
+    "shapes-marker-hover", "hidden", highlighterFront);
+  ok(!markerHidden, "Marker on highlighter is visible after moving point");
+
+  container = getRuleViewProperty(view, "element", "clip-path").valueSpan;
+  pointSpan = container.querySelector(".ruleview-shape-point[data-point='0']");
+  ok(pointSpan.classList.contains("active"),
+     "Span for point 0 is active after moving point");
+  is(highlighters.state.shapes.hoverPoint, "0",
+     "Hovered point is saved to state after moving point");
+
+  info("Move mouse off point");
+  onEventHandled = highlighters.once("highlighter-event-handled");
+  yield mouse.move(100, 100);
+  yield onEventHandled;
+  markerHidden = yield testActor.getHighlighterNodeAttribute(
+    "shapes-marker-hover", "hidden", highlighterFront);
+  ok(markerHidden, "Marker on highlighter is no longer visible");
+  ok(!pointSpan.classList.contains("active"), "Span for point 0 is no longer active");
+  is(highlighters.state.shapes.hoverPoint, null, "Hovered point is null");
+}

--- a/devtools/client/inspector/test/head.js
+++ b/devtools/client/inspector/test/head.js
@@ -798,8 +798,38 @@ function* getDisplayedNodeTextContent(se
   yield inspector.markup.expandNode(container.node);
   yield waitForMultipleChildrenUpdates(inspector);
   if (container) {
     let textContainer = container.elt.querySelector("pre");
     return textContainer.textContent;
   }
   return null;
 }
+
+/**
+ * Toggle the shapes highlighter by simulating a click on the toggle
+ * in the rules view with the given selector and property
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {Object} highlighters
+ *        The highlighters instance of the rule-view panel
+ * @param {String} selector
+ *        The selector in the rule-view to look for the property in
+ * @param {String} property
+ *        The name of the property
+ * @param {Boolean} show
+ *        If true, the shapes highlighter is being shown. If false, it is being hidden
+ */
+function* toggleShapesHighlighter(view, highlighters, selector, property, show) {
+  info("Toggle shapes highlighter");
+  let container = getRuleViewProperty(view, selector, property).valueSpan;
+  let shapesToggle = container.querySelector(".ruleview-shape");
+  if (show) {
+    let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+    shapesToggle.click();
+    yield onHighlighterShown;
+  } else {
+    let onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+    shapesToggle.click();
+    yield onHighlighterHidden;
+  }
+}

--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -59,16 +59,18 @@ pref("devtools.inspector.imagePreviewToo
 // Enable user agent style inspection in rule-view
 pref("devtools.inspector.showUserAgentStyles", false);
 // Show all native anonymous content (like controls in <video> tags)
 pref("devtools.inspector.showAllAnonymousContent", false);
 // Enable the MDN docs tooltip
 pref("devtools.inspector.mdnDocsTooltip.enabled", false);
 // Enable the new color widget
 pref("devtools.inspector.colorWidget.enabled", false);
+// Enable the CSS shapes highlighter
+pref("devtools.inspector.shapesHighlighter.enabled", false);
 
 // Enable the Font Inspector
 pref("devtools.fontinspector.enabled", true);
 
 // Counter to promote the inspector layout view.
 // @remove after release 56 (See Bug 1355747)
 pref("devtools.promote.layoutview", 1);
 // Whether or not to show the promote bar in the layout view

--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -5,24 +5,27 @@
 "use strict";
 
 const {angleUtils} = require("devtools/client/shared/css-angle");
 const {colorUtils} = require("devtools/shared/css/color");
 const {getCSSLexer} = require("devtools/shared/css/lexer");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {
   ANGLE_TAKING_FUNCTIONS,
+  BASIC_SHAPE_FUNCTIONS,
   BEZIER_KEYWORDS,
   COLOR_TAKING_FUNCTIONS,
   CSS_TYPES
 } = require("devtools/shared/css/properties-db");
+const {appendText} = require("devtools/client/inspector/shared/utils");
 const Services = require("Services");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const CSS_GRID_ENABLED_PREF = "layout.css.grid.enabled";
+const CSS_SHAPES_ENABLED_PREF = "devtools.inspector.shapesHighlighter.enabled";
 
 /**
  * This module is used to process text for output by developer tools. This means
  * linking JS files with the debugger, CSS files with the style editor, JS
  * functions with the debugger, placing color swatches next to colors and
  * adding doorhanger previews where possible (images, angles, lengths,
  * border radius, cubic-bezier etc.).
  *
@@ -72,16 +75,17 @@ OutputParser.prototype = {
    *         A document fragment containing color swatches etc.
    */
   parseCssProperty: function (name, value, options = {}) {
     options = this._mergeOptions(options);
 
     options.expectCubicBezier = this.supportsType(name, CSS_TYPES.TIMING_FUNCTION);
     options.expectDisplay = name === "display";
     options.expectFilter = name === "filter";
+    options.expectShape = name === "clip-path" || name === "shape-outside";
     options.supportsColor = this.supportsType(name, CSS_TYPES.COLOR) ||
                             this.supportsType(name, CSS_TYPES.GRADIENT);
 
     // The filter property is special in that we want to show the
     // swatch even if the value is invalid, because this way the user
     // can easily use the editor to fix it.
     if (options.expectFilter || this._cssPropertySupportsValue(name, value)) {
       return this._parse(value, options);
@@ -157,24 +161,22 @@ OutputParser.prototype = {
          outerMostFunctionTakesColor);
     };
 
     let angleOK = function (angle) {
       return (new angleUtils.CssAngle(angle)).valid;
     };
 
     let spaceNeeded = false;
-    while (true) {
-      let token = tokenStream.nextToken();
-      if (!token) {
-        break;
-      }
+    let token = tokenStream.nextToken();
+    while (token) {
       if (token.tokenType === "comment") {
         // This doesn't change spaceNeeded, because we didn't emit
         // anything to the output.
+        token = tokenStream.nextToken();
         continue;
       }
 
       switch (token.tokenType) {
         case "function": {
           if (COLOR_TAKING_FUNCTIONS.includes(token.text) ||
               ANGLE_TAKING_FUNCTIONS.includes(token.text)) {
             // The function can accept a color or an angle argument, and we know
@@ -192,16 +194,20 @@ OutputParser.prototype = {
             let functionText = this._collectFunctionText(token, text,
                                                          tokenStream);
 
             if (options.expectCubicBezier && token.text === "cubic-bezier") {
               this._appendCubicBezier(functionText, options);
             } else if (colorOK() &&
                        colorUtils.isValidCSSColor(functionText, this.cssColor4)) {
               this._appendColor(functionText, options);
+            } else if (options.expectShape &&
+                       Services.prefs.getBoolPref(CSS_SHAPES_ENABLED_PREF) &&
+                       BASIC_SHAPE_FUNCTIONS.includes(token.text)) {
+              this._appendShape(functionText, options);
             } else {
               this._appendTextNode(functionText);
             }
           }
           break;
         }
 
         case "ident":
@@ -268,16 +274,18 @@ OutputParser.prototype = {
       }
 
       // If this token might possibly introduce token pasting when
       // color-cycling, require a space.
       spaceNeeded = (token.tokenType === "ident" || token.tokenType === "at" ||
                      token.tokenType === "id" || token.tokenType === "hash" ||
                      token.tokenType === "number" || token.tokenType === "dimension" ||
                      token.tokenType === "percentage" || token.tokenType === "dimension");
+
+      token = tokenStream.nextToken();
     }
 
     let result = this._toDOM();
 
     if (options.expectFilter && !options.filterSwatch) {
       result = this._wrapFilter(text, options, result);
     }
 
@@ -349,16 +357,548 @@ OutputParser.prototype = {
     value.textContent = grid;
 
     container.appendChild(toggle);
     container.appendChild(value);
     this.parsed.push(container);
   },
 
   /**
+   * Append a CSS shapes highlighter toggle next to the value, and parse the value
+   * into spans, each containing a point that can be hovered over.
+   *
+   * @param {String} shape
+   *        The shape text value to append
+   * @param {Object} options
+   *        Options object. For valid options and default values see
+   *        _mergeOptions()
+   */
+  _appendShape: function (shape, options) {
+    const shapeTypes = [{
+      prefix: "polygon(",
+      coordParser: this._addPolygonPointNodes.bind(this)
+    }, {
+      prefix: "circle(",
+      coordParser: this._addCirclePointNodes.bind(this)
+    }, {
+      prefix: "ellipse(",
+      coordParser: this._addEllipsePointNodes.bind(this)
+    }, {
+      prefix: "inset(",
+      coordParser: this._addInsetPointNodes.bind(this)
+    }];
+
+    let container = this._createNode("span", {});
+
+    let toggle = this._createNode("span", {
+      class: options.shapeClass
+    });
+
+    for (let { prefix, coordParser } of shapeTypes) {
+      if (shape.includes(prefix)) {
+        let coordsBegin = prefix.length;
+        let coordsEnd = shape.lastIndexOf(")");
+        let valContainer = this._createNode("span", {});
+
+        container.appendChild(toggle);
+
+        appendText(valContainer, shape.substring(0, coordsBegin));
+
+        let coordsString = shape.substring(coordsBegin, coordsEnd);
+        valContainer = coordParser(coordsString, valContainer);
+
+        appendText(valContainer, shape.substring(coordsEnd));
+        container.appendChild(valContainer);
+      }
+    }
+
+    this.parsed.push(container);
+  },
+
+  /**
+   * Parse the given polygon coordinates and create a span for each coordinate pair,
+   * adding it to the given container node.
+   *
+   * @param {String} coords
+   *        The string of coordinate pairs.
+   * @param {Node} container
+   *        The node to which spans containing points are added.
+   * @returns {Node} The container to which spans have been added.
+   */
+  _addPolygonPointNodes: function (coords, container) {
+    let tokenStream = getCSSLexer(coords);
+    let token = tokenStream.nextToken();
+    let coord = "";
+    let i = 0;
+    let depth = 0;
+    let isXCoord = true;
+    let fillRule = false;
+    let coordNode = this._createNode("span", {
+      class: "ruleview-shape-point",
+      "data-point": `${i}`,
+    });
+
+    while (token) {
+      if (token.tokenType === "symbol" && token.text === ",") {
+        // Comma separating coordinate pairs; add coordNode to container and reset vars
+        if (!isXCoord) {
+          // Y coord not added to coordNode yet
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+            "data-point": `${i}`,
+            "data-pair": (isXCoord) ? "x" : "y"
+          }, coord);
+          coordNode.appendChild(node);
+          coord = "";
+          isXCoord = !isXCoord;
+        }
+
+        if (fillRule) {
+          // If the last text added was a fill-rule, do not increment i.
+          fillRule = false;
+        } else {
+          container.appendChild(coordNode);
+          i++;
+        }
+        appendText(container, coords.substring(token.startOffset, token.endOffset));
+        coord = "";
+        depth = 0;
+        isXCoord = true;
+        coordNode = this._createNode("span", {
+          class: "ruleview-shape-point",
+          "data-point": `${i}`,
+        });
+      } else if (token.tokenType === "symbol" && token.text === "(") {
+        depth++;
+        coord += coords.substring(token.startOffset, token.endOffset);
+      } else if (token.tokenType === "symbol" && token.text === ")") {
+        depth--;
+        coord += coords.substring(token.startOffset, token.endOffset);
+      } else if (token.tokenType === "whitespace" && coord === "") {
+        // Whitespace at beginning of coord; add to container
+        appendText(container, coords.substring(token.startOffset, token.endOffset));
+      } else if (token.tokenType === "whitespace" && depth === 0) {
+        // Whitespace signifying end of coord
+        let node = this._createNode("span", {
+          class: "ruleview-shape-point",
+          "data-point": `${i}`,
+          "data-pair": (isXCoord) ? "x" : "y"
+        }, coord);
+        coordNode.appendChild(node);
+        appendText(coordNode, coords.substring(token.startOffset, token.endOffset));
+        coord = "";
+        isXCoord = !isXCoord;
+      } else if ((token.tokenType === "number" || token.tokenType === "dimension" ||
+                  token.tokenType === "percentage" || token.tokenType === "function")) {
+        if (isXCoord && coord && depth === 0) {
+          // Whitespace is not necessary between x/y coords.
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+            "data-point": `${i}`,
+            "data-pair": "x"
+          }, coord);
+          coordNode.appendChild(node);
+          isXCoord = false;
+          coord = "";
+        }
+
+        coord += coords.substring(token.startOffset, token.endOffset);
+        if (token.tokenType === "function") {
+          depth++;
+        }
+      } else if (token.tokenType === "ident" &&
+                 (token.text === "nonzero" || token.text === "evenodd")) {
+        // A fill-rule (nonzero or evenodd).
+        appendText(container, coords.substring(token.startOffset, token.endOffset));
+        fillRule = true;
+      } else {
+        coord += coords.substring(token.startOffset, token.endOffset);
+      }
+      token = tokenStream.nextToken();
+    }
+
+    // Add coords if any are left over
+    if (coord) {
+      let node = this._createNode("span", {
+        class: "ruleview-shape-point",
+        "data-point": `${i}`,
+        "data-pair": (isXCoord) ? "x" : "y"
+      }, coord);
+      coordNode.appendChild(node);
+      container.appendChild(coordNode);
+    }
+    return container;
+  },
+
+  /**
+   * Parse the given circle coordinates and populate the given container appropriately
+   * with a separate span for the center point.
+   *
+   * @param {String} coords
+   *        The circle definition.
+   * @param {Node} container
+   *        The node to which the definition is added.
+   * @returns {Node} The container to which the definition has been added.
+   */
+  _addCirclePointNodes: function (coords, container) {
+    let tokenStream = getCSSLexer(coords);
+    let token = tokenStream.nextToken();
+    let depth = 0;
+    let coord = "";
+    let point = "radius";
+    let centerNode = this._createNode("span", {
+      class: "ruleview-shape-point",
+      "data-point": "center"
+    });
+    while (token) {
+      if (token.tokenType === "symbol" && token.text === "(") {
+        depth++;
+        coord += coords.substring(token.startOffset, token.endOffset);
+      } else if (token.tokenType === "symbol" && token.text === ")") {
+        depth--;
+        coord += coords.substring(token.startOffset, token.endOffset);
+      } else if (token.tokenType === "whitespace" && coord === "") {
+        // Whitespace at beginning of coord; add to container
+        appendText(container, coords.substring(token.startOffset, token.endOffset));
+      } else if (token.tokenType === "whitespace" && point === "radius" && depth === 0) {
+        // Whitespace signifying end of radius
+        let node = this._createNode("span", {
+          class: "ruleview-shape-point",
+          "data-point": "radius"
+        }, coord);
+        container.appendChild(node);
+        appendText(container, coords.substring(token.startOffset, token.endOffset));
+        point = "cx";
+        coord = "";
+        depth = 0;
+      } else if (token.tokenType === "whitespace" && depth === 0) {
+        // Whitespace signifying end of cx/cy
+        let node = this._createNode("span", {
+          class: "ruleview-shape-point",
+          "data-point": "center",
+          "data-pair": (point === "cx") ? "x" : "y"
+        }, coord);
+        centerNode.appendChild(node);
+        appendText(centerNode, coords.substring(token.startOffset, token.endOffset));
+        point = (point === "cx") ? "cy" : "cx";
+        coord = "";
+        depth = 0;
+      } else if (token.tokenType === "ident" && token.text === "at") {
+        // "at"; Add radius to container if not already done so
+        if (point === "radius" && coord) {
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+            "data-point": "radius"
+          }, coord);
+          container.appendChild(node);
+        }
+        appendText(container, coords.substring(token.startOffset, token.endOffset));
+        point = "cx";
+        coord = "";
+        depth = 0;
+      } else if ((token.tokenType === "number" || token.tokenType === "dimension" ||
+                  token.tokenType === "percentage" || token.tokenType === "function")) {
+        if (point === "cx" && coord && depth === 0) {
+          // Center coords don't require whitespace between x/y. So if current point is
+          // cx, we have the cx coord, and depth is 0, then this token is actually cy.
+          // Add cx to centerNode and set point to cy.
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+            "data-point": "center",
+            "data-pair": "x"
+          }, coord);
+          centerNode.appendChild(node);
+          point = "cy";
+          coord = "";
+        }
+
+        coord += coords.substring(token.startOffset, token.endOffset);
+        if (token.tokenType === "function") {
+          depth++;
+        }
+      } else {
+        coord += coords.substring(token.startOffset, token.endOffset);
+      }
+      token = tokenStream.nextToken();
+    }
+
+    // Add coords if any are left over.
+    if (coord) {
+      if (point === "radius") {
+        let node = this._createNode("span", {
+          class: "ruleview-shape-point",
+          "data-point": "radius"
+        }, coord);
+        container.appendChild(node);
+      } else {
+        let node = this._createNode("span", {
+          class: "ruleview-shape-point",
+          "data-point": "center",
+          "data-pair": (point === "cx") ? "x" : "y"
+        }, coord);
+        centerNode.appendChild(node);
+      }
+    }
+
+    if (centerNode.textContent) {
+      container.appendChild(centerNode);
+    }
+    return container;
+  },
+
+  /**
+   * Parse the given ellipse coordinates and populate the given container appropriately
+   * with a separate span for each point
+   *
+   * @param {String} coords
+   *        The ellipse definition.
+   * @param {Node} container
+   *        The node to which the definition is added.
+   * @returns {Node} The container to which the definition has been added.
+   */
+  _addEllipsePointNodes: function (coords, container) {
+    let tokenStream = getCSSLexer(coords);
+    let token = tokenStream.nextToken();
+    let depth = 0;
+    let coord = "";
+    let point = "rx";
+    let centerNode = this._createNode("span", {
+      class: "ruleview-shape-point",
+      "data-point": "center"
+    });
+    while (token) {
+      if (token.tokenType === "symbol" && token.text === "(") {
+        depth++;
+        coord += coords.substring(token.startOffset, token.endOffset);
+      } else if (token.tokenType === "symbol" && token.text === ")") {
+        depth--;
+        coord += coords.substring(token.startOffset, token.endOffset);
+      } else if (token.tokenType === "whitespace" && coord === "") {
+        // Whitespace at beginning of coord; add to container
+        appendText(container, coords.substring(token.startOffset, token.endOffset));
+      } else if (token.tokenType === "whitespace" && depth === 0) {
+        if (point === "rx" || point === "ry") {
+          // Whitespace signifying end of rx/ry
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+            "data-point": point,
+          }, coord);
+          container.appendChild(node);
+          appendText(container, coords.substring(token.startOffset, token.endOffset));
+          point = (point === "rx") ? "ry" : "cx";
+          coord = "";
+          depth = 0;
+        } else {
+          // Whitespace signifying end of cx/cy
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+            "data-point": "center",
+            "data-pair": (point === "cx") ? "x" : "y"
+          }, coord);
+          centerNode.appendChild(node);
+          appendText(centerNode, coords.substring(token.startOffset, token.endOffset));
+          point = (point === "cx") ? "cy" : "cx";
+          coord = "";
+          depth = 0;
+        }
+      } else if (token.tokenType === "ident" && token.text === "at") {
+        // "at"; Add radius to container if not already done so
+        if (point === "ry" && coord) {
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+            "data-point": "ry"
+          }, coord);
+          container.appendChild(node);
+        }
+        appendText(container, coords.substring(token.startOffset, token.endOffset));
+        point = "cx";
+        coord = "";
+        depth = 0;
+      } else if ((token.tokenType === "number" || token.tokenType === "dimension" ||
+                  token.tokenType === "percentage" || token.tokenType === "function")) {
+        if (point === "rx" && coord && depth === 0) {
+          // Radius coords don't require whitespace between x/y.
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+            "data-point": "rx",
+          }, coord);
+          container.appendChild(node);
+          point = "ry";
+          coord = "";
+        }
+        if (point === "cx" && coord && depth === 0) {
+          // Center coords don't require whitespace between x/y.
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+            "data-point": "center",
+            "data-pair": "x"
+          }, coord);
+          centerNode.appendChild(node);
+          point = "cy";
+          coord = "";
+        }
+
+        coord += coords.substring(token.startOffset, token.endOffset);
+        if (token.tokenType === "function") {
+          depth++;
+        }
+      } else {
+        coord += coords.substring(token.startOffset, token.endOffset);
+      }
+      token = tokenStream.nextToken();
+    }
+
+    // Add coords if any are left over.
+    if (coord) {
+      if (point === "rx" || point === "ry") {
+        let node = this._createNode("span", {
+          class: "ruleview-shape-point",
+          "data-point": point
+        }, coord);
+        container.appendChild(node);
+      } else {
+        let node = this._createNode("span", {
+          class: "ruleview-shape-point",
+          "data-point": "center",
+          "data-pair": (point === "cx") ? "x" : "y"
+        }, coord);
+        centerNode.appendChild(node);
+      }
+    }
+
+    if (centerNode.textContent) {
+      container.appendChild(centerNode);
+    }
+    return container;
+  },
+
+  /**
+   * Parse the given inset coordinates and populate the given container appropriately.
+   *
+   * @param {String} coords
+   *        The inset definition.
+   * @param {Node} container
+   *        The node to which the definition is added.
+   * @returns {Node} The container to which the definition has been added.
+   */
+  _addInsetPointNodes: function (coords, container) {
+    const insetPoints = ["top", "right", "bottom", "left"];
+    let tokenStream = getCSSLexer(coords);
+    let token = tokenStream.nextToken();
+    let depth = 0;
+    let coord = "";
+    let i = 0;
+    let round = false;
+    // nodes is an array containing all the coordinate spans. otherText is an array of
+    // arrays, each containing the text that should be inserted into container before
+    // the node with the same index. i.e. all elements of otherText[i] is inserted
+    // into container before nodes[i].
+    let nodes = [];
+    let otherText = [[]];
+
+    while (token) {
+      if (round) {
+        // Everything that comes after "round" should just be plain text
+        otherText[i].push(coords.substring(token.startOffset, token.endOffset));
+      } else if (token.tokenType === "symbol" && token.text === "(") {
+        depth++;
+        coord += coords.substring(token.startOffset, token.endOffset);
+      } else if (token.tokenType === "symbol" && token.text === ")") {
+        depth--;
+        coord += coords.substring(token.startOffset, token.endOffset);
+      } else if (token.tokenType === "whitespace" && coord === "") {
+        // Whitespace at beginning of coord; add to container
+        otherText[i].push(coords.substring(token.startOffset, token.endOffset));
+      } else if (token.tokenType === "whitespace" && depth === 0) {
+        // Whitespace signifying end of coord; create node and push to nodes
+        let node = this._createNode("span", {
+          class: "ruleview-shape-point"
+        }, coord);
+        nodes.push(node);
+        i++;
+        coord = "";
+        otherText[i] = [coords.substring(token.startOffset, token.endOffset)];
+        depth = 0;
+      } else if ((token.tokenType === "number" || token.tokenType === "dimension" ||
+                  token.tokenType === "percentage" || token.tokenType === "function")) {
+        if (coord && depth === 0) {
+          // Inset coords don't require whitespace between each coord.
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+          }, coord);
+          nodes.push(node);
+          i++;
+          coord = "";
+          otherText[i] = [];
+        }
+
+        coord += coords.substring(token.startOffset, token.endOffset);
+        if (token.tokenType === "function") {
+          depth++;
+        }
+      } else if (token.tokenType === "ident" && token.text === "round") {
+        if (coord && depth === 0) {
+          // Whitespace is not necessary before "round"; create a new node for the coord
+          let node = this._createNode("span", {
+            class: "ruleview-shape-point",
+          }, coord);
+          nodes.push(node);
+          i++;
+          coord = "";
+          otherText[i] = [];
+        }
+        round = true;
+        otherText[i].push(coords.substring(token.startOffset, token.endOffset));
+      } else {
+        coord += coords.substring(token.startOffset, token.endOffset);
+      }
+      token = tokenStream.nextToken();
+    }
+
+    // Take care of any leftover text
+    if (coord) {
+      if (round) {
+        otherText[i].push(coord);
+      } else {
+        let node = this._createNode("span", {
+          class: "ruleview-shape-point",
+        }, coord);
+        nodes.push(node);
+      }
+    }
+
+    // insetPoints contains the 4 different possible inset points in the order they are
+    // defined. By taking the modulo of the index in insetPoints with the number of nodes,
+    // we can get which node represents each point (e.g. if there is only 1 node, it
+    // represents all 4 points). The exception is "left" when there are 3 nodes. In that
+    // case, it is nodes[1] that represents the left point rather than nodes[0].
+    for (let j = 0; j < 4; j++) {
+      let point = insetPoints[j];
+      let nodeIndex = (point === "left" && nodes.length === 3) ? 1 : j % nodes.length;
+      nodes[nodeIndex].classList.add(point);
+    }
+
+    nodes.forEach((node, j, array) => {
+      for (let text of otherText[j]) {
+        appendText(container, text);
+      }
+      container.appendChild(node);
+    });
+
+    // Add text that comes after the last node, if any exists
+    if (otherText[nodes.length]) {
+      for (let text of otherText[nodes.length]) {
+        appendText(container, text);
+      }
+    }
+
+    return container;
+  },
+
+  /**
    * Append a angle value to the output
    *
    * @param {String} angle
    *        angle to append
    * @param {Object} options
    *        Options object. For valid options and default values see
    *        _mergeOptions()
    */
@@ -692,16 +1232,17 @@ OutputParser.prototype = {
    *                                    // that follows the swatch.
    *           - colorSwatchClass: ""   // The class to use for color swatches.
    *           - filterSwatch: false    // A special case for parsing a
    *                                    // "filter" property, causing the
    *                                    // parser to skip the call to
    *                                    // _wrapFilter.  Used only for
    *                                    // previewing with the filter swatch.
    *           - gridClass: ""          // The class to use for the grid icon.
+   *           - shapeClass: ""         // The class to use for the shape icon.
    *           - supportsColor: false   // Does the CSS property support colors?
    *           - urlClass: ""           // The class to be used for url() links.
    *           - baseURI: undefined     // A string used to resolve
    *                                    // relative links.
    * @return {Object}
    *         Overridden options object
    */
   _mergeOptions: function (overrides) {
@@ -710,16 +1251,17 @@ OutputParser.prototype = {
       angleClass: "",
       angleSwatchClass: "",
       bezierClass: "",
       bezierSwatchClass: "",
       colorClass: "",
       colorSwatchClass: "",
       filterSwatch: false,
       gridClass: "",
+      shapeClass: "",
       supportsColor: false,
       urlClass: "",
       baseURI: undefined,
     };
 
     for (let item in overrides) {
       defaults[item] = overrides[item];
     }

--- a/devtools/client/shared/test/browser_outputparser.js
+++ b/devtools/client/shared/test/browser_outputparser.js
@@ -1,15 +1,16 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 const OutputParser = require("devtools/client/shared/output-parser");
 const {initCssProperties, getCssProperties} = require("devtools/shared/fronts/css-properties");
+const CSS_SHAPES_ENABLED_PREF = "devtools.inspector.shapesHighlighter.enabled";
 
 add_task(function* () {
   yield addTab("about:blank");
   yield performTest();
   gBrowser.removeCurrentTab();
 });
 
 function* performTest() {
@@ -22,16 +23,17 @@ function* performTest() {
   let cssProperties = getCssProperties(toolbox);
 
   let parser = new OutputParser(doc, cssProperties);
   testParseCssProperty(doc, parser);
   testParseCssVar(doc, parser);
   testParseURL(doc, parser);
   testParseFilter(doc, parser);
   testParseAngle(doc, parser);
+  testParseShape(doc, parser);
 
   host.destroy();
 }
 
 // Class name used in color swatch.
 var COLOR_TEST_CLASS = "test-class";
 
 // Create a new CSS color-parsing test.  |name| is the name of the CSS
@@ -288,8 +290,126 @@ function testParseAngle(doc, parser) {
   frag = parser.parseCssProperty("background-image",
     "linear-gradient(90deg, red, blue", {
       angleSwatchClass: "test-angleswatch"
     });
 
   swatchCount = frag.querySelectorAll(".test-angleswatch").length;
   is(swatchCount, 1, "angle swatch was created");
 }
+
+function testParseShape(doc, parser) {
+  info("Test shape parsing");
+  pushPref(CSS_SHAPES_ENABLED_PREF, true);
+  const tests = [
+    {
+      desc: "Polygon shape",
+      definition: "polygon(evenodd, 0px 0px, 10%200px,30%30% , calc(250px - 10px) 0 ,\n "
+                  + "12em var(--variable), 100% 100%) margin-box",
+      spanCount: 18
+    },
+    {
+      desc: "Invalid polygon shape",
+      definition: "polygon(0px 0px 100px 20px, 20% 20%)",
+      spanCount: 0
+    },
+    {
+      desc: "Circle shape with all arguments",
+      definition: "circle(25% at\n 30% 200px) border-box",
+      spanCount: 4
+    },
+    {
+      desc: "Circle shape with only one center",
+      definition: "circle(25em at 40%)",
+      spanCount: 3
+    },
+    {
+      desc: "Circle shape with no radius",
+      definition: "circle(at 30% 40%)",
+      spanCount: 3
+    },
+    {
+      desc: "Circle shape with no center",
+      definition: "circle(12em)",
+      spanCount: 1
+    },
+    {
+      desc: "Circle shape with no arguments",
+      definition: "circle()",
+      spanCount: 0
+    },
+    {
+      desc: "Circle shape with no space before at",
+      definition: "circle(25%at 30% 30%)",
+      spanCount: 4
+    },
+    {
+      desc: "Invalid circle shape",
+      definition: "circle(25%at30%30%)",
+      spanCount: 0
+    },
+    {
+      desc: "Ellipse shape with all arguments",
+      definition: "ellipse(200px 10em at 25% 120px) content-box",
+      spanCount: 5
+    },
+    {
+      desc: "Ellipse shape with only one center",
+      definition: "ellipse(200px 10% at 120px)",
+      spanCount: 4
+    },
+    {
+      desc: "Ellipse shape with no radius",
+      definition: "ellipse(at 25% 120px)",
+      spanCount: 3
+    },
+    {
+      desc: "Ellipse shape with no center",
+      definition: "ellipse(200px\n10em)",
+      spanCount: 2
+    },
+    {
+      desc: "Ellipse shape with no arguments",
+      definition: "ellipse()",
+      spanCount: 0
+    },
+    {
+      desc: "Invalid ellipse shape",
+      definition: "ellipse(200px100px at 30$ 20%)",
+      spanCount: 0
+    },
+    {
+      desc: "Inset shape with 4 arguments",
+      definition: "inset(200px 100px\n 30%15%)",
+      spanCount: 4
+    },
+    {
+      desc: "Inset shape with 3 arguments",
+      definition: "inset(200px 100px 15%)",
+      spanCount: 3
+    },
+    {
+      desc: "Inset shape with 2 arguments",
+      definition: "inset(200px 100px)",
+      spanCount: 2
+    },
+    {
+      desc: "Inset shape with 1 argument",
+      definition: "inset(200px)",
+      spanCount: 1
+    },
+    {
+      desc: "Inset shape with 0 arguments",
+      definition: "inset()",
+      spanCount: 0
+    }
+  ];
+
+  for (let {desc, definition, spanCount} of tests) {
+    info(desc);
+    let frag = parser.parseCssProperty("clip-path", definition, {
+      shapeClass: "ruleview-shape"
+    });
+    let spans = frag.querySelectorAll(".ruleview-shape-point");
+    is(spans.length, spanCount, desc + " span count");
+    is(frag.textContent, definition, desc + " text content");
+  }
+}