Bug 1483431 - improve design of about:policies. r=felipe
authorSoeren Hentzschel <cadeyrn@ymail.com>
Thu, 30 Aug 2018 18:20:25 -0300
changeset 482461 cd82664c5a141ff4b30f0bd0300f754adee3e262
parent 482460 e1eac066705ff183de649f094718a4c114af3826
child 482462 bfe71056fd0f2f81a824a1b05132c80083eaa754
push id232
push userfmarier@mozilla.com
push dateWed, 05 Sep 2018 20:45:54 +0000
reviewersfelipe
bugs1483431
milestone63.0a1
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"
           }
         }
       }
     }
   }
 }
+