Bug 1584311 - Remove XUL grid from pluginPrefs.xul and make it an HTML page. r=mstriemer
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 10 Dec 2019 22:50:48 +0000
changeset 506339 3c8aebdfc742a2037cfaeef067c03d720e3440f5
parent 506338 b0ce0ed033e6ed37358f10468c2bd11d7aa3b935
child 506340 611a2b145da227e02aeacd256bad64058b040cff
push id102822
push userntim.bugs@gmail.com
push dateTue, 10 Dec 2019 22:55:49 +0000
treeherderautoland@3c8aebdfc742 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstriemer
bugs1584311
milestone73.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 1584311 - Remove XUL grid from pluginPrefs.xul and make it an HTML page. r=mstriemer Differential Revision: https://phabricator.services.mozilla.com/D56234
toolkit/mozapps/extensions/content/pluginPrefs.js
toolkit/mozapps/extensions/content/pluginPrefs.xhtml
toolkit/mozapps/extensions/content/pluginPrefs.xul
toolkit/mozapps/extensions/internal/PluginProvider.jsm
toolkit/mozapps/extensions/jar.mn
toolkit/themes/shared/extensions/extensions.inc.css
--- a/toolkit/mozapps/extensions/content/pluginPrefs.js
+++ b/toolkit/mozapps/extensions/content/pluginPrefs.js
@@ -34,19 +34,19 @@ async function renderPluginMetadata(id) 
   for (let type of plugin.pluginMimeTypes) {
     let extras = [type.description.trim(), type.suffixes]
       .filter(x => x)
       .join(": ");
     types.push(type.type + (extras ? " (" + extras + ")" : ""));
   }
   typeLabel.textContent = types.join(",\n");
   let showProtectedModePref = canDisableFlashProtectedMode(plugin);
-  document
-    .getElementById("pluginEnableProtectedMode")
-    .setAttribute("collapsed", showProtectedModePref ? "" : "true");
+  document.getElementById(
+    "pluginEnableProtectedMode"
+  ).hidden = !showProtectedModePref;
 
   // Disable flash blocking when Fission is enabled (See Bug 1584931).
   document.getElementById(
     "pluginFlashBlocking"
   ).hidden = canDisableFlashBlocking();
 }
 
 // Protected mode is win32-only, not win64
@@ -61,17 +61,17 @@ function canDisableFlashBlocking() {
 function init() {
   let params = new URLSearchParams(location.hash.slice(1));
   renderPluginMetadata(params.get("id"));
 
   for (let id of Object.keys(PREFS)) {
     let checkbox = document.getElementById(id);
     var prefVal = Services.prefs.getBoolPref(PREFS[id].pref);
     checkbox.checked = PREFS[id].invert ? !prefVal : prefVal;
-    checkbox.addEventListener("command", () => {
+    checkbox.addEventListener("change", () => {
       Services.prefs.setBoolPref(
         PREFS[id].pref,
         PREFS[id].invert ? !checkbox.checked : checkbox.checked
       );
     });
   }
 }
 
rename from toolkit/mozapps/extensions/content/pluginPrefs.xul
rename to toolkit/mozapps/extensions/content/pluginPrefs.xhtml
--- a/toolkit/mozapps/extensions/content/pluginPrefs.xul
+++ b/toolkit/mozapps/extensions/content/pluginPrefs.xhtml
@@ -1,58 +1,72 @@
-<?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/.  -->
 
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://mozapps/content/extensions/extensions.css"?>
-<?xml-stylesheet href="chrome://mozapps/skin/extensions/extensions.css"?>
-
-<!DOCTYPE window [
-<!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" >
-%brandDTD;
+<!DOCTYPE html [
 <!ENTITY % pluginsDTD SYSTEM "chrome://pluginproblem/locale/pluginproblem.dtd">
 %pluginsDTD;
 <!ENTITY % extensionsDTD SYSTEM "chrome://mozapps/locale/extensions/extensions.dtd">
 %extensionsDTD;
 ]>
 
-<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <link rel="stylesheet" href="chrome://global/skin/global.css"/>
+  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"/>
+  <style>
+    :root {
+      background-color: var(--in-content-box-background);
+    }
 
-  <script src="chrome://mozapps/content/extensions/pluginPrefs.js"/>
+    #detail-grid {
+      display: grid;
+      grid-template-columns: auto auto;
+      column-gap: 1em;
+      min-height: 250px;
+      align-content: start;
+    }
+
+    .detail-row:not([hidden]) {
+      display: grid;
+      grid-column: span 2;
+      grid-template-columns: subgrid;
+      padding-block: 16px;
+      line-height: 20px;
+    }
+
+    .detail-row:not([hidden]) ~ .detail-row {
+      border-top: 1px solid var(--in-content-box-border-color);
+    }
 
-  <vbox class="detail-view-container">
-    <grid id="detail-grid">
-      <columns>
-          <column flex="1"/>
-          <column flex="2"/>
-      </columns>
-      <rows id="detail-rows">
-        <row class="detail-row-complex">
-          <label>&plugin.file;</label>
-          <label class="text-list" id="pluginLibraries"/>
-        </row>
-        <row class="detail-row-complex">
-          <label>&plugin.mimeTypes;</label>
-          <label class="text-list" id="pluginMimeTypes"/>
-        </row>
-        <row id="pluginFlashBlocking" class="detail-row-complex">
-          <vbox>
-            <label>&plugin.enableBlocklists.label;</label>
-            <label class="preferences-learnmore" is="text-link"
-                   href="https://support.mozilla.org/kb/flash-blocklists">&setting.learnmore;</label>
-          </vbox>
-          <checkbox id="pluginFlashBlockingCheckbox"/>
-        </row>
-        <row id="pluginEnableProtectedMode" class="detail-row-complex">
-          <vbox>
-            <label>&plugin.flashProtectedMode.label;</label>
-            <label class="preferences-learnmore" is="text-link"
-                   href="https://support.mozilla.org/kb/flash-protected-mode-settings">&setting.learnmore;</label>
-          </vbox>
-          <checkbox id="pluginEnableProtectedModeCheckbox"/>
-        </row>
-      </rows>
-    </grid>
-  </vbox>
-</window>
+    #pluginFlashBlocking label,
+    #pluginEnableProtectedMode label {
+      display: block;
+    }
+  </style>
+  <script src="chrome://mozapps/content/extensions/pluginPrefs.js"></script>
+</head>
+<body id="detail-grid">
+  <div class="detail-row">
+    <label>&plugin.file;</label>
+    <label class="text-list" id="pluginLibraries"/>
+  </div>
+  <div class="detail-row">
+    <label>&plugin.mimeTypes;</label>
+    <label class="text-list" id="pluginMimeTypes"/>
+  </div>
+  <div id="pluginFlashBlocking" class="detail-row">
+    <div>
+      <label>&plugin.enableBlocklists.label;</label>
+      <a href="https://support.mozilla.org/kb/flash-blocklists" target="_blank">&setting.learnmore;</a>
+    </div>
+    <input type="checkbox" id="pluginFlashBlockingCheckbox"/>
+  </div>
+  <div id="pluginEnableProtectedMode" class="detail-row">
+    <div>
+      <label>&plugin.flashProtectedMode.label;</label>
+      <a href="https://support.mozilla.org/kb/flash-protected-mode-settings" target="_blank">&setting.learnmore;</a>
+    </div>
+    <input type="checkbox" id="pluginEnableProtectedModeCheckbox"/>
+  </div>
+</body>
+</html>
--- a/toolkit/mozapps/extensions/internal/PluginProvider.jsm
+++ b/toolkit/mozapps/extensions/internal/PluginProvider.jsm
@@ -500,17 +500,17 @@ PluginWrapper.prototype = {
   },
 
   get optionsType() {
     return AddonManager.OPTIONS_TYPE_INLINE_BROWSER;
   },
 
   get optionsURL() {
     return (
-      "chrome://mozapps/content/extensions/pluginPrefs.xul#id=" +
+      "chrome://mozapps/content/extensions/pluginPrefs.xhtml#id=" +
       encodeURIComponent(this.id)
     );
   },
 
   get updateDate() {
     return this.installDate;
   },
 
--- a/toolkit/mozapps/extensions/jar.mn
+++ b/toolkit/mozapps/extensions/jar.mn
@@ -5,17 +5,17 @@
 toolkit.jar:
 % content mozapps %content/mozapps/
 #ifndef MOZ_FENNEC
   content/mozapps/extensions/extensions.xul                     (content/extensions.xul)
   content/mozapps/extensions/extensions.css                     (content/extensions.css)
   content/mozapps/extensions/extensions.js                      (content/extensions.js)
   content/mozapps/extensions/blocklist.xul                      (content/blocklist.xul)
   content/mozapps/extensions/blocklist.js                       (content/blocklist.js)
-  content/mozapps/extensions/pluginPrefs.xul                    (content/pluginPrefs.xul)
+  content/mozapps/extensions/pluginPrefs.xhtml                  (content/pluginPrefs.xhtml)
   content/mozapps/extensions/pluginPrefs.js                     (content/pluginPrefs.js)
   content/mozapps/extensions/OpenH264-license.txt               (content/OpenH264-license.txt)
   content/mozapps/extensions/aboutaddons.html                   (content/aboutaddons.html)
   content/mozapps/extensions/aboutaddons.js                     (content/aboutaddons.js)
   content/mozapps/extensions/aboutaddonsCommon.js               (content/aboutaddonsCommon.js)
   content/mozapps/extensions/aboutaddons.css                    (content/aboutaddons.css)
   content/mozapps/extensions/abuse-reports.js                   (content/abuse-reports.js)
   content/mozapps/extensions/abuse-report-frame.html            (content/abuse-report-frame.html)
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -770,38 +770,16 @@ button.warning {
   fill: currentColor;
   list-style-image: url("chrome://global/skin/icons/heart.svg");
 }
 
 #detail-contrib-btn .button-icon {
   margin-inline-end: 5px;
 }
 
-#detail-grid {
-  margin-bottom: 2em;
-}
-
-#detail-grid > columns > column:first-child {
-  min-width: 15em;
-  max-width: 25em;
-}
-
-.detail-row[first-row="true"],
-.detail-row-complex[first-row="true"] {
-  border-top: none;
-}
-
-.detail-row,
-.detail-row-complex {
-  border-top: 1px solid var(--in-content-box-border-color);
-  -moz-box-align: center;
-  min-height: 35px;
-  line-height: 20px;
-}
-
 .inline-options-browser {
   margin-top: 2em;
 }
 
 .preferences-alignment {
   min-height: 30px;
   -moz-box-align: center;
 }
@@ -813,28 +791,16 @@ button.warning {
   margin-inline-start: 2em;
   white-space: pre-wrap;
 }
 
 .preferences-description:empty {
   display: none;
 }
 
-.detail-row-footer {
-  padding-bottom: 6px;
-}
-
-.detail-row-footer > .preferences-description {
-  margin-inline-start: 6px;
-  margin-top: 0;
-  margin-bottom: 0;
-  /* card-width - card-padding - description-margins */
-  width: calc(664px - 32px - 11px);
-  color: var(--in-content-deemphasized-text);
-}
 
 /*** creator ***/
 
 .creator > label {
   margin-inline-start: 0;
   margin-inline-end: 0;
 }