Bug 1485636 - Add icons to the about:policies sidebar. r=felipe
authorAdnan Bhuiyan <adnan.bhuiyan@utoronto.ca>
Mon, 24 Dec 2018 14:51:32 -0200
changeset 508984 dec0ff3e29433a7e83d0e18b1573eac1bfb9690f
parent 508983 724652219657e0f96797a43274feb9e575b4fb37
child 508985 b243a5a3fc646329ca5b5d169f7fe2f16dfb56eb
child 509000 849c2b71aae42d77e5eb33ef394a671b2f87d535
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfelipe
bugs1485636
milestone66.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 1485636 - Add icons to the about:policies sidebar. r=felipe In addition to the visual improvement, these icons help the responsive design of the page, because if it becomes too narrow the sidebar labels will disappear and only the icons will be displayed
browser/components/enterprisepolicies/content/aboutPolicies.js
browser/components/enterprisepolicies/content/aboutPolicies.xhtml
browser/components/enterprisepolicies/content/policies-active.svg
browser/components/enterprisepolicies/content/policies-documentation.svg
browser/components/enterprisepolicies/content/policies-error.svg
browser/components/enterprisepolicies/jar.mn
--- a/browser/components/enterprisepolicies/content/aboutPolicies.js
+++ b/browser/components/enterprisepolicies/content/aboutPolicies.js
@@ -281,20 +281,19 @@ function init() {
 
   let data = Services.policies.getActivePolicies();
   generateActivePolicies(data);
   generateErrors();
   generateDocumentation();
 
   // Event delegation on #categories element
   let menu = document.getElementById("categories");
-  menu.addEventListener("click", function click(e) {
-    if (e.target && e.target.parentNode == menu)
-      show(e.target);
-  });
+  for (let category of menu.children) {
+    category.addEventListener("click", () => show(category));
+  }
 
   if (location.hash) {
     let sectionButton = document.getElementById("category-" + location.hash.substring(1));
     if (sectionButton) {
       sectionButton.click();
     }
   }
 
@@ -318,17 +317,17 @@ function show(button) {
   content.classList.add("active");
   content.hidden = false;
 
   let current_button = document.querySelector("[selected=true]");
   current_button.removeAttribute("selected");
   button.setAttribute("selected", "true");
 
   let title = document.getElementById("sectionTitle");
-  title.textContent = button.children[0].textContent;
+  title.textContent = button.children[1].textContent;
   location.hash = category;
   restoreScrollPosition(category);
 }
 
 const scrollPositions = {};
 function saveScrollPosition(category) {
   const mainContent = document.querySelector(".main-content");
   scrollPositions[category] = mainContent.scrollTop;
--- a/browser/components/enterprisepolicies/content/aboutPolicies.xhtml
+++ b/browser/components/enterprisepolicies/content/aboutPolicies.xhtml
@@ -14,23 +14,26 @@
         <link rel="localization" href="browser/branding/sync-brand.ftl"/>
         <link rel="localization" href="browser/aboutPolicies.ftl"/>
         <link rel="localization" href="browser/policies/policies-descriptions.ftl"/>
         <script type="application/javascript" src="chrome://browser/content/policies/aboutPolicies.js" />
     </head>
     <body id="body" onload="init()">
         <div id="categories">
             <div class="category" selected="true" id="category-active">
-                <span class="category-name" data-l10n-id="active-policies-tab"/>
+                <img class="category-icon" src="chrome://browser/content/policies/policies-active.svg"></img>
+                <label class="category-name" data-l10n-id="active-policies-tab"></label>
             </div>
             <div class="category" id="category-documentation">
-                <span class="category-name" data-l10n-id="documentation-tab"/>
+                <img class="category-icon" src="chrome://browser/content/policies/policies-documentation.svg"></img>
+                <label class="category-name" data-l10n-id="documentation-tab"></label>
             </div>
             <div class="category" id="category-errors">
-                <span class="category-name" data-l10n-id="errors-tab"/>
+                <img class="category-icon" src="chrome://browser/content/policies/policies-error.svg"></img>
+                <label class="category-name" data-l10n-id="errors-tab"></label>
             </div>
         </div>
         <div class="main-content">
             <div class="header">
                 <div id="sectionTitle" class="header-name" data-l10n-id="active-policies-tab"/>
             </div>
 
             <div id="active" class="tab active">
new file mode 100644
--- /dev/null
+++ b/browser/components/enterprisepolicies/content/policies-active.svg
@@ -0,0 +1,3 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <path fill="context-fill" fill-opacity="context-fill-opacity" d="m11 10c-.5522847 0-1-.44771525-1-1v-4h-7v8c0 .5522847.44771525 1 1 1h2c.55228475 0 1 .4477153 1 1s-.44771525 1-1 1h-3c-1.1045695 0-2-.8954305-2-2v-10c0-1.1045695.8954305-2 2-2h1.05c.23659623-1.16516199 1.26105919-2.00250628 2.45-2.00250628s2.21340377.83734429 2.45 2.00250628h1.05c1.1045695 0 2 .8954305 2 2v5c0 .55228475-.4477153 1-1 1zm-1-6v-1h-1.051c-.47526862.000097-.88494628-.33433375-.98-.8-.14293517-.69793844-.7570756-1.19905191-1.4695-1.19905191s-1.32656483.50111347-1.4695 1.19905191c-.09505372.46566625-.50473138.800097-.98.8h-1.05v1zm-3.5-2c.27614237 0 .5.22385763.5.5s-.22385763.5-.5.5-.5-.22385763-.5-.5.22385763-.5.5-.5zm-2 5c-.27614237 0-.5-.22385763-.5-.5s.22385763-.5.5-.5h4c.27614237 0 .5.22385763.5.5s-.22385763.5-.5.5zm0 2c-.27614237 0-.5-.22385763-.5-.5s.22385763-.5.5-.5h2c.27614237 0 .5.22385763.5.5s-.22385763.5-.5.5zm0 2c-.27614237 0-.5-.2238576-.5-.5s.22385763-.5.5-.5h3c.27614237 0 .5.2238576.5.5s-.22385763.5-.5.5zm5.16250363 4.9969649c-.17706448-.0000378-.34686306-.070407-.47204764-.1956294l-2.00303103-2.003031c-.25303103-.2619823-.24941233-.6784164.00813326-.935962s.67397967-.2611643.93596203-.0081333l1.44017931 1.4401793 4.21704794-6.02444961c.2127301-.29815587.6259441-.36927468.9261129-.15939456.3001689.20988012.3752209.62239779.1682098.92455241l-4.6737391 6.67677006c-.1126024.1627768-.29162177.2672048-.48873957.2850981-.01935032.0009766-.03873758.0009766-.0580879 0z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/components/enterprisepolicies/content/policies-documentation.svg
@@ -0,0 +1,3 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <path fill="context-fill" fill-opacity="context-fill-opacity" d="m11 7.00250628c-.5522847 0-1-.44771525-1-1v-1h-7v8.00000002c0 .5522847.44771525 1 1 1h2c.55228475 0 1 .4477152 1 1 0 .5522847-.44771525 1-1 1h-3c-1.1045695 0-2-.8954305-2-2v-10.00000002c0-1.1045695.8954305-2 2-2h1.05c.23659623-1.16516199 1.26105919-2.00250628 2.45-2.00250628s2.21340377.83734429 2.45 2.00250628h1.05c1.1045695 0 2 .8954305 2 2v2c0 .55228475-.4477153 1-1 1zm-1-3v-1h-1.051c-.47526862.000097-.88494628-.33433374-.98-.8-.14293517-.69793844-.7570756-1.19905191-1.4695-1.19905191s-1.32656483.50111347-1.4695 1.19905191c-.09505372.46566626-.50473138.800097-.98.8h-1.05v1zm-3.5-2c.27614237 0 .5.22385763.5.5 0 .27614238-.22385763.5-.5.5s-.5-.22385762-.5-.5c0-.27614237.22385763-.5.5-.5zm-2 5c-.27614237 0-.5-.22385762-.5-.5 0-.27614237.22385763-.5.5-.5h4c.27614237 0 .5.22385763.5.5 0 .27614238-.22385763.5-.5.5zm0 2c-.27614237 0-.5-.22385762-.5-.5 0-.27614237.22385763-.5.5-.5h2c.27614237 0 .5.22385763.5.5 0 .27614238-.22385763.5-.5.5zm0 2.00000002c-.27614237 0-.5-.2238576-.5-.5s.22385763-.5.5-.5h1c.27614237 0 .5.2238576.5.5s-.22385763.5-.5.5zm6.5 4.9974937c-2.2092 0-4-1.7908-4-4s1.7908-4 4-4 4 1.7908 4 4-1.7908 4-4 4zm.46-2c0-.254051-.205949-.46-.46-.46s-.46.205949-.46.46.205949.46.46.46.46-.205949.46-.46zm-1.06-3c0-.3056.2464-.6.6-.6s.6.2944.6.6c0 .1244-.0576.254-.1632.3896-.0796.1016-.1544.172-.228.24-.0308.0288-.0612.0572-.092.0876-.0062816.0061251-.0126828.0121262-.0192.018-.052.0468-.1864.168-.2792.3028-.1304.1896-.2184.434-.2184.762 0 .2209139.1790861.4.4.4s.4-.1790861.4-.4c0-.1724.0424-.258.0776-.3088.0204-.0296.0456-.0576.0788-.09.016-.0156.032-.03.0516-.048l.0012-.0008.0036-.0032c.02-.018.0456-.0416.07-.0664l.0344-.032c.1262825-.1138504.2434416-.2374293.3504-.3696.16-.2048.3324-.5056.3324-.8812 0-.6944-.5536-1.4-1.4-1.4s-1.4.7056-1.4 1.4c0 .2209139.1790861.4.4.4s.4-.1790861.4-.4z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/components/enterprisepolicies/content/policies-error.svg
@@ -0,0 +1,3 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <path fill="context-fill" fill-opacity="context-fill-opacity" d="m11 7.00250628c-.5522847 0-1-.44771525-1-1v-1h-7v8.00000002c0 .5522847.44771525 1 1 1h1c.55228475 0 1 .4477152 1 1 0 .5522847-.44771525 1-1 1h-2c-1.1045695 0-2-.8954305-2-2v-10.00000002c0-1.1045695.8954305-2 2-2h1.05c.23659623-1.16516199 1.26105919-2.00250628 2.45-2.00250628s2.21340377.83734429 2.45 2.00250628h1.05c1.1045695 0 2 .8954305 2 2v2c0 .55228475-.4477153 1-1 1zm-1-3v-1h-1.051c-.47526862.000097-.88494628-.33433374-.98-.8-.14293517-.69793844-.7570756-1.19905191-1.4695-1.19905191s-1.32656483.50111347-1.4695 1.19905191c-.09505372.46566626-.50473138.800097-.98.8h-1.05v1zm-3.5-2c.27614237 0 .5.22385763.5.5 0 .27614238-.22385763.5-.5.5s-.5-.22385762-.5-.5c0-.27614237.22385763-.5.5-.5zm-2 5c-.27614237 0-.5-.22385762-.5-.5 0-.27614237.22385763-.5.5-.5h4c.27614237 0 .5.22385763.5.5 0 .27614238-.22385763.5-.5.5zm0 2c-.27614237 0-.5-.22385762-.5-.5 0-.27614237.22385763-.5.5-.5h3c.27614237 0 .5.22385763.5.5 0 .27614238-.22385763.5-.5.5zm0 2.00000002c-.27614237 0-.5-.2238576-.5-.5s.22385763-.5.5-.5h2c.27614237 0 .5.2238576.5.5s-.22385763.5-.5.5zm10.4094737 3.3385315c.1818196.3660605.1556801.8011195-.0686611 1.1427768-.2243412.3416572-.6131685.5385659-1.0213389.5172232h-5.70000002c-.39222659-.0104155-.75207561-.2200879-.95454083-.5561802-.20246523-.3360923-.21960272-.7522174-.04545917-1.1038198l2.85-5.69999999c.19423612-.39115456.59327402-.63853153 1.03000002-.63853153.4367259 0 .8357638.24737697 1.03.63853153zm-4.45-3.78v1.73c.0381214.2884432.2840486.5040066.575.5040066s.5368786-.2155634.575-.5040066v-1.73c.0295426-.2235324-.0731401-.4439283-.2632845-.56510838-.1901445-.12118005-.4332866-.12118005-.623431 0-.1901445.12118008-.2928271.34157598-.2632845.56510838zm.57 4.13c.3755536 0 .68-.3044464.68-.68 0-.2750343-.1656767-.522987-.4197753-.6282381s-.5465787-.0470731-.7410573.1474055c-.1944787.1944786-.2526566.4869588-.1474055.7410573.1052511.2540986.3532038.4197753.6282381.4197753z"/>
+</svg>
--- a/browser/components/enterprisepolicies/jar.mn
+++ b/browser/components/enterprisepolicies/jar.mn
@@ -1,8 +1,11 @@
 # 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/.
 
 browser.jar:
     content/browser/policies/aboutPolicies.css              (content/aboutPolicies.css)
     content/browser/policies/aboutPolicies.xhtml            (content/aboutPolicies.xhtml)
     content/browser/policies/aboutPolicies.js               (content/aboutPolicies.js)
+    content/browser/policies/policies-active.svg            (content/policies-active.svg)
+    content/browser/policies/policies-documentation.svg     (content/policies-documentation.svg)
+    content/browser/policies/policies-error.svg             (content/policies-error.svg)