Add links to settings v2 headings (#1212)

ext/bg/css/settings2.css

@@ -201,6 +201,14 @@ h3 {
     width: 100%;
     align-items: baseline;
 }
+.heading-container a {
+    color: inherit;
+    transition: background-color var(--animation-duration) ease-in-out;
+}
+.heading-container a:hover {
+    color: var(--link-color-hover);
+    text-decoration: none;
+}
 .heading-container-icon {
     flex: 0 0 auto;
     align-self: center;

ext/bg/settings2.html

@@ -83,7 +83,7 @@
     <!-- Profile -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="profile"></span></div>
-        <div class="heading-container-left"><h2 id="profile">Profile</h2></div>
+        <div class="heading-container-left"><h2 id="profile"><a href="#!profile">Profile</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
@@ -117,7 +117,7 @@
     <!-- Dictionaries -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="book"></span></div>
-        <div class="heading-container-left"><h2 id="dictionaries">Dictionaries <span class="heading-sub-text no-wrap" data-modal-action="show,dictionaries">(<span id="dictionary-install-count">#</span> installed)</span></h2></div>
+        <div class="heading-container-left"><h2 id="dictionaries"><a href="#!dictionaries">Dictionaries</a> <span class="heading-sub-text no-wrap" data-modal-action="show,dictionaries">(<span id="dictionary-install-count">#</span> installed)</span></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item settings-item-button" data-modal-action="show,dictionaries"><div class="settings-item-inner">
@@ -193,7 +193,7 @@
     <!-- General -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="cog"></span></div>
-        <div class="heading-container-left"><h2 id="general">General</h2></div>
+        <div class="heading-container-left"><h2 id="general"><a href="#!general">General</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner">
@@ -297,7 +297,7 @@
     <!-- Scanning -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="scanning"></span></div>
-        <div class="heading-container-left"><h2 id="scanning">Scanning</h2></div>
+        <div class="heading-container-left"><h2 id="scanning"><a href="#!scanning">Scanning</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item">
@@ -472,7 +472,7 @@
     <!-- Popup -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="popup"></span></div>
-        <div class="heading-container-left"><h2 id="popup">Popup</h2></div>
+        <div class="heading-container-left"><h2 id="popup"><a href="#!popup">Popup</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner">
@@ -555,7 +555,7 @@
     <!-- Popup Appearance -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="palette"></span></div>
-        <div class="heading-container-left"><h2 id="popup-appearance">Popup Appearance</h2></div>
+        <div class="heading-container-left"><h2 id="popup-appearance"><a href="#!popup-appearance">Popup Appearance</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
@@ -736,7 +736,7 @@
     <!-- Popup Position & Size -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="popup-size"></span></div>
-        <div class="heading-container-left"><h2 id="popup-size">Popup Position &amp; Size</h2></div>
+        <div class="heading-container-left"><h2 id="popup-size"><a href="#!popup-size">Popup Position &amp; Size</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item">
@@ -921,7 +921,7 @@
     <!-- Window -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="window"></span></div>
-        <div class="heading-container-left"><h2 id="window">Window</h2></div>
+        <div class="heading-container-left"><h2 id="window"><a href="#!window">Window</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item">
@@ -992,7 +992,7 @@
     <!-- Audio -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="speaker"></span></div>
-        <div class="heading-container-left"><h2 id="audio">Audio</h2></div>
+        <div class="heading-container-left"><h2 id="audio"><a href="#!audio">Audio</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner">
@@ -1036,7 +1036,7 @@
     <div>
         <div class="heading-container">
             <div class="heading-container-icon"><span class="icon" data-icon="text-parsing"></span></div>
-            <div class="heading-container-left"><h2 id="text-parsing">Text Parsing</h2></div>
+            <div class="heading-container-left"><h2 id="text-parsing"><a href="#!text-parsing">Text Parsing</a></h2></div>
             <div class="heading-container-right"><a class="more-toggle more-only heading-link-light" data-parent-distance="3">Info&hellip;</a></div>
         </div>
         <div class="heading-description more" hidden>
@@ -1111,7 +1111,7 @@
     <div>
         <div class="heading-container">
             <div class="heading-container-icon"><span class="icon" data-icon="translation"></span></div>
-            <div class="heading-container-left"><h2 id="translation">Translation</h2></div>
+            <div class="heading-container-left"><h2 id="translation"><a href="#!translation">Translation</a></h2></div>
             <div class="heading-container-right"><a class="more-toggle more-only heading-link-light" data-parent-distance="3">Info&hellip;</a></div>
         </div>
         <div class="heading-description more" hidden>
@@ -1236,7 +1236,7 @@
     <div>
         <div class="heading-container">
             <div class="heading-container-icon"><span class="icon" data-icon="note-card"></span></div>
-            <div class="heading-container-left"><h2 id="anki">Anki</h2></div>
+            <div class="heading-container-left"><h2 id="anki"><a href="#!anki">Anki</a></h2></div>
             <div class="heading-container-right"><a class="more-toggle more-only heading-link-light" data-parent-distance="3">Info&hellip;</a></div>
         </div>
         <div class="heading-description more" hidden>
@@ -1433,7 +1433,7 @@
     <!-- Shortcuts -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="keyboard"></span></div>
-        <div class="heading-container-left"><h2 id="shortcuts">Shortcuts</h2></div>
+        <div class="heading-container-left"><h2 id="shortcuts"><a href="#!shortcuts">Shortcuts</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner">
@@ -1465,7 +1465,7 @@
     <!-- Backup -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="backup"></span></div>
-        <div class="heading-container-left"><h2 id="backup">Backup</h2></div>
+        <div class="heading-container-left"><h2 id="backup"><a href="#!backup">Backup</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner">
@@ -1498,7 +1498,7 @@
     <!-- Security -->
     <div class="heading-container advanced-only">
         <div class="heading-container-icon"><span class="icon" data-icon="lock"></span></div>
-        <div class="heading-container-left"><h2 id="security">Security</h2></div>
+        <div class="heading-container-left"><h2 id="security"><a href="#!security">Security</a></h2></div>
     </div>
     <div class="settings-group advanced-only">
         <div class="settings-item">