Convert Twitter Notification "All" tab to a "QTs" tab

quotetweet-notif-hack.js

/** WHO:  @Malcolm_Ocean
    WHEN: 2019-07-29 @ 13:06

    WHAT: See who's quoting you on Twitter by converting your All notification tab to show only QTs
          This is mostly a proof of concept, because:
              A) it's a little script, not a full-on userscript or browser extension
              B) the ratio of other shit to QTs is so high that since it can only filter,
                 it must load & hide hundreds of other likes etc ...which makes it very slow
                 (so, in my experience, it's hard to get further back than a few hundred notifications)
                 (in fact I thiiiiiink at that point it actually restarts.)
                 
          Non-QTs are shown as 2px lines so that you can see that it's indeed loading more
              and see how much chaff it is separating from your wheat.
    
    WHY:  quote-tweets are the killer feature of Twitter
          and currently they don't show up in Mentions or elsewhere
          https://twitter.com/visakanv/status/1137018856075976714
    
    HOW:
       1. open your Notifications on Twitter
       2. open the javascript console (How: http://tinyurl.com/jscons)
       3. paste in this script and hit enter
       4. wait, and possibly scroll up & down to trigger Twitter's "load more" function
       
    WHERE:
       discuss here: https://twitter.com/Malcolm_Ocean/status/1155891108498616320
       (including improvements, such as making it an auto-running userscript or full-on extension)
       (or, hell, using the actual twitter API so that there's a less-hacky solution)
*/

;(function () {
  ;(function insertCSS () {
    var css = `.mo-nonqt-hidden {
                 height: 0 !important;
                 max-height: 0 !important;
                 overflow: hidden;
                 border-top: 1px solid #666;
                 border-bottom: 1px solid #999;
               }`,
        head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style')

    style.type = 'text/css'
    style.appendChild(document.createTextNode(css))
    head.appendChild(style)
  })()
  var tab = document.querySelector('[role="navigation"] > [role="tablist"] [href="/notifications"][role=tab]')
  var tabText = tab.childNodes[0].childNodes[0]
  tabText.textContent = 'QTs'
  // swapText(tabText, "QTs")
  var username = document.querySelector('[aria-label="Profile"]').href.replace(/.*\//, '')
  var regExp = new RegExp('role=.blockquote[\\s\\S]*@'+username+'[\\s\\S]*·')
              // last character is a middot in the middle of the time/date
              // which is after the quoted user's username but before the content
  function filterQTs (node) {
    if (tab.getAttribute('aria-selected') !== 'true' && tab.getAttribute('aria-selected') !== true) {
      return
    }
    if (!regExp.test(node.innerHTML)) {
      node.className = node.className + ' mo-nonqt-hidden'
            node.innerHTML = ''

    }
    // var randomColor = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16)})
      // node.setAttribute('style', 'background: '+randomColor +' !important; border-left: 3px solid ' + randomColor + ' !important')
  }

  var notificationList = document.querySelector('[aria-label="Timeline: Notifications"] > div > div')
  notificationList.childNodes.forEach(x => filterQTs(x))

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      mutation.addedNodes.forEach(x => filterQTs(x))
    })
  })
  observer.observe(notificationList, { childList: true, subtree: false })
})();