Add tabs for chapters and other segments

public/_locales/en/messages.json

@@ -25,6 +25,12 @@
     "Segments": {
         "message": "segments"
     },
+    "SegmentsCap": {
+        "message": "Segments"
+    },
+    "Chapters": {
+        "message": "Chapters"
+    },
     "upvoteButtonInfo": {
         "message": "Upvote this submission"
     },

public/popup.css

@@ -409,3 +409,37 @@ label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponso
 
   border-radius: 5px;
 }
+
+#issueReporterTabs {
+  margin: 5px;
+}
+
+#issueReporterTabs > span {
+  padding: 2px 4px;
+  margin: 0 3px;
+  cursor: pointer;
+  background-color: #444848;
+  border-radius: 10px;
+}
+
+#issueReporterTabs > span > span {
+  position: relative;
+  padding: 0.2em 0;
+}
+
+#issueReporterTabs > span > span::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0.1em;
+  background-color: rgb(145, 0, 0);
+  transition: transform 300ms;
+  transform: scaleX(0);
+  transform-origin: center;
+}
+
+#issueReporterTabs > span.sbSelected > span::after {
+  transform: scaleX(0.8);
+}

public/popup.html

@@ -24,6 +24,14 @@
           </button>
         </div>
         <div id="issueReporterContainer">
+          <div id="issueReporterTabs" class="hidden">
+            <span id="issueReporterTabSegments" class="sbSelected">
+              <span>__MSG_SegmentsCap__</span>
+            </span>
+            <span id="issueReporterTabChapters">
+              <span>__MSG_Chapters__</span>
+            </span>
+          </div>
           <div id="issueReporterTimeButtons"></div>
         </div>
       </div>