Bug 1555232 - Part 1: Add the protection settings section into Protection Panel. r=nhnt11

This patch adds a protection settings section into Protection Panel.
This section consist of one button which will open a
'about:preferences#privacy' when been clicked.

Differential Revision: https://phabricator.services.mozilla.com/D34873

--HG--
extra : moz-landing-system : lando

browser/base/content/browser-siteProtections.js

@@ -27,6 +27,11 @@ var gProtectionsHandler = {
     return this._protectionsPopupTPSwitch =
       document.getElementById("protections-popup-tp-switch");
   },
+  get _protectionPopupSettingsButton() {
+    delete this._protectionPopupSettingsButton;
+    return this._protectionPopupSettingsButton =
+      document.getElementById("protections-popup-settings-button");
+  },
 
   handleProtectionsButtonEvent(event) {
     event.stopPropagation();

browser/components/controlcenter/content/protectionsPanel.inc.xul

@@ -33,6 +33,15 @@
               oncommand="gProtectionsHandler.onTPSwitchCommand();" />
         </vbox>
       </hbox>
+
+      <vbox id="protections-popup-settings-section"
+            class="identity-popup-section">
+        <toolbarbutton id="protections-popup-settings-button"
+                       oncommand="ContentBlocking.openPreferences();">
+          <image class="protection-settings-icon"/>
+          <label class="protections-popup-settings-label" flex="1">Protection Settings</label>
+        </toolbarbutton>
+      </vbox>
     </panelview>
   </panelmultiview>
 </panel>

browser/themes/shared/controlcenter/panel.inc.css

@@ -191,7 +191,8 @@
 #identity-popup-security-descriptions > description,
 #identity-popup-securityView-body > description,
 #identity-popup-permissions-content > description,
-#identity-popup-content-blocking-content > description {
+#identity-popup-content-blocking-content > description,
+.protections-popup-settings-label {
   font-size: 110%;
   margin: 0;
 }
@@ -398,7 +399,8 @@ description#identity-popup-content-verifier,
 }
 
 .identity-popup-content-blocking-category:-moz-focusring,
-.identity-popup-content-blocking-category:hover {
+.identity-popup-content-blocking-category:hover,
+#protections-popup-settings-button:hover {
   border-radius: 2px;
   background-color: var(--arrowpanel-dimmed);
   outline: none;
@@ -718,7 +720,8 @@ description#identity-popup-content-verifier,
 .identity-popup-content-blocking-category-label,
 .identity-popup-content-blocking-category-state-label,
 .identity-popup-permission-label,
-.identity-popup-permission-state-label {
+.identity-popup-permission-state-label,
+.protections-popup-settings-label {
   /* We need to align the action buttons and permission icons with the text.
      This is tricky because the icon height is defined in pixels, while the
      font height can vary with platform and system settings, and at least on
@@ -732,7 +735,8 @@ description#identity-popup-content-verifier,
 }
 
 .identity-popup-content-blocking-category-label,
-.identity-popup-permission-label {
+.identity-popup-permission-label,
+.protections-popup-settings-label {
   margin-inline-start: 1em;
 }
 
@@ -857,3 +861,21 @@ description#identity-popup-content-verifier,
 #protections-popup-tp-switch[enabled=true]:-moz-focusring {
   background-color: #45a1ff;
 }
+
+#protections-popup-settings-section {
+  padding: 4px;
+  -moz-context-properties: fill, fill-opacity;
+}
+
+#protections-popup-settings-button {
+  /* We need to align the setting button with the labels in the tp switch
+     section. So we add 6px to offset the margin of labels. */
+  padding-inline-start: calc(1em + 6px);
+  min-height: 37px;
+}
+
+.protection-settings-icon {
+  width: 16px;
+  height: 16px;
+  list-style-image: url(chrome://browser/skin/settings.svg);
+}