feat: Collapse pull request side menus on load (#342)

- works for old and new pr experience
- no automated tests because the onClick event is handled by bitbucket
- added screen resolution support, default `1360`
- fixed sticky header that were above side menu zIndex > 1. Fixes #336 

<details>
  <summary>[Click to view capture] The Sticky Header bug with z-index 9</summary>

<img src="https://user-images.githubusercontent.com/23088305/79061876-759bb780-7c62-11ea-9f25-60d2a975909a.gif" />

</details>

Since RB events don't trigger when navigating between PullRequest list
and PR, which is a good thing, if the user expand the left side menu in
or outside of a PR, it will stay like this when returning to a PR.

---

![collapse](https://user-images.githubusercontent.com/23088305/79062012-2060a580-7c64-11ea-81f4-df4ca24f6221.gif)

Fixes #336

src/background.js

@@ -21,6 +21,8 @@ new OptionsSync().define({
         copyFilename: true,
         keymap: true,
         collapsePullRequestDescription: true,
+        collapsePullRequestSideMenus: true,
+        collapsePrSideMenusResolutionSize: 1360,
         collapseDiff: true,
         loadAllDiffs: true,
         closeAnchorBranch: true,

src/collapse-pull-request-side-menus/collapse-pull-request-side-menus.js

@@ -0,0 +1,13 @@
+export default function collapsePullRequestSideMenus(windowWidth) {
+    if (windowWidth > 0 && windowWidth < window.innerWidth) return
+
+    const left = document.querySelector(
+        'button[data-qa-id="expand-collapse-button"][aria-expanded="true"]'
+    )
+    if (left) left.click()
+
+    const right = document.querySelector(
+        '#PullRequestWelcomeTourTarget-Sidebar button[data-testid="collapse-sidebar-button"][aria-expanded="true"]'
+    )
+    if (right) right.click()
+}

src/collapse-pull-request-side-menus/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './collapse-pull-request-side-menus'

src/main.js

@@ -36,6 +36,7 @@ import mergeCommitMessageNew from './merge-commit-message-new'
 import collapsePullRequestDescription from './collapse-pull-request-description'
 import setStickyHeader from './sticky-header'
 import setLineLengthLimit from './limit-line-length'
+import collapsePullRequestSideMenus from './collapse-pull-request-side-menus'
 
 import observeForWordDiffs from './observe-for-word-diffs'
 
@@ -264,6 +265,10 @@ function pullrequestRelatedFeaturesNew(config) {
         mergeCommitMessageNew(config.mergeCommitMessageUrl)
     }
 
+    if (config.collapsePullRequestSideMenus) {
+        collapsePullRequestSideMenus(config.collapsePrSideMenusResolutionSize)
+    }
+
     if (config.copyFilename) {
         // eslint-disable-next-line no-new
         new SelectorObserver(
@@ -298,4 +303,8 @@ function pullrequestRelatedFeaturesOld(config) {
     if (config.collapsePullRequestDescription) {
         collapsePullRequestDescription()
     }
+
+    if (config.collapsePullRequestSideMenus) {
+        collapsePullRequestSideMenus(config.collapsePrSideMenusResolutionSize)
+    }
 }

src/options.html

@@ -30,8 +30,9 @@
         <br />
 
         <label>
-            <input type="checkbox" name="ignoreWhitespace" /> Set "Ignore
-            whitespace" ON by default in the Old PR Experience (already natively supported in the New PR experience)
+            <input type="checkbox" name="ignoreWhitespace" /> Set "Ignore 
+            whitespace" ON by default in the Old PR Experience 
+            (already natively supported in the New PR experience)
         </label>
         <br />
         <br />
@@ -49,6 +50,15 @@
         <br />
         <br />
 
+        <label>
+            <input type="checkbox" name="collapsePullRequestSideMenus" />
+            By default on a pull request, collapse side menus when screen width is under
+            <input type="number" name="collapsePrSideMenusResolutionSize" min="0" style="width: 60px;" />
+            <span>px. (0 = unlimited)</span>
+        </label>
+        <br />
+        <br />
+
         <label>
             <input type="checkbox" name="collapseDiff" /> Add "Toggle diff
             text" button to collapse diff sections
@@ -263,4 +273,4 @@
     <script src="options.js"></script>
 </body>
 
-</html>
+</html>

src/sticky-header/sticky-header.js

@@ -8,11 +8,12 @@ export default function setStickyHeader() {
 }
 
 function createCssRule() {
+    // Z-index above 1 hide the dynamic side menu
     const cssRule = `
         .diff-container .heading {
             position: sticky;
             top: 0px;
-            z-index: 9;
+            z-index: 1;
             border: 1px solid #DFE1E6;
         }