Started working on preferences page

src/browser/components/preferences/jar-mn.patch

@@ -0,0 +1,10 @@
+diff --git a/browser/components/preferences/jar.mn b/browser/components/preferences/jar.mn
+index 3b60d18e483bc3c4e9b4309f0dc1e4231b7116b1..aa30bc3de15b68ac90c12142a8851af99e1209ae 100644
+--- a/browser/components/preferences/jar.mn
++++ b/browser/components/preferences/jar.mn
+@@ -23,3 +23,5 @@ browser.jar:
+    content/browser/preferences/more-from-mozilla-qr-code-simple-cn.svg
+    content/browser/preferences/web-appearance-dark.svg
+    content/browser/preferences/web-appearance-light.svg
++
++   content/browser/preferences/zen-looks.js

src/browser/components/preferences/main-js.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/components/preferences/main.js b/browser/components/preferences/main.js
+index b9487ece26cfe21a32199a7e36f29b3aa3b8d700..ce02f54cab85d4da8cb306f0d5f3378c9e30df37 100644
+--- a/browser/components/preferences/main.js
++++ b/browser/components/preferences/main.js
+@@ -212,7 +212,7 @@ function getBundleForLocales(newLocales) {
+     ])
+   );
+   return new Localization(
+-    ["browser/preferences/preferences.ftl", "branding/brand.ftl"],
++    ["browser/preferences/preferences.ftl", "branding/brand.ftl", "browser/preferences/zen-preferences.ftl"],
+     false,
+     undefined,
+     locales

src/browser/components/preferences/preferences-js.patch

@@ -0,0 +1,12 @@
+diff --git a/browser/components/preferences/preferences.js b/browser/components/preferences/preferences.js
+index 31ae84f3820aa12a26e10b27718bdc7da277f31b..427d44698ffe5d8154c5503a415ce9ec98982f3b 100644
+--- a/browser/components/preferences/preferences.js
++++ b/browser/components/preferences/preferences.js
+@@ -205,6 +205,7 @@ function init_all() {
+   register_module("panePrivacy", gPrivacyPane);
+   register_module("paneContainers", gContainersPane);
+   register_module("paneTranslations", gTranslationsPane);
++  register_module("paneZenLooks", gZenLooksAndFeel);
+   if (Services.prefs.getBoolPref("browser.preferences.experimental")) {
+     // Set hidden based on previous load's hidden value.
+     document.getElementById("category-experimental").hidden =

src/browser/components/preferences/preferences-xhtml.patch

@@ -0,0 +1,49 @@
+diff --git a/browser/components/preferences/preferences.xhtml b/browser/components/preferences/preferences.xhtml
+index 38fba9a7265cbcec406fd4145014083286fa798e..38281e4fc127543052064020ebf14ad0e72abda5 100644
+--- a/browser/components/preferences/preferences.xhtml
++++ b/browser/components/preferences/preferences.xhtml
+@@ -42,6 +42,10 @@
+     href="chrome://browser/skin/preferences/containers.css"
+   />
+   <link rel="stylesheet" href="chrome://browser/skin/preferences/privacy.css" />
++  <link
++    rel="stylesheet"
++    href="chrome://browser/skin/preferences/zen-preferences.css"
++  />
+ 
+   <link rel="localization" href="branding/brand.ftl"/>
+   <link rel="localization" href="browser/browser.ftl"/>
+@@ -52,6 +56,7 @@
+   <link rel="localization" href="toolkit/branding/accounts.ftl"/>
+   <link rel="localization" href="toolkit/branding/brandings.ftl"/>
+   <link rel="localization" href="toolkit/featuregates/features.ftl"/>
++  <link rel="localization" href="browser/preferences/zen-preferences.ftl"/>
+ 
+   <!-- Links below are only used for search-l10n-ids into subdialogs -->
+   <link rel="localization" href="browser/aboutDialog.ftl"/>
+@@ -111,6 +116,17 @@
+           <label class="category-name" flex="1" data-l10n-id="pane-general-title"></label>
+         </richlistitem>
+ 
++        <richlistitem id="category-zen-looks"
++                      class="category"
++                      value="paneZenLooks"
++                      helpTopic="prefs-main"
++                      data-l10n-id="category-zen-looks"
++                      data-l10n-attrs="tooltiptext"
++                      align="center">
++          <image class="category-icon"/>
++          <label class="category-name" flex="1" data-l10n-id="pane-zen-looks-title"></label>
++        </richlistitem>
++
+         <richlistitem id="category-home"
+                       class="category"
+                       value="paneHome"
+@@ -247,6 +263,7 @@
+ #include sync.inc.xhtml
+ #include experimental.inc.xhtml
+ #include moreFromMozilla.inc.xhtml
++#include zenLooksAndFeel.inc.xhtml
+         </vbox>
+       </vbox>
+     </vbox>

src/browser/components/preferences/zen-looks.js

@@ -0,0 +1,6 @@
+
+var gZenLooksAndFeel = {
+  init() {
+    
+  }
+};

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -0,0 +1,13 @@
+<script src="chrome://browser/content/preferences/zen-looks.js"/>
+<html:template id="template-paneZenLooks">
+<hbox id="zenLooksCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneZenLooks">
+</hbox>
+
+<groupbox data-category="paneZenLooks" hidden="true" class="highlighting-group">
+ TODO!
+</groupbox>
+
+</html:template>

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -0,0 +1,4 @@
+
+pane-zen-looks-title = Look And Feel
+category-zen-looks =
+    .tooltiptext = { pane-zen-looks-title }

src/browser/themes/shared/preferences/zen-preferences.css

@@ -0,0 +1,4 @@
+
+#category-zen-looks > .category-icon {
+  list-style-image: url("chrome://browser/skin/customize.svg");
+}

src/browser/themes/shared/zen-browser-shared.css

@@ -300,3 +300,7 @@ toolbarbutton#scrollbutton-up {
 .footer-button {
   padding: 0.60em 1.9em !important;
 }
+
+menuseparator {
+  --panel-separator-color: var(--zen-colors-secondary) !important;
+}

src/browser/themes/shared/zen-sources.inc.mn

@@ -1,5 +1,6 @@
   skin/classic/browser/zen-browser-shared.css                      (../shared/zen-browser-shared.css)
   skin/classic/browser/zen-sidebar.css                             (../shared/zen-sidebar.css)
   skin/classic/browser/zen-panel-ui.css                            (../shared/zen-panel-ui.css)
+  skin/classic/browser/preferences/zen-preferences.css             (../shared/preferences/zen-preferences.css)
 
 #include zen-icons/jar.inc.mn