Support for moderator tools

[codygray]

For moderators, up to two additional items are added to the topbar. They are added in a group after the site switcher, with a little separator icon added via an additional CSS class.

Broadly, everything is the same as the user-level tools, just like you were probably hoping. There are just a couple of complications.

The two moderator-specific items are:

• A diamond that displays inbox items in a drop-down menu. This works almost identically to the normal user inbox. The diamond link has the classes -link and js-mod-inbox-button. The drop-down menu that it displays has the classes topbar-dialog, modInbox-dialog, and dno. So...immediately you see a problem: your slick regex won't work, because the naming of these two things diverges slightly.

• To the right of the diamond, displayed only if there are any pending flags, is a simple count link. This links to the flag list, but doesn't display any drop-down menus or do anything else but navigate away from the page when you click on it. It doesn't live-update like other notifications. Thing is, it doesn't really have any identifying classes, so you will probably have to end up matching either by position or by the href content (/admin/dashboard).

Most likely, my description above is cumbersome and unhelpful. Here's the relevant section of the HTML:

<nav class="secondary-nav">
   <div class="-dialog-container js-topbar-dialog-corral">
      <div class="topbar-dialog siteSwitcher-dialog dno">
         ...  <!-- same stuff here -->
      </div>
      
      <div class="topbar-dialog modInbox-dialog dno">
         <div class="header">
            ... <!-- redacted (but, same as all the others) -->
         </div>
         <div class="modal-content">
            ... <!-- redacted (but, same as all the others) -->
         </div>
   </div>
    
   <ol class="-list">
      ...  <!-- same stuff here -->
      
      <!-- site switcher -->
      <li class="-item">
         <a href="https://stackexchange.com" class="-link js-site-switcher-button js-gps-track" data-gps-track="site_switcher.show" title="A list of all 171 Stack Exchange sites">
            <svg aria-hidden="true" class="svg-icon iconStackExchange" width="18" height="18" viewBox="0 0 18 18"><path d="M1 13c0 1.1.9 2 2 2h8v3l3-3h1a2 2 0 0 0 2-2v-2H1v2zM15 1H3a2 2 0 0 0-2 2v2h16V3a2 2 0 0 0-2-2zM1 6h16v4H1V6z"></path></svg>
         </a>
      </li>

      <!-- begin mod tools -->

      <!-- mod-inbox/modInbox (always present) -->
      <li class="-item _has-divider">
         <a href="#" class="-link js-mod-inbox-button" data-url="/topbar/mod-inbox" data-unread-class="" title="Moderator inbox">
            <svg aria-hidden="true" class="svg-icon iconModerator" width="18" height="18" viewBox="0 0 18 18"><path d="M8.4.78c.33-.43.87-.43 1.2 0l5.8 7.44c.33.43.33 1.13 0 1.56l-5.8 7.44c-.33.43-.87.43-1.2 0L2.6 9.78a1.34 1.34 0 0 1 0-1.56L8.4.78z"></path></svg>
         </a>
      </li>
      
      <!-- mod pending flag count (THIS IS NOT IN THE HTML IF THE FLAG COUNT IS ZERO) -->
      <li class="-item">
         <a href="/admin/dashboard" class="-link _text-only" title="1024 posts flagged for moderator attention">
            <span class="indicator-badge _regular">1024</span>
         </a>
      </li>
      
   </ol>
</nav>

My recommendation would probably be to add explicit support for moderator tools, but leave the "other" (unknown) category there, just in case the team gets a wild hair and decides to add some kind of never-before-seen craziness into the topbar.

That should be everything you need, without me inadvertently revealing any major seekrits. If you need anything else, let me know.

[makyen]

Thank you for the information, it's quite helpful and is just what I needed. It's definitely my intent to add explicit support for the moderator tools. Obviously, doing so is complicated by my not being a moderator :-).

Just to confirm: You clearly state the <a href="/admin/dashboard"> is not in the HTML if there are no flags. Is it really not present in the HTML that's delivered for the page when there are no flags? A more "normal" way to handle this (and a bit more jQuery-esque) would be to have it exist, but not have it shown (i.e. display:none;).

While dynamically added HTML can be dealt with, doing so is significantly more complicated than if it always exists in the HTML, but is just hidden/not displayed. Thus, I just want to 100% confirm that the HTML doesn't exist when there are no moderator flags.

With the current version (1.0.0 or 1.0.1) of the script, does the moderator flag indicator get moved correctly in the "other" category (default center)? Even if there are no flags when the page is loaded? If there are no flags when the page is loaded, when there are new flags, does the indicator appear in the moved location, or the original location?

If it does get moved when there are flags at the time the page loads: when the number of flags changes, does it update correctly/normally? Examples of possible incorrect updating: Flag value does not change. A duplicate is created in the original location with the updated value. If there are no flags, does it disappear? If so, does it reappear in the moved location, or the original location?

Basically, the above questions are trying to determine:

• If there are no current flags, does the flag indicator exist in the HTML when the top-nav is created/served.
• If the stock SE scripts finds the flag indicator in the moved location and updates it there. If not, I will have to monitor for updates and move each update to the new location.
• If the flag indicator HTML is actually removed when there are no flags and recreated when new flags appear.

Thanks for working with me on this.

[makyen]

The changes to support this, along with adding/removing the divider, ended up a bit more extensive than I expected. If you would like, there is a version 1.0.1.1 which you can test. You can see the code here and install from here. If you do install this, you will need to manually install from the master (normal) branch when I push a new official version, which should be shortly after you verify that the changes work for the moderator tools. I'll leave a note in this issue when I do update the main branch.

Also included are:

• Add support for add/remove the divider that is with the moderator tools.
• Add support for an additional move-to location to left of search box.
• Add support for "don't move".
• Separate unknowns into Main and secondary per where they exist in the top-nav, if exist.
• Add support for updating the configOptions from the original version.
• Store the current version number of the script.

Version 1.0.1.1 does not include anything that might be needed to support that the HTML for the flags/tools does not exist at the time the top-nav is created. If that really is the case, I'll need to add some more code to account for it.

[codygray]

Just to confirm: You clearly state the <a href="/admin/dashboard"> is not in the HTML if there are no flags. Is it really not present in the HTML that's delivered for the page when there are no flags? A more "normal" way to handle this (and a bit more jQuery-esque) would be to have it exist, but not have it shown (i.e. display:none;).

While dynamically added HTML can be dealt with, doing so is significantly more complicated than if it always exists in the HTML, but is just hidden/not displayed. Thus, I just want to 100% confirm that the HTML doesn't exist when there are no moderator flags.

That's correct. I agree that simply hiding it would be the more normal way of doing it, even with my limited web-programming knowledge, but moderators on sites that occasionally see their flag queues emptied (read: not SO) confirm that the link is not in the HTML when there are no flags.

With the current version (1.0.0 or 1.0.1) of the script, does the moderator flag indicator get moved correctly in the "other" category (default center)? Even if there are no flags when the page is loaded? If there are no flags when the page is loaded, when there are new flags, does the indicator appear in the moved location, or the original location?

I have 1.0.1 installed (from the current master branch), and yes, both moderator elements in the topbar get moved correctly when adjusting the "other" category. I have not tested it when there are no flags (SO is currently hovering around the 200 mark), but I see no reason why removing that element would mess anything up.

There was a recent change, though, and that has resulted in a change to the HTML. :-( The moderator elements are now in the middle of the topbar by default, as was highly requested on the MSE announcement. We now have:

<div class="-actions">
   <nav class="secondary-nav">
      <ol class="-list">
         <li class="-item">
            <a href="#" class="-link js-mod-inbox-button" data-url="/topbar/mod-inbox" data-unread-class="" title="Moderator inbox">
               <svg aria-hidden="true" class="svg-icon iconModerator" width="18" height="18" viewBox="0 0 18 18"><path d="M8.4.78c.33-.43.87-.43 1.2 0l5.8 7.44c.33.43.33 1.13 0 1.56l-5.8 7.44c-.33.43-.87.43-1.2 0L2.6 9.78a1.34 1.34 0 0 1 0-1.56L8.4.78z"></path></svg>
            </a>
         </li>
         <li class="-item">
            <a href="/admin/dashboard" class="-link _text-only" title="200 posts flagged for moderator attention">
               <span class="indicator-badge _regular">200</span>
            </a>
         </li>
      </ol>
   </nav>
   <a href="/users/??????" class="my-profile js-gps-track" data-gps-track="profile_summary.click()>
      ...
   </a>
   <nav class="secondary-nav">
      <div class="-dialog-container js-topbar-dialog-corral">
         ...
      </div>
      <ol class="-list">
         <li class="-item"> <!-- inbox         --> </li>
         <li class="-item"> <!-- achievements  --> </li>
         <li class="-item"> <!-- review        --> </li>
         <li class="-item"> <!-- site switcher --> </li>
      </ol>
   </nav>
</div>

The good news is, everything appears to still work (again, with v1.0.1). Moving "other" moves both the moderator elements. As I said, I can't test without flags.

You don't need to worry about the moderator flag count getting updated dynamically. It doesn't. It updates only on page load. Once loaded, it's stale. No live-update like inbox, achievements, etc.

That should answer the summary questions at the end.

---

I tested v1.0.1.1, and it seems to work fine, except that the above-cited change to the HTML means that nothing ever appears on the right side of the gravatar/reputation/badges.

---

I did notice a bug when I was using v1.0.1, though. The moderator diamond (js-mod-inbox-button) changes colors dynamically, like the achievements icon does. That wasn't happening for me, and still isn't fixed in v1.0.1.1.

I bet that's confusing, so let me summarize real quick:

• Moderator diamond/inbox (js-mod-inbox-button) does auto-update, by changing color when there are new items. That doesn't happen in either v1.0.1 or v1.0.1.1.
• Moderator flag count does not auto-update. If the flag count is non-zero, it appears in the HTML fetched from the server. If the flag count is zero, it is not in the HTML at all. It never changes until you refresh the page.

---

I'm also seeing another bug where your custom topbar only appears about 3/4 of the time when I load/refresh a page. The other 1/4 of the time, I see the stock topbar. I have no idea why this might be happening. Obviously I haven't disabled userscripts or anything. This just happens randomly. Not sure if this is related to the moderator tools or not. It might be a separate bug.

[makyen]

Still working on duplicating this. Without the moderator tools, I'm not served HTML that's any different than what has been provided in the recent past.

The mod-button not changing color implies that a class is not getting placed on the element, or a parent, or the selector used in the CSS no longer matches the element with the class in place. I'll go through the SE code a bit to see if I can find a difference, but so far, I'm not seeing it.

The script being non-functional 25% of the time certainly needs to be addressed. I'm not seeing it here. What OS, browser and user script manager are you using?

[samliew]

Update for new topbar. Here's the structure of the two mod items after the search form:

<ol class="-secondary js-secondary-topbar-links drop-icons-responsively the-js-is-handling-responsiveness">
  <!-- Mobile search icon -->
  <li class="-item searchbar-trigger js-searchbar-trigger"><a href="#" class="-link"><svg aria-hidden="true" class="svg-icon iconSearch" width="18" height="18" viewBox="0 0 18 18"><path d="M12.86 11.32L18 16.5 16.5 18l-5.18-5.14v-.35a7 7 0 1 1 1.19-1.19h.35zM7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10z"></path></svg></a></li>
  <!-- Mod inbox (diamond icon) -->
  <li class="-item">
    <a href="/admin/dashboard" class="-link js-mod-inbox-button " data-url="/topbar/mod-inbox" data-unread-class="" title="Moderator inbox">
      <svg aria-hidden="true" class="svg-icon iconModerator" width="18" height="18" viewBox="0 0 18 18"><path d="M8.4.78c.33-.43.87-.43 1.2 0l5.8 7.44c.33.43.33 1.13 0 1.56l-5.8 7.44c-.33.43-.87.43-1.2 0L2.6 9.78a1.34 1.34 0 0 1 0-1.56L8.4.78z"></path></svg>
    </a>
  </li>
  <!-- Mod flag count -->
  <li class="-item flag-count-item" data-remove-order="3">
    <a href="/admin/dashboard" class="-link _text-only" title="49 posts flagged for moderator attention">
      <span class="indicator-badge _regular">49</span>
    </a>
  </li>
  <!-- Profile and other icons go here -->
</ol>