Bug 1483431 - improve design of about:policies. r=felipe
authorSoeren Hentzschel <cadeyrn@ymail.com>
Thu, 30 Aug 2018 18:20:25 -0300 (2018-08-30)
changeset 434170 cd82664c5a141ff4b30f0bd0300f754adee3e262
parent 434169 e1eac066705ff183de649f094718a4c114af3826
child 434171 bfe71056fd0f2f81a824a1b05132c80083eaa754
push id34541
push userrgurzau@mozilla.com
push dateFri, 31 Aug 2018 04:05:25 +0000 (2018-08-31)
treeherdermozilla-central@02f33375bc17 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfelipe
bugs1483431
milestone63.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 1483431 - improve design of about:policies. r=felipe
browser/components/enterprisepolicies/content/aboutPolicies.css
browser/components/enterprisepolicies/content/aboutPolicies.js
browser/components/enterprisepolicies/helpers/WebsiteFilter.jsm
browser/components/enterprisepolicies/schemas/policies-schema.json
--- a/browser/components/enterprisepolicies/content/aboutPolicies.css
+++ b/browser/components/enterprisepolicies/content/aboutPolicies.css
@@ -11,20 +11,22 @@ html {
 body {
   display: flex;
   align-items: stretch;
   height: 100%;
 }
 
 #sectionTitle {
   float: left;
+  padding-inline-start: 1rem;
 }
 
 #sectionTitle:dir(rtl) {
   float: right;
+  padding-inline-end: 1rem;
 }
 
 /** Categories **/
 
 .category {
   cursor: pointer;
   /* Center category names */
   display: flex;
@@ -48,73 +50,73 @@ body {
 .tab {
   padding: 0.5em 0;
 }
 
 .tab table {
   width: 100%;
 }
 
+tr:hover td {
+  background-color: #d7d7db;
+}
+
 th, td, table {
   border-collapse: collapse;
   border: none;
   text-align: start;
 }
 
 th {
-  padding-bottom: 8px;
+  padding: 1rem;
   font-size: larger;
 }
 
 td {
-  padding-bottom: 8px;
-}
-
-.active-policies tr:nth-child(even) {
-  background-color: white;
-}
-
-.errors tr:nth-child(even) {
-  background-color: white;
+  padding: 1rem;
+  transition: background cubic-bezier(.07, .95, 0, 1) 250ms;
 }
 
 /*
  * In Documentation Tab, this property sets the policies row in an
  * alternate color scheme of white and grey as each policy comprises
  * of two tbody tags, one for the description and the other for the
  * collapsible information block.
  */
 
+.active-policies tr.odd,
+.errors tr:nth-child(odd),
 tbody:nth-child(4n + 1) {
-  background-color: white;
-}
-
-.lastpolicyrow {
-  border-bottom: 3px solid #0c0c0d;
+  background-color: #ededf0;
 }
 
-tr.lastpolicyrow td {
-  padding-bottom: 16px;
+.arr_sep.odd:not(:last-child) td:not(:first-child) {
+  border-bottom: 2px solid #f9f9fa;
 }
 
-.array {
-  border-bottom: 1px solid var(--in-content-box-border-color);
-  padding-bottom: 4px;
+.arr_sep.even:not(:last-child) td:not(:first-child) {
+  border-bottom: 2px solid #ededf0;
+}
+
+.last_row:not(:last-child) td {
+  border-bottom: 2px solid #d7d7db !important;
 }
 
 .icon {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 16px;
   -moz-context-properties: fill;
   display: inline-block;
   fill: var(--newtab-icon-primary-color);
   height: 14px;
   vertical-align: middle;
   width: 14px;
+  margin-top: -.125rem;
+  margin-left: .5rem;
 }
 
 .icon.machine-only {
   background-image: url("chrome://browser/skin/developer.svg");
 }
 
 .collapsible {
   cursor: pointer;
@@ -127,15 +129,15 @@ tr.lastpolicyrow td {
 }
 
 .content-style {
   background-color: white;
   color: var(--in-content-category-text-selected);
 }
 
 tbody.collapsible td {
-  padding-bottom: 8px;
+  padding-bottom: 1rem;
 }
 
 .schema {
   font-family: monospace;
   white-space: pre;
-}
\ No newline at end of file
+}
--- a/browser/components/enterprisepolicies/content/aboutPolicies.js
+++ b/browser/components/enterprisepolicies/content/aboutPolicies.js
@@ -38,74 +38,87 @@ function machine_only_col(text) {
  * a recursive function called generatePolicy() according to the policy schema.
  */
 
 function generateActivePolicies(data) {
 
   let new_cont = document.getElementById("activeContent");
   new_cont.classList.add("active-policies");
 
+  let policy_count = 0;
+
   for (let policyName in data) {
+    const color_class = ++policy_count % 2 === 0 ? "even" : "odd";
+
     if (schema.properties[policyName].type == "array") {
       for (let count in data[policyName]) {
         let isFirstRow = (count == 0);
         let isLastRow = (count == data[policyName].length - 1);
         let row = document.createElement("tr");
+        row.classList.add(color_class);
         row.appendChild(col(isFirstRow ? policyName : ""));
-        generatePolicy(data[policyName][count], row, 1, new_cont, isLastRow, !isFirstRow);
+        generatePolicy(data[policyName][count], row, 1, new_cont, isLastRow, data[policyName].length > 1);
       }
     } else if (schema.properties[policyName].type == "object") {
       let count = 0;
       for (let obj in data[policyName]) {
         let isFirstRow = (count == 0);
-        let isLastRow = (count == data[policyName].length - 1);
+        let isLastRow = (count == Object.keys(data[policyName]).length - 1);
         let row = document.createElement("tr");
+        row.classList.add(color_class);
         row.appendChild(col(isFirstRow ? policyName : ""));
         row.appendChild(col(obj));
-        generatePolicy(data[policyName][obj], row, 2, new_cont, isLastRow);
+        generatePolicy(data[policyName][obj], row, 2, new_cont, isLastRow, true);
         count++;
       }
     } else {
       let row = document.createElement("tr");
       row.appendChild(col(policyName));
       row.appendChild(col(JSON.stringify(data[policyName])));
-      row.classList.add("lastpolicyrow");
+      row.appendChild(col(""));
+      row.classList.add(color_class, "last_row");
       new_cont.appendChild(row);
     }
   }
 }
 
 /*
  * This is a helper recursive function that iterates levels of each
  * policy and formats the content to be displayed accordingly.
  */
 
 function generatePolicy(data, row, depth, new_cont, islast, arr_sep = false) {
+  const color_class = row.classList.contains("odd") ? "odd" : "even";
+
   if (Array.isArray(data)) {
     for (let count in data) {
       if (count == 0) {
         if (count == data.length - 1) {
-          generatePolicy(data[count], row, depth + 1, new_cont, islast ? islast : false, false);
+          generatePolicy(data[count], row, depth + 1, new_cont, islast ? islast : false, true);
         } else {
-          generatePolicy(data[count], row, depth + 1, new_cont, false, true);
+          generatePolicy(data[count], row, depth + 1, new_cont, false, false);
         }
       } else if (count == data.length - 1) {
         let last_row = document.createElement("tr");
+        last_row.classList.add(color_class, "arr_sep");
+
         for (let i = 0; i < depth; i++) {
             last_row.appendChild(col(""));
         }
 
         generatePolicy(data[count], last_row, depth + 1, new_cont, islast ? islast : false, arr_sep);
       } else {
         let new_row = document.createElement("tr");
+        new_row.classList.add(color_class);
+
         for (let i = 0; i < depth; i++) {
           new_row.appendChild(col(""));
         }
 
-        generatePolicy(data[count], new_row, depth + 1, new_cont, false, true);
+        generatePolicy(data[count], new_row, depth + 1, new_cont, false, false);
       }
     }
   } else if (typeof data == "object" && Object.keys(data).length > 0) {
     let count = 0;
       for (let obj in data) {
         if (count == 0) {
           row.appendChild(col(obj));
           if (count == Object.keys(data).length - 1) {
@@ -114,42 +127,44 @@ function generatePolicy(data, row, depth
             generatePolicy(data[obj], row, depth + 1, new_cont, false, false);
           }
         } else if (count == Object.keys(data).length - 1) {
           let last_row = document.createElement("tr");
           for (let i = 0; i < depth; i++) {
             last_row.appendChild(col(""));
           }
 
+          last_row.appendChild(col(obj));
+
           if (arr_sep) {
-            last_row.appendChild(col(obj, "array"));
-          } else {
-            last_row.appendChild(col(obj));
+            last_row.classList.add(color_class, "arr_sep");
           }
 
-          generatePolicy(data[obj], last_row, depth + 1, new_cont, islast ? islast : false, arr_sep);
+          generatePolicy(data[obj], last_row, depth + 1, new_cont, islast ? islast : false, false);
         } else {
           let new_row = document.createElement("tr");
+          new_row.classList.add(color_class);
+
           for (let i = 0; i < depth; i++) {
             new_row.appendChild(col(""));
           }
 
           new_row.appendChild(col(obj));
           generatePolicy(data[obj], new_row, depth + 1, new_cont, false, false);
         }
         count++;
       }
   } else {
+    row.appendChild(col(JSON.stringify(data)));
+
     if (arr_sep) {
-      row.appendChild(col(JSON.stringify(data), "array"));
-    } else {
-      row.appendChild(col(JSON.stringify(data)));
+      row.classList.add("arr_sep");
     }
     if (islast) {
-      row.classList.add("lastpolicyrow");
+      row.classList.add("last_row");
     }
     new_cont.appendChild(row);
   }
 }
 
 function generateErrors() {
   const consoleStorage = Cc["@mozilla.org/consoleAPI-storage;1"];
   const storage = consoleStorage.getService(Ci.nsIConsoleAPIStorage);
@@ -166,17 +181,17 @@ function generateErrors() {
   let new_cont = document.getElementById("errorsContent");
   new_cont.classList.add("errors");
 
   let flag = false;
   for (let err of consoleEvents) {
     if (prefixes.includes(err.prefix)) {
       flag = true;
       let row = document.createElement("tr");
-      row.appendChild(col(err.arguments[0], "schema"));
+      row.appendChild(col(err.arguments[0]));
       new_cont.appendChild(row);
     }
   }
 
   if (!flag) {
     let errors_tab = document.getElementById("category-errors");
     errors_tab.style.display = "none";
   }
--- a/browser/components/enterprisepolicies/helpers/WebsiteFilter.jsm
+++ b/browser/components/enterprisepolicies/helpers/WebsiteFilter.jsm
@@ -48,31 +48,31 @@ var EXPORTED_SYMBOLS = [ "WebsiteFilter"
 
 function WebsiteFilter(blocklist, exceptionlist) {
   let blockArray = [], exceptionArray = [];
 
   for (let i = 0; i < blocklist.length && i < LIST_LENGTH_LIMIT; i++) {
     try {
       let pattern = new MatchPattern(blocklist[i]);
       blockArray.push(pattern);
-      log.debug(`Pattern added to WebsiteFilter.Block list: ${blocklist[i]}`);
+      log.debug(`Pattern added to WebsiteFilter. Block: ${blocklist[i]}`);
     } catch (e) {
-      log.error(`Invalid pattern on WebsiteFilter.Block: ${blocklist[i]}`);
+      log.error(`Invalid pattern on WebsiteFilter. Block: ${blocklist[i]}`);
     }
   }
 
   this._blockPatterns = new MatchPatternSet(blockArray);
 
   for (let i = 0; i < exceptionlist.length && i < LIST_LENGTH_LIMIT; i++) {
     try {
       let pattern = new MatchPattern(exceptionlist[i]);
       exceptionArray.push(pattern);
-      log.debug(`Pattern added to WebsiteFilter.Exceptions list: ${exceptionlist[i]}`);
+      log.debug(`Pattern added to WebsiteFilter. Exception: ${exceptionlist[i]}`);
     } catch (e) {
-      log.error(`Invalid pattern on WebsiteFilter.Exceptions: ${exceptionlist[i]}`);
+      log.error(`Invalid pattern on WebsiteFilter. Exception: ${exceptionlist[i]}`);
     }
   }
 
   if (exceptionArray.length) {
     this._exceptionsPatterns = new MatchPatternSet(exceptionArray);
   }
 
   Services.obs.addObserver(this, "http-on-modify-request", true);
@@ -101,8 +101,9 @@ WebsiteFilter.prototype = {
           !this._exceptionsPatterns.matches(channel.URI)) {
         // NS_ERROR_BLOCKED_BY_POLICY displays the error message
         // designed for policy-related blocks.
         channel.cancel(Cr.NS_ERROR_BLOCKED_BY_POLICY);
       }
     }
   }
 };
+
--- a/browser/components/enterprisepolicies/schemas/policies-schema.json
+++ b/browser/components/enterprisepolicies/schemas/policies-schema.json
@@ -226,23 +226,23 @@
 
     "DisablePrivateBrowsing": {
       "description": "Disables private browsing.",
 
       "type": "boolean"
     },
 
     "DisableProfileImport": {
-      "description": "Disables the Firefox \"Import data from another browser\" button",
+      "description": "Disables the Firefox \"Import data from another browser\" button.",
 
       "type": "boolean"
     },
 
     "DisableProfileRefresh": {
-      "description": "Disables the \"Refresh Firefox\" button in about:support",
+      "description": "Disables the \"Refresh Firefox\" button in about:support.",
 
       "type": "boolean"
     },
 
     "DisableSafeMode": {
       "description": "Prevents ability to restart in safe mode. You can only prevent the Shift key by using GPO on Windows.",
 
       "type": "boolean"
@@ -272,17 +272,17 @@
     "DisableSystemAddonUpdate": {
       "description": "Prevent the browser from installing and updating system addons.",
       "machine_only": true,
 
       "type": "boolean"
     },
 
     "DisableTelemetry": {
-      "description": "Turns off telemetry.",
+      "description": "Turns off Telemetry.",
       "machine_only": true,
 
       "type": "boolean"
     },
 
     "DisplayBookmarksToolbar": {
       "description": "Causes the bookmarks toolbar to be displayed by default.",
 
@@ -399,17 +399,17 @@
             "type": "URL"
           }
         }
       },
       "required": ["URL"]
     },
 
     "InstallAddonsPermission": {
-      "description": "Allow webites to install add-ons.",
+      "description": "Allow websites to install add-ons.",
 
       "type": "object",
       "properties": {
         "Allow": {
           "type": "array",
           "strict": false,
           "items": {
             "type": "origin"
@@ -652,24 +652,24 @@
 
     "SanitizeOnShutdown": {
       "description": "Clears ALL browser data on shutdown.",
 
       "type": "boolean"
     },
 
     "SearchBar": {
-      "description": "Sets the default location of the search bar. Only applies on firtrun, but can be changed.",
+      "description": "Sets the default location of the search bar. Only applies on first run, but can be changed.",
 
       "type": "string",
       "enum": ["unified", "separate"]
     },
 
     "SearchEngines": {
-      "description": "Modifies the list of search engines built into Firefox",
+      "description": "Modifies the list of search engines built into Firefox.",
       "enterprise_only": true,
 
       "type": "object",
       "properties": {
         "Add": {
           "type": "array",
           "items": {
             "type": "object",
@@ -734,8 +734,9 @@
           "items": {
             "type": "string"
           }
         }
       }
     }
   }
 }
+