Fix dynamic content loading init problem (#33748)

1. Rewrite `dirauto.ts` to `observer.ts`. 
* We have been using MutationObserver for long time, it's proven that it
is quite performant.
    * Now we extend its ability to handle more "init" works.
2. Use `observeAddedElement` to init all non-custom "dropdown".
3. Use `data-global-click` to handle click events from dynamically
loaded elements.
* By this new approach, the old fragile selector-based
(`.comment-reaction-button`) mechanism is removed.
4. By the way, remove unused `.diff-box` selector, it was abused and
never really used.

A lot of FIXMEs in "repo-diff.ts" are completely fixed, newly loaded
contents could work as expected.

web_src/js/features/repo-graph.ts

@@ -83,8 +83,8 @@ export function initRepoGraphGit() {
   }
 
   const flowSelectRefsDropdown = document.querySelector('#flow-select-refs-dropdown');
-  fomanticQuery(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
-  fomanticQuery(flowSelectRefsDropdown).dropdown({
+  const $dropdown = fomanticQuery(flowSelectRefsDropdown);
+  $dropdown.dropdown({
     clearable: true,
     fullTextSeach: 'exact',
     onRemove(toRemove: string) {
@@ -110,6 +110,7 @@ export function initRepoGraphGit() {
       updateGraph();
     },
   });
+  $dropdown.dropdown('set selected', dropdownSelected);
 
   graphContainer.addEventListener('mouseenter', (e: DOMEvent<MouseEvent>) => {
     if (e.target.matches('#rev-list li')) {