Some chat refactoring

[le-jeu]

This branch is on top of #409 PR

The aim is to rewrite part of chat.js for better code quality and easier customization (plugins/style)

Atm:

• use plext.categories to determine if the message is public/secure and is an alert
• move rendering from writeDataToHash to renderMsg
• move inline style to style.css
• use css target :before and :after for [public]/[secure] decoration and agent messages alert
• sort messages using server answer (not using timestamp but server order)

Changes that may break some plugins/style:

• chat.renderMsg first parameter is not the formatted message but the markup from raw data
• all messages have the same html structure (no wrapping <div> to apply specific rules)
• chat.renderData(...) takes a storageHash as first parameter (instead of storageHash.data)

Global changes:

• remove !important from some css rules (.enl .res .nickname)

Idea:

• parse known message structures to add metadata for plugin to use -> left for plugin

[johnd0e]

Changes that could break plugins/style:

Please explain this.

[le-jeu]

those points slightly change the API while other points are intern mechanism
for instance, I did a plugin that redefines chat.renderMsg, expecting a string as first argument while the PR use the markup array.
also changing some html structure may break plugins that rely on i for some reason, like applying style on chat

I should say: "changes that may break some plugins"

[johnd0e]

for instance

Please add more cases where you are not sure about compatibility

plugin that redefines chat.renderMsg, expecting a string as first argument while the PR use the markup array.

We should avoid such changes in public api.
For example, consider keeping old property as is, and introduce markup array in erty with different name.

[johnd0e]

@le-jeu

Changes that may break some plugins/style:

• all messages have the same html structure (no wrapping <div> to apply specific rules)
• chat.renderData(...) takes a storageHash as first parameter (instead of storageHash.data)

So is it possible to completely avoid breaking anything?
Or explain why those changes are important.

[le-jeu]

Changes that may break some plugins/style:

• all messages have the same html structure (no wrapping
  to apply specific rules)

About the remaining point:
there is hardly any plugin that relies on html structure of messages to parse/change things, they rather parse the raw data and rewrite if needed.
But, if there actually exists such plugin, this is likely to break it.

Other plugins that apply a style sheet on IITC migh also assume the html structure but the current changes make things easier to customize the chat (removing inline style + !important)

[le-jeu]

Before:

<div id="chat">
  <div id="chatall">
    <table>
      <!-- Public chat -->
      <tr>
        <td><time title="2020-12-24 12:08:45<small class=&quot;milliseconds&quot;>.871</small>" data-timestamp="1608808125871">12:08</time></td>
        <td>
          <span class="invisep">&lt;</span>
          <mark class="nickname" style="cursor:pointer; color:#0088FF">aplayer</mark>
          <span class="invisep">&gt;</span>
        </td>
        <td>
          <!-- prefix -->
          <span style="color: #ff6; background-color: #550">[public]</span> 
           hi <span class="ENLIGHTENED pl_nudge_player" onclick="window.chat.nicknameClicked(event, 'anotherplayer')">@anotherplayer</span>!
        </td>
      </tr>

      <!-- Public chat with highlight-->
      <tr>
        <td>
          <div class="pl_nudge_date"> <!-- additional div -->
            <time title="2020-12-16 17:54:37<small class=&quot;milliseconds&quot;>.447</small>" data-timestamp="1608137677447">17:54</time>
          </div>
          <!-- div for decoration -->
          <div class="pl_nudge_pointy_spacer"></div>
        </td>
        <td>
          <span class="invisep">&lt;</span>
          <mark class="nickname" style="cursor:pointer; color:#0088FF">aplayer</mark>
          <span class="invisep">&gt;</span>
        </td>
        <td>
          <span style="color: #ff6; background-color: #550">[public]</span>
          <span class="pl_nudge_me" onclick="window.chat.nicknameClicked(event, 'LeJeu')">@LeJeu</span>
        </td>
      </tr>

      <!-- Faction chat with highlight-->
      <tr>
        <td>
          <!-- divs for highlight -->
          <div class="pl_nudge_date">
            <time title="2020-12-24 17:26:08<small class=&quot;milliseconds&quot;>.502</small>" data-timestamp="1608827168502">17:26</time>
          </div>
          <div class="pl_nudge_pointy_spacer"></div>
        </td>
        <td>
          <span class="invisep">&lt;</span>
          <mark class="nickname" style="cursor:pointer; color:#fd6">LeJeu</mark>
          <span class="invisep">&gt;</span>
        </td>
        <td>
          <!-- span for chat type prefix -->
          <span style="color: #f88; background-color: #500;">[faction]</span>
           a <span class="pl_nudge_me" onclick="window.chat.nicknameClicked(event, 'LeJeu')">@LeJeu</span> z
        </td>
      </tr>

      <!-- Narrowcast -->
      <tr>
        <td>
          <time title="2020-12-15 17:46:05<small class=&quot;milliseconds&quot;>.609</small>" data-timestamp="1608050765609">17:46</time>
        </td>
        <td>
          <span class="invisep">&lt;</span>
          <mark class="nickname" style="cursor:pointer; color:#0088FF">GrfnRgx</mark><span class="invisep">&gt;</span>
        </td>
        <td>
          <!-- Additional div -->
          <div class="system_narrowcast">
            Your Portal <a onclick="window.selectPortalByLatLng(49.013188, 1.372882);return false" title="19 Rue Dupont de l'Eure, 27120 Pacy-sur-Eure, France" href="/?pll=49.013188,1.372882" class="help">Pacy - Jeux de l'étang Taron</a> neutralized by GrfnRgx
          </div>
        </td>
      </tr>
   </table>
  </div>

  <div id="chatfaction">
    <table>
      <!-- faction chat with highlight -->
      <tr>
        <td>
          <div class="pl_nudge_date">
            <time title="2020-12-24 17:26:08<small class=&quot;milliseconds&quot;>.502</small>" data-timestamp="1608827168502">17:26</time>
          </div>
          <div class="pl_nudge_pointy_spacer"></div>
        </td>
        <td>
          <span class="invisep">&lt;</span>
          <mark class="nickname" style="cursor:pointer; color:#fd6">LeJeu</mark>
          <span class="invisep">&gt;</span>
        </td>
        <td>
          <!-- no prefix -->
          a <span class="pl_nudge_me" onclick="window.chat.nicknameClicked(event, 'LeJeu')">@LeJeu</span> z</td>
      </tr>
    </table>
  </div>


  <div id="chatalerts">
    <table>
      <!-- Public chat with highlight-->
      <!-- faction chat with highlight -->
      <!-- Narrowcast -->
      <!-- same as chatall -->
    </table>
  </div>
</div>

After

<!-- tr.class is `public`/`faction` for chat, undef for agent actions and private messages (narrowcast) whatever the tab -->
<tr data-guid="cc0a4d0ce5ea4087a2edd007e9700a64.d" class="">
  <!-- time.class is `pl_nudge_date` in case of chat highlight -->
  <td><time class="" title="2020-12-22 11:22:22<small class=&quot;milliseconds&quot;>.675</small>" data-timestamp="1608632542675">11:22</time></td>
  <td>
    <span class="invisep">&lt;</span>
    <mark class="nickname enl">APlayer</mark>
    <span class="invisep">&gt;</span>
  </td>
  <!-- msg content (td).class is `system_narrowcast` for private messages (alert/kinectic capsule/scoot/etc) -->
  <td class=""> deployed a Resonator on <a onclick="window.selectPortalByLatLng(40.123456, 1.789012);return false" title="26 Avenue de la Liberté, 01234 Free, France" href="/?pll=40.123456,1.789012" class="help">a portal</a></td>
</tr>

That is: [public]/[faction] are CSS controlled instead of added to the html, and message decoration is handled thanks to CSS classes on TR/TD instead of wrapping <div>/<span>

[johnd0e]

sort messages using server answer (not using timestamp but server order)

What is benefit?

[le-jeu]

stability, this is how stock intel works, and is consistent with last seen guid (oldest/newest)
also, there is no reason to sort the entries on each render since we do have the correct order on request

[johnd0e]

@le-jeu

Is this PR ready?

• (to complete)

Are you going to complete ideas list?