Adjust and group options style with headers like Firefox #43

src/_locales/en/messages.json

@@ -196,6 +196,18 @@
     "message": "Some settings are managed by your system administrator and cannot be changed.",
     "description": "The message, which appears, when settings are pre-defined (as managed options) by administrators."
   },
+  "titleGeneral": {
+    "message": "Add-on",
+    "description": "The title for the general settings group."
+  },
+  "titleQrCodeSetting": {
+    "message": "QR code",
+    "description": "The title for the qr code settings group."
+  },
+  "titleAddonBehavior": {
+    "message": "Add-on behavior",
+    "description": "The title for the addon behavior settings group."
+  },
   "optionIsDisabledBecauseManaged": {
     "message": "This option is disabled, because it has been configured by your system administrator.",
     "description": "The title (tooltip) shown, when hovering over a disabled, managed option."
@@ -211,14 +223,14 @@
 
   "optionPopupIconColored": {
     "message": "Colored icon",
-    "description": "This is an option shown in the add-on settings."
+      "description": "This is an option shown in the add-on settings."
   },
   "optionPopupIconColoredDescr": {
     "message": "Shows a colored icon instead of the black/white icon in the toolbar.",
     "description": "This is an option shown in the add-on settings. It describes the optionPopupIconColored setting in more details."
   },
 
-  "optionQrCodeType": {
+  "subtitleQrCodeType": {
     "message": "QR code type",
     "description": "The heading/grouping title shown for the radio buttons for the type setting of the QR code."
   },
@@ -239,7 +251,7 @@
     "description": "Helper text for canvas QR code type option."
   },
 
-  "optionQrCodeSize": {
+  "subtitleQrCodeSize": {
     "message": "QR code size",
     "description": "The heading/grouping title shown for the radio buttons for the size setting of the QR code."
   },
@@ -264,6 +276,10 @@
     "description": "This is an option shown in the add-on settings. It is one option for selecting the QR code size."
   },
 
+  "subtitleMisc": {
+    "message": "Miscellaneous settings",
+    "description": "The heading/grouping title shown for the miscellaneous setting of the QR code."
+  },
   "optionQrQuietZone": {
     "message": "QR quiet zone:",
     "description": "This is an option shown in the add-on settings. It's about the area around the QR code."

src/common/common.css

@@ -135,7 +135,7 @@ a:active {
   border-radius: 4px;
 
   /* use whole width */
-  width: 100%;
+  width: calc(100% - 8px);
   min-height: 32px;
 
   /* make errors selectable, so users can copy them */

src/options/options.css

@@ -1,7 +1,11 @@
+:root {
+  --gray-separator: rgba(12, 12, 13, 0.15);
+}
+
 body {
-  /* the style the other options in the settings pane use */
-  font-size: 1.11em;
-  color: #333;
+  /* body20 */
+  font-size: 15px;
+  padding: 0 8px;
 }
 
 /* on (small) mobile displays */
@@ -20,74 +24,77 @@ body.mobile .mobile-incompatible {
   opacity: 0.4;
 }
 
-ul {
-  margin: 0px;
-  padding: 0px;
+section {
+  margin-bottom: 32px;
 }
-li {
-  list-style-type: none;
-  margin-top: 10px;
-  padding: 0px;
-}
-/* in a fieldset e.g. we use a condensed version */
-.condensed-list {
-  margin-left: 0px;
+
+hr {
+  border: 0;
+  height: 1px;
+  background-color: var(--gray-separator);
 }
 
-fieldset {
-  /* same border style as separators above */
-  border: 1px solid;
-  border-radius: 4px;
-  border-color: var(--grey-30); /* Firefox: --in-content-box-border-color */
+h1 {
+  margin: 32px 0 16px 0;
+  padding: 16px 0 0 0;
 
-  /* a big width, but not too big */
-  display: inline-block;
-  width: auto;
-  min-width: 60vw;
+  /* title30 */
+  font-size: 22px;
+  font-weight: 300;
 
-  margin-bottom: 4px;
+  border-top: 1px solid var(--gray-separator);
 }
 
-/* when a setting has a label *before* it, add some margin */
-label + .setting {
-  margin-left: 8px;
+form section:first-child h1 {
+  border-top: none;
+  margin-top: 16px;
 }
 
-.helper-text {
-  display: block;
-  color: var(--grey-50);
+h2{
+  /* title20 */
+  font-size: 17px;
+  font-weight: 600;
+  margin: 32px 0 16px 0;
+}
 
-  margin-top: 4px;
+ul {
+  margin: 0;
+  padding: 0;
 }
 
-/* some margin to align with checkbox */
-input[type=checkbox] ~ .helper-text,
-input[type=radio] ~ .helper-text {
-  /* 4px margin-left + 16px size + 3px margin-right + 5px space (#text) */
-  margin-left: 28px;
+li {
+  list-style-type: none;
+
+  padding: 2px 0;
+  margin: 0 0 4px 0;
+
+  display: flex;
+  align-items: center;
 }
 
-/* when a link is used in a helper text, add margin */
-.helper-text > a {
-  margin-left: 4px;
-  overflow-wrap: none;
+li * {
+  /* https://design.firefox.com/photon/visuals/grid.html#spacing */
+  margin: 0 8px 0 0;
 }
 
-/* special options values */
+li.indent {
+  margin-inline-start: 28px;
+}
 
-#popupIconColor {
+.helper-text {
+  /* caption30 */
+  font-size: 15px;
+  color: var(--grey-50);
   display: inline;
 }
 
-#qrQuietZone {
-  position: relative;
-  top: 5px;
-  cursor: pointer;
-  /* -webkit-appearance: none; */
+/* when a link is used in a helper text, add margin */
+.helper-text > a {
+  margin-left: 4px;
+  overflow-wrap: none;
 }
 
-#qrCodeSizeFixedValue {
-  width: 4.5em;
+button {
+  padding: 4px 8px;
 }
 
-/* TODO: make i icon bigger */