enh: re-insert badges when side menu expands (#350)

About branch and pull request count badges.

Once again I updated a feature on my fork, so here, I share it.

- I noticed the counters were not accurate, now it fetches on mount,
  so we will see more often a valid badge counter when using the
  floating-contextual-collapsed-menu
- If the menu was unmounted the badge never came back,
  now it uses `SelectorObserver`
- I handled the other menu, contextual floating menu, the one that
  appears when the other menu is collapsed and you just hover
  the side menu line.
- I noticed bitbucket does not have menu link icons when the menu
  is collapsed, so I added badges
- I reduced the max number from `99999+` to `+99` since in my opinion
  having more than 99 it's a sign that you lost track of it,
  you must do some clean up to reduce the counter.
  Just like messaging app can easily go over 99 but they also show `+99`
  when you don't care enough to clean your messages. So normally users,
  should care about having branches over 50, and PR over 10/20. 
  Here at work on the biggest project we never went over 20 branches
  and 20 PRs, normally they close in 2hrs to 6hrs.
- I changed `?` to `!` for the only matter that `?` can't be centred in
  the badge, and i chose `!` cause it's quite common to see it when an
  error occurred, here the api did not responded, bad token
- I made sure it works with the new pull request experience, UI V2

![image](https://user-images.githubusercontent.com/23088305/80050885-d3db5c80-84e4-11ea-831a-998958cda9b5.png)

![g](https://user-images.githubusercontent.com/23088305/80053404-d771e200-84ea-11ea-8089-cde16b9dce00.gif)

![image](https://user-images.githubusercontent.com/23088305/80054389-17d25f80-84ed-11ea-98ba-37bc9d1eb54d.png)

Close #185

src/background-for-requests.js

@@ -80,8 +80,13 @@ async function get<T: Object>(
             Authorization: `Bearer ${token}`,
         }),
     })
-    const result: BitbucketAPIErrorResponse | T = await response.json()
-    return result
+    try {
+        const result: BitbucketAPIErrorResponse | T = await response.json()
+        return result
+    } catch (error) {
+        console.error(error)
+        throw error
+    }
 }
 
 function exhaustiveCheck(value: empty) {

src/sidebar-counters/sidebar-counters.css

@@ -1,17 +1,31 @@
 .__rbb-badge {
     position: absolute;
-    right: 4px;
-    bottom: -1px;
+    right: 5px;
+    width: 1.5em;
+    height: 1.5em;
 }
 
-.__rbb-badge-counter {
-    font-weight: 650;
-    font-size: 10px;
-    border-radius: 50%;
-    height: 100%;
+.__rbb-badge::before {
+    content: '';
+    background: #a00;
+    border-radius: 1em;
+    position: absolute;
     width: 100%;
-    box-sizing: border-box;
-    align-content: center;
-    align-items: center;
-    padding: 2px;
+    height: 100%;
+}
+
+.__rbb-badge-counter {
+    color: #fff;
+    font-weight: 600;
+    font-size: 0.8em;
+    position: absolute;
+    text-align: center;
+    line-height: 1.9em;
+    right: 0;
+    left: 0;
+}
+
+.__rbb-badge-counter.-max::before {
+    content: '+';
+    font-weight: 200;
 }

src/sidebar-counters/sidebar-counters.js

@@ -2,68 +2,88 @@
 // @jsx h
 
 import { h } from 'dom-chef'
-import elementReady from 'element-ready'
+import SelectorObserver from 'selector-observer'
+
 import api from '../api'
 
 import './sidebar-counters.css'
 
-export const addBadge = (
-    a: HTMLAnchorElement,
-    resources: $Exact<{ size: number }> | void
-) => {
-    const navLinksContainer: HTMLElement = (a.parentNode: any)
-    navLinksContainer.style.overflow = 'hidden'
-
-    a.style.position = 'relative'
-
-    const size =
-        // eslint-disable-next-line eqeqeq, no-eq-null
-        resources == null || resources.size == null
-            ? '?'
-            : resources.size > 999999
-                ? '999999+'
-                : resources.size
-
-    const badge = (
-        <span class="__rbb-badge">
-            <span class="__rbb-badge-counter">{size}</span>
+type MenuCounter = $Exact<{
+    branches: number,
+    'pull-requests': number,
+}>
+
+const menus = ['branches', 'pull-requests']
+
+const MAX_COUNTER = 99
+
+export function getBadge(size: number): HTMLElement {
+    const maxReached = size > MAX_COUNTER
+    const isNumber = typeof size === 'number'
+
+    return (
+        <span class="__rbb-badge" title={isNumber ? size : ''}>
+            <span
+                class={
+                    maxReached
+                        ? '__rbb-badge-counter -max'
+                        : '__rbb-badge-counter'
+                }
+            >
+                {isNumber ? Math.min(size, MAX_COUNTER) : '!'}
+            </span>
         </span>
     )
-    a.insertBefore(badge, a.firstChild)
-    return badge
 }
 
-export default async function addSideBarCounters() {
-    // Exit early if can't find any of the nav links
+export function addCounterToMenuItem(
+    menu: HTMLElement,
+    menusCounters: MenuCounter
+): void {
+    const link: HTMLAnchorElement = (menu.querySelector('a'): any)
+
+    if (!link) return
+
+    const hrefParts = (link.getAttribute('href') || '').split('/')
+    const wantedMenuFromHref = hrefParts.find(x => menus.includes(x))
+
+    // Exit early if can't find one of the nav links
     // that we are going to augment with badge counters
-    const branchesLink: HTMLAnchorElement = await elementReady(
-        'a[href$="branches/"]'
-    )
-    const pullRequestsLink: HTMLAnchorElement = await elementReady(
-        'a[href$="pull-requests/"]'
-    )
+    if (!wantedMenuFromHref) return
 
-    if (!branchesLink || !pullRequestsLink) {
-        return
-    }
+    const size = menusCounters[wantedMenuFromHref]
+    const badge = getBadge(size)
 
+    menu.style.overflow = 'hidden'
+    link.style.position = 'relative'
+    link.insertBefore(badge, link.firstChild)
+}
+
+export default async function addSideBarCounters() {
     const [branches, pullrequests] = await Promise.all([
         api.getBranches(),
         api.getPullrequests(),
     ])
 
-    const branchesBadge = addBadge(branchesLink, branches)
-    const prBadge = addBadge(pullRequestsLink, pullrequests)
+    const branchesCount = (branches || {}).size
+    const pullRequestsCount = (pullrequests || {}).size
 
-    const resizeButton: HTMLButtonElement = await elementReady(
-        '.ak-navigation-resize-button'
-    )
-    if (resizeButton) {
-        resizeButton.addEventListener('click', () => {
-            const isExpanded =
-                resizeButton.getAttribute('aria-expanded') === 'true'
-            branchesBadge.style.bottom = isExpanded ? '-1px' : 'unset'
-            prBadge.style.bottom = isExpanded ? '-1px' : 'unset'
-        })
+    const menusCounters: MenuCounter = {
+        branches: branchesCount,
+        'pull-requests': pullRequestsCount,
     }
+
+    const contentNavigationSelector =
+        'div[data-testid="Content"] div[role="presentation"]'
+    const contextualNavigationSelector =
+        'div[data-testid="ContextualNavigation"] div[role="presentation"]'
+
+    // eslint-disable-next-line no-new
+    new SelectorObserver(
+        document.body,
+        [contentNavigationSelector, contextualNavigationSelector].join(', '),
+        function() {
+            addCounterToMenuItem(this, menusCounters)
+        }
+    )
 }