Bug 1497202: Apply Meta CSP to about:performance.
authorChristoph Kerschbaumer <ckerschb@christophkerschbaumer.com>
Wed, 19 Jun 2019 19:00:07 +0000
changeset 479234 3099eaead3bd2d719c3b4a3c700f8677b455cb74
parent 479233 8287c3d0c1064096ee7c162060e6615d72722ee0
child 479235 eca304c5282a9f333d04f41a121f400fe5c40e92
push id36177
push userrmaries@mozilla.com
push dateThu, 20 Jun 2019 09:46:31 +0000
treeherdermozilla-central@a440f0629814 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1497202
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1497202: Apply Meta CSP to about:performance. Differential Revision: https://phabricator.services.mozilla.com/D35352
modules/libpref/init/all.js
toolkit/components/aboutperformance/content/aboutPerformance.css
toolkit/components/aboutperformance/content/aboutPerformance.js
toolkit/components/aboutperformance/content/aboutPerformance.xhtml
toolkit/components/aboutperformance/jar.mn
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -2510,17 +2510,17 @@ pref("font.blacklist.underline_offset", 
 
 pref("security.directory",              "");
 
 // security-sensitive dialogs should delay button enabling. In milliseconds.
 pref("security.dialog_enable_delay", 1000);
 pref("security.notification_enable_delay", 500);
 
 #if defined(DEBUG) && !defined(ANDROID)
-pref("csp.about_uris_without_csp", "blank,printpreview,srcdoc,addons,cache-entry,config,debugging,devtools,downloads,home,newtab,performance,plugins,profiles,preferences,restartrequired,serviceworkers,sessionrestore,support,sync-log,telemetry,url-classifier,welcomeback");
+pref("csp.about_uris_without_csp", "blank,printpreview,srcdoc,addons,cache-entry,config,debugging,devtools,downloads,home,newtab,plugins,profiles,preferences,restartrequired,serviceworkers,sessionrestore,support,sync-log,telemetry,url-classifier,welcomeback");
 // the following prefs are for testing purposes only.
 pref("csp.overrule_about_uris_without_csp_whitelist", false);
 pref("csp.skip_about_page_has_csp_assert", false);
 // assertion flag will be set to false after fixing Bug 1473549
 pref("security.allow_eval_with_system_principal", false);
 pref("security.uris_using_eval_with_system_principal", "autocomplete.xml,redux.js,react-redux.js,content-task.js,preferencesbindings.js,lodash.js,jszip.js,sinon-7.2.7.js,ajv-4.1.1.js,jsol.js");
 #endif
 
new file mode 100644
--- /dev/null
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.css
@@ -0,0 +1,209 @@
+@import url("chrome://global/skin/in-content/common.css");
+
+html {
+  background-color: var(--in-content-page-background);
+}
+body {
+  overflow-x: hidden;
+}
+#dispatch-table {
+  -moz-user-select: none;
+  font-size: 1em;
+  border-spacing: 0;
+  background-color: var(--in-content-box-background);
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-width: 40em;
+}
+
+/* Avoid scrolling the header */
+#dispatch-tbody {
+  display: block;
+  margin-top: 2em;
+}
+#dispatch-thead {
+  position: fixed;
+  z-index: 1;
+  height: 2em;
+  border-bottom: 1px solid var(--in-content-border-color);
+  min-width: 40em;
+  background-color: var(--in-content-box-background);
+}
+tr {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+}
+td:nth-child(2) {
+  width: 8em;
+}
+td:nth-child(3) {
+  width: 12em;
+}
+td:nth-child(4) {
+  width: 5em;
+}
+#dispatch-tbody td:nth-child(4) {
+  text-align: end;
+}
+td:nth-child(5) {
+  width: 20px;
+}
+
+/* Show action icons on selected or hovered rows */
+tr:-moz-any([selected], :hover) > td > .action-icon {
+  padding: 1px 10px;
+  opacity: 1;
+}
+/* The action icons have a relative position, so that we can use
+ * absolutely positioned ::before and ::after pseudo elements.
+ * ::before is used to display the square background on hover/active
+ * ::after is used to display the icons as a background that can be
+ * flipped using a CSS transform in RTL mode. */
+.action-icon {
+  position: relative;
+  opacity: 0;
+}
+/* Ensure both pseudo elements have the same size and position. */
+.action-icon::before, .action-icon::after {
+  height: 200%;
+  position: absolute;
+  top: -50%;
+  left: -3px;
+  padding-left: 13px;
+  padding-right: 13px;
+}
+
+/* square background */
+.action-icon::before {
+  content: "";
+  background-color: currentColor;
+  opacity: 0;
+}
+.action-icon:hover::before {
+  opacity: 0.1;
+}
+.action-icon:hover:active::before {
+  opacity: 0.2;
+}
+
+/* icons */
+.action-icon::after {
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  fill: currentColor;
+  line-height: 100%;
+}
+.addon-icon::after {
+  content: url("chrome://global/skin/icons/shortcut.svg");
+  top: 2px;
+  left: -11px;
+  width: 16px;
+}
+.addon-icon:dir(rtl)::after {
+  transform: scaleX(-1);
+}
+.close-icon::after {
+  content: url("chrome://global/skin/icons/close.svg");
+  height: 100%;
+  top: 0;
+  left: -13px;
+  transform: scale(1.2);
+}
+
+#dispatch-thead > tr {
+  height: inherit;
+}
+
+#dispatch-thead > tr > td {
+  border: none;
+  background-color: var(--in-content-box-background-hover);
+}
+#dispatch-thead > tr > td:not(:first-child) {
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
+  border-bottom: 1px solid var(--in-content-border-color);
+}
+td {
+  padding: 5px 10px;
+  min-height: 2em;
+  color: var(--in-content-text-color);
+  max-width: 70vw;
+  overflow: hidden;
+  white-space: nowrap;
+}
+#dispatch-tbody > tr > td:first-child {
+  text-overflow: ellipsis;
+  padding-inline-start: 32px;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background-position-y: center;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+#dispatch-tbody > tr > td.root{
+  background-position-x: left 36px;
+  padding-inline-start: 62px;
+}
+#dispatch-tbody > tr > td.root:dir(rtl) {
+  background-position-x: right 36px;
+}
+.twisty {
+  margin-inline-start: -62px;
+  margin-inline-end: 26px;
+  padding-inline-end: 18px;
+  padding-inline-start: 18px;
+  position: relative;
+}
+/* Putting the background image in a positioned pseudo element lets us
+ * use CSS transforms on the background image, which we need for rtl. */
+.twisty::before {
+  content: url("chrome://global/skin/icons/twisty-collapsed.svg");
+  position: absolute;
+  display: block;
+  line-height: 50%;
+  top: 4px; /* Half the image's height */
+  width: 100%;
+  left: 0;
+  text-align: center;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+.twisty:dir(rtl)::before {
+  transform: scaleX(-1);
+}
+.twisty.open::before {
+  content: url("chrome://global/skin/icons/twisty-expanded.svg");
+}
+#dispatch-tbody > tr > td.indent {
+  padding-inline-start: 88px;
+  background-position-x: left 62px;
+}
+#dispatch-tbody > tr > td.indent:dir(rtl) {
+  background-position-x: right 62px;
+}
+#dispatch-tbody > tr > td.tracker {
+  background-image: url("chrome://browser/skin/controlcenter/trackers.svg");
+  -moz-context-properties: fill;
+  fill: rgb(224, 41, 29);
+}
+#dispatch-tbody > tr > td.worker {
+  background-image: url("chrome://devtools/skin/images/debugging-workers.svg");
+  -moz-context-properties: fill;
+  fill: #808080;
+}
+
+#dispatch-tbody > tr[selected] > td {
+  background-color: var(--in-content-item-selected);
+  color: var(--in-content-selected-text);
+}
+#dispatch-tbody > tr:hover {
+  background-color: var(--in-content-item-hover);
+}
--- a/toolkit/components/aboutperformance/content/aboutPerformance.js
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.js
@@ -799,17 +799,17 @@ var Control = {
         return bEI - aEI;
 
       // a.name is sometimes an object, so we can't use a.name.localeCompare.
       return String.prototype.localeCompare.call(a.name, b.name);
     });
   },
 };
 
-var go = async function() {
+window.onload = async function() {
   Control.init();
 
   let addons = await AddonManager.getAddonsByTypes(["extension"]);
   for (let addon of addons) {
     if (addon.isSystem) {
       gSystemAddonIds.add(addon.id);
     }
   }
--- a/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
@@ -1,236 +1,27 @@
 <?xml version="1.0"?>
 
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <meta http-equiv="Content-Security-Policy" content="default-src chrome:" />
     <title data-l10n-id="about-performance-title"/>
     <link rel="icon" type="image/svg+xml" id="favicon"
           href="chrome://global/skin/icons/performance.svg"/>
     <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"
           type="text/css"/>
     <link rel="localization" href="toolkit/about/aboutPerformance.ftl"/>
     <script src="chrome://global/content/aboutPerformance.js"></script>
-    <style>
-      @import url("chrome://global/skin/in-content/common.css");
-
-      html {
-        background-color: var(--in-content-page-background);
-      }
-      body {
-        overflow-x: hidden;
-      }
-      #dispatch-table {
-        -moz-user-select: none;
-        font-size: 1em;
-        border-spacing: 0;
-        background-color: var(--in-content-box-background);
-        margin: 0;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        min-width: 40em;
-      }
-
-      /* Avoid scrolling the header */
-      #dispatch-tbody {
-        display: block;
-        margin-top: 2em;
-      }
-      #dispatch-thead {
-        position: fixed;
-        z-index: 1;
-        height: 2em;
-        border-bottom: 1px solid var(--in-content-border-color);
-        min-width: 40em;
-        background-color: var(--in-content-box-background);
-      }
-      tr {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-      }
-      td:nth-child(2) {
-        width: 8em;
-      }
-      td:nth-child(3) {
-        width: 12em;
-      }
-      td:nth-child(4) {
-        width: 5em;
-      }
-      #dispatch-tbody td:nth-child(4) {
-        text-align: end;
-      }
-      td:nth-child(5) {
-        width: 20px;
-      }
-
-      /* Show action icons on selected or hovered rows */
-      tr:-moz-any([selected], :hover) > td > .action-icon {
-        padding: 1px 10px;
-        opacity: 1;
-      }
-      /* The action icons have a relative position, so that we can use
-       * absolutely positioned ::before and ::after pseudo elements.
-       * ::before is used to display the square background on hover/active
-       * ::after is used to display the icons as a background that can be
-       * flipped using a CSS transform in RTL mode. */
-      .action-icon {
-        position: relative;
-        opacity: 0;
-      }
-      /* Ensure both pseudo elements have the same size and position. */
-      .action-icon::before, .action-icon::after {
-        height: 200%;
-        position: absolute;
-        top: -50%;
-        left: -3px;
-        padding-left: 13px;
-        padding-right: 13px;
-      }
-
-      /* square background */
-      .action-icon::before {
-        content: "";
-        background-color: currentColor;
-        opacity: 0;
-      }
-      .action-icon:hover::before {
-        opacity: 0.1;
-      }
-      .action-icon:hover:active::before {
-        opacity: 0.2;
-      }
-
-      /* icons */
-      .action-icon::after {
-        -moz-context-properties: fill, fill-opacity;
-        fill-opacity: 0;
-        background-repeat: no-repeat;
-        background-position: center;
-        fill: currentColor;
-        line-height: 100%;
-      }
-      .addon-icon::after {
-        content: url("chrome://global/skin/icons/shortcut.svg");
-        top: 2px;
-        left: -11px;
-        width: 16px;
-      }
-      .addon-icon:dir(rtl)::after {
-        transform: scaleX(-1);
-      }
-      .close-icon::after {
-        content: url("chrome://global/skin/icons/close.svg");
-        height: 100%;
-        top: 0;
-        left: -13px;
-        transform: scale(1.2);
-      }
-
-      #dispatch-thead > tr {
-        height: inherit;
-      }
-
-      #dispatch-thead > tr > td {
-        border: none;
-        background-color: var(--in-content-box-background-hover);
-      }
-      #dispatch-thead > tr > td:not(:first-child) {
-        border-inline-start-width: 1px;
-        border-inline-start-style: solid;
-        border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
-        border-bottom: 1px solid var(--in-content-border-color);
-      }
-      td {
-        padding: 5px 10px;
-        min-height: 2em;
-        color: var(--in-content-text-color);
-        max-width: 70vw;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-      #dispatch-tbody > tr > td:first-child {
-        text-overflow: ellipsis;
-        padding-inline-start: 32px;
-        background-repeat: no-repeat;
-        background-size: 16px 16px;
-        background-position-y: center;
-        -moz-context-properties: fill;
-        fill: currentColor;
-      }
-      #dispatch-tbody > tr > td.root{
-        background-position-x: left 36px;
-        padding-inline-start: 62px;
-      }
-      #dispatch-tbody > tr > td.root:dir(rtl) {
-        background-position-x: right 36px;
-      }
-      .twisty {
-        margin-inline-start: -62px;
-        margin-inline-end: 26px;
-        padding-inline-end: 18px;
-        padding-inline-start: 18px;
-        position: relative;
-      }
-      /* Putting the background image in a positioned pseudo element lets us
-       * use CSS transforms on the background image, which we need for rtl. */
-      .twisty::before {
-        content: url("chrome://global/skin/icons/twisty-collapsed.svg");
-        position: absolute;
-        display: block;
-        line-height: 50%;
-        top: 4px; /* Half the image's height */
-        width: 100%;
-        left: 0;
-        text-align: center;
-        -moz-context-properties: fill;
-        fill: currentColor;
-      }
-      .twisty:dir(rtl)::before {
-        transform: scaleX(-1);
-      }
-      .twisty.open::before {
-        content: url("chrome://global/skin/icons/twisty-expanded.svg");
-      }
-      #dispatch-tbody > tr > td.indent {
-        padding-inline-start: 88px;
-        background-position-x: left 62px;
-      }
-      #dispatch-tbody > tr > td.indent:dir(rtl) {
-        background-position-x: right 62px;
-      }
-      #dispatch-tbody > tr > td.tracker {
-        background-image: url("chrome://browser/skin/controlcenter/trackers.svg");
-        -moz-context-properties: fill;
-        fill: rgb(224, 41, 29);
-      }
-      #dispatch-tbody > tr > td.worker {
-        background-image: url("chrome://devtools/skin/images/debugging-workers.svg");
-        -moz-context-properties: fill;
-        fill: #808080;
-      }
-
-      #dispatch-tbody > tr[selected] > td {
-        background-color: var(--in-content-item-selected);
-        color: var(--in-content-selected-text);
-      }
-      #dispatch-tbody > tr:hover {
-        background-color: var(--in-content-item-hover);
-      }
-    </style>
+    <link rel="stylesheet" href="chrome://global/content/aboutPerformance.css"/>
   </head>
-  <body onload="go()">
+  <body>
     <table id="dispatch-table">
       <thead id="dispatch-thead">
         <tr>
           <td data-l10n-id="column-name"/>
           <td data-l10n-id="column-type"/>
           <td data-l10n-id="column-energy-impact"/>
           <td data-l10n-id="column-memory"/>
           <td></td><!-- actions -->
--- a/toolkit/components/aboutperformance/jar.mn
+++ b/toolkit/components/aboutperformance/jar.mn
@@ -1,7 +1,8 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 toolkit.jar:
   content/global/aboutPerformance.xhtml               (content/aboutPerformance.xhtml)
   content/global/aboutPerformance.js                  (content/aboutPerformance.js)
+  content/global/aboutPerformance.css                 (content/aboutPerformance.css)