Change icon CSS class prefix to work around Fanboy's filter list

Problem: if you use uBlock Origin, and enable the
"Fanboy's Social" filter list, Healthchecks does not show
Telegram or WhatsApp icons. This is because the filter list
contains "##.icon-telegram" and "##.icon-whatsapp" entries.

This commit changes the CSS class prefix to "ic-". So we're
now using icon classes like "ic-telegram" and "ic-whatsapp".

As a bonus, we save 2 bytes in HTML per displayed icon :-)

CHANGELOG.md

@@ -18,6 +18,7 @@ All notable changes to this project will be documented in this file.
 ## Bug Fixes
 - Fix unwanted HTML escaping in SMS and WhatsApp notifications
 - Fix a crash when adding an integration for an empty Trello account
+- Change icon CSS class prefix to 'ic-' to work around Fanboy's filter list
 
 ## v1.18.0 - 2020-12-09
 

hc/api/admin.py

@@ -199,7 +199,7 @@ class ChannelsAdmin(admin.ModelAdmin):
         if obj.kind == "email" and not obj.email_verified:
             note = " (not verified)"
 
-        return f'<span class="icon-{ obj.kind }"></span> &nbsp; {obj.kind}{note}'
+        return f'<span class="ic-{ obj.kind }"></span> &nbsp; {obj.kind}{note}'
 
     def ok(self, obj):
         return False if obj.last_error else True

hc/front/tests/test_channels.py

@@ -119,5 +119,5 @@ class ChannelsTestCase(BaseTestCase):
         r = self.client.get(self.channels_url)
 
         self.assertNotContains(r, "Add Integration", status_code=200)
-        self.assertNotContains(r, "icon-delete")
+        self.assertNotContains(r, "ic-delete")
         self.assertNotContains(r, "edit_webhook")

hc/front/tests/test_my_checks.py

@@ -55,7 +55,7 @@ class MyChecksTestCase(BaseTestCase):
 
         self.client.login(username="alice@example.org", password="password")
         r = self.client.get(self.url)
-        self.assertContains(r, "icon-up")
+        self.assertContains(r, "ic-up")
 
     def test_it_shows_red_check(self):
         self.check.last_ping = timezone.now() - td(days=3)
@@ -64,7 +64,7 @@ class MyChecksTestCase(BaseTestCase):
 
         self.client.login(username="alice@example.org", password="password")
         r = self.client.get(self.url)
-        self.assertContains(r, "icon-down")
+        self.assertContains(r, "ic-down")
 
     def test_it_shows_amber_check(self):
         self.check.last_ping = timezone.now() - td(days=1, minutes=30)
@@ -73,7 +73,7 @@ class MyChecksTestCase(BaseTestCase):
 
         self.client.login(username="alice@example.org", password="password")
         r = self.client.get(self.url)
-        self.assertContains(r, "icon-grace")
+        self.assertContains(r, "ic-grace")
 
     def test_it_hides_add_check_button(self):
         self.profile.check_limit = 0

static/css/base.css

@@ -99,10 +99,10 @@ body {
     width: 24px;
 }
 
-.status.icon-up, .status.icon-started { color: #5cb85c; }
-.status.icon-new, .status.icon-paused { color: #CCC; }
-.status.icon-grace { color: #f0ad4e; }
-.status.icon-down { color: #d9534f; }
+.status.ic-up, .status.ic-started { color: #5cb85c; }
+.status.ic-new, .status.ic-paused { color: #CCC; }
+.status.ic-grace { color: #f0ad4e; }
+.status.ic-down { color: #d9534f; }
 
 .label.label-start {
     background-color: #FFF;

static/css/channels.css

@@ -228,7 +228,7 @@ table.channels-table > tbody > tr > th {
     margin-bottom: 0;
 }
 
-.page-channels .icon-delete {
+.page-channels .ic-delete {
     font-size: 16px;
 }
 

static/css/icomoon.css

@@ -1,15 +1,14 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?y9u69e');
-  src:  url('../fonts/icomoon.eot?y9u69e#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?y9u69e') format('truetype'),
-    url('../fonts/icomoon.woff?y9u69e') format('woff'),
-    url('../fonts/icomoon.svg?y9u69e#icomoon') format('svg');
+  src:
+    url('../fonts/icomoon.ttf?ed2ba') format('truetype'),
+    url('../fonts/icomoon.woff?ed2ba') format('woff'),
+    url('../fonts/icomoon.svg?ed2ba#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^="ic-"], [class*=" ic-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
   speak: never;
@@ -24,147 +23,147 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-signal:before {
+.ic-signal:before {
   content: "\e91c";
   color: #2592e9;
 }
-.icon-linenotify:before {
+.ic-linenotify:before {
   content: "\e91b";
   color: #00c300;
 }
-.icon-call:before {
+.ic-call:before {
   content: "\e91a";
   color: #e81a34;
 }
-.icon-spike:before {
+.ic-spike:before {
   content: "\e919";
   color: #007bff;
 }
-.icon-zulip:before {
+.ic-zulip:before {
   content: "\e918";
   color: #1e9459;
 }
-.icon-pd:before {
+.ic-pd:before {
   content: "\e90b";
   color: #04ac38;
 }
-.icon-shell:before {
+.ic-shell:before {
   content: "\e917";
 }
-.icon-msteams:before {
+.ic-msteams:before {
   content: "\e916";
   color: #4e56be;
 }
-.icon-opsgenie:before {
+.ic-opsgenie:before {
   content: "\e910";
   color: #2684ff;
 }
-.icon-mattermost:before {
+.ic-mattermost:before {
   content: "\e907";
   color: #045acc;
 }
-.icon-pagerteam:before {
+.ic-pagerteam:before {
   content: "\e914";
   color: #cd2a00;
 }
-.icon-apprise:before {
+.ic-apprise:before {
   content: "\e915";
   color: #236b6b;
 }
-.icon-matrix:before {
+.ic-matrix:before {
   content: "\e900";
 }
-.icon-started:before {
+.ic-started:before {
   content: "\e038";
 }
-.icon-pagertree:before {
+.ic-pagertree:before {
   content: "\e90d";
   color: #33ade2;
 }
-.icon-po:before {
+.ic-po:before {
   content: "\e90e";
   color: #249df1;
 }
-.icon-victorops:before {
+.ic-victorops:before {
   content: "\e90f";
   color: #f9af4a;
 }
-.icon-email:before {
+.ic-email:before {
   content: "\e90a";
   color: #4f5d73;
 }
-.icon-webhook:before {
+.ic-webhook:before {
   content: "\e908";
   color: #c73a63;
 }
-.icon-sms:before {
+.ic-sms:before {
   content: "\e904";
   color: #95c144;
 }
-.icon-pushbullet:before {
+.ic-pushbullet:before {
   content: "\e909";
   color: #67bf79;
 }
-.icon-discord:before {
+.ic-discord:before {
   content: "\e90c";
   color: #7289da;
 }
-.icon-hipchat:before {
+.ic-hipchat:before {
   content: "\e901";
   color: #0052cc;
 }
-.icon-slack:before {
+.ic-slack:before {
   content: "\e905";
   color: #56b68b;
 }
-.icon-telegram:before {
+.ic-telegram:before {
   content: "\e906";
   color: #2ca5e0;
 }
-.icon-trello:before {
+.ic-trello:before {
   content: "\e911";
   color: #0079bf;
 }
-.icon-whatsapp:before {
+.ic-whatsapp:before {
   content: "\e902";
   color: #25d366;
 }
-.icon-clippy:before {
+.ic-clippy:before {
   content: "\e903";
 }
-.icon-cancel:before {
+.ic-cancel:before {
   content: "\e5c9";
 }
-.icon-up:before, .icon-new:before, .icon-ok:before {
+.ic-up:before, .ic-new:before, .ic-ok:before {
   content: "\e86c";
 }
-.icon-grace:before {
+.ic-grace:before {
   content: "\e000";
 }
-.icon-missing:before {
+.ic-missing:before {
   content: "\e001";
 }
-.icon-desc:before {
+.ic-desc:before {
   content: "\e313";
 }
-.icon-asc:before {
+.ic-asc:before {
   content: "\e316";
 }
-.icon-dots:before {
+.ic-dots:before {
   content: "\e5d3";
 }
-.icon-down:before {
+.ic-down:before {
   content: "\e7f7";
 }
-.icon-paused:before {
+.ic-paused:before {
   content: "\e7f6";
 }
-.icon-settings:before {
+.ic-settings:before {
   content: "\e912";
 }
-.icon-delete:before {
+.ic-delete:before {
   content: "\e913";
 }
-.icon-timer:before {
+.ic-timer:before {
   content: "\e425";
 }

static/css/settings.css

@@ -11,7 +11,7 @@
     padding-bottom: 24px;
 }
 
-.page-project .icon-ok {
+.page-project .ic-ok {
     color: #5cb85c;
 }
 

static/js/checks.js

@@ -165,7 +165,7 @@ $(function () {
         // Second click: update UI and pause the check
         btn.removeClass("confirm").tooltip("hide");
         var code = btn.closest("tr.checks-row").attr("id");
-        $("#" + code + " span.status").attr("class", "status icon-paused");
+        $("#" + code + " span.status").attr("class", "status ic-paused");
 
         var url = base + "/checks/" + code + "/pause/";
         var token = $('input[name=csrfmiddlewaretoken]').val();
@@ -187,9 +187,9 @@ $(function () {
         container: "body",
         title: function() {
             var cssClasses = this.getAttribute("class");
-            if (cssClasses.indexOf("icon-new") > -1)
+            if (cssClasses.indexOf("ic-new") > -1)
                 return "New. Has never received a ping.";
-            if (cssClasses.indexOf("icon-paused") > -1)
+            if (cssClasses.indexOf("ic-paused") > -1)
                 return "Monitoring paused. Ping to resume.";
 
             if (cssClasses.indexOf("sort-name") > -1)
@@ -215,7 +215,7 @@ $(function () {
                 for(var i=0, el; el=data.details[i]; i++) {
                     if (lastStatus[el.code] != el.status) {
                         lastStatus[el.code] = el.status;
-                        $("#" + el.code + " span.status").attr("class", "status icon-" + el.status);
+                        $("#" + el.code + " span.status").attr("class", "status ic-" + el.status);
                     }
 
                     if (lastStarted[el.code] != el.started) {

static/js/details.js

@@ -85,7 +85,7 @@ $(function () {
             success: function(data) {
                 if (data.status_text != lastStatusText) {
                     lastStatusText = data.status_text;
-                    $("#log-status-icon").attr("class", "status icon-" + data.status);
+                    $("#log-status-icon").attr("class", "status ic-" + data.status);
                     $("#log-status-text").html(data.status_text);
 
                     $('#pause-btn').prop('disabled', data.status == "paused");

static/js/snippet-copy.js

@@ -5,7 +5,7 @@ $(function() {
     }
 
     var markup = '<button class="btn btn-default hidden-sm">' +
-                 '<span class="icon-clippy"></span>' +
+                 '<span class="ic-clippy"></span>' +
                  '</button>';
 
 

templates/accounts/project.html

@@ -110,7 +110,7 @@
 
                     {% else %}
                         <form method="post">
-                        <span class="icon-ok"></span>
+                        <span class="ic-ok"></span>
                         API access is enabled.
                             {% csrf_token %}
 
@@ -123,7 +123,7 @@
                         </form>
                     {% endif %}
                 {% else %}
-                    <span class="icon-cancel"></span>
+                    <span class="ic-cancel"></span>
                     API access is disabled.
                     <form method="post">
                         {% csrf_token %}

templates/base.html

@@ -106,7 +106,7 @@
                     <li {% if b %}id="broken-channels"{% endif %} {% if page == 'channels' %}class="active"{% endif %}>
                         <a href="{% url 'hc-channels' project.code %}">
                             {% trans "Integrations" %}
-                            {% if b %}<span class="icon-grace"></span>{% endif %}
+                            {% if b %}<span class="ic-grace"></span>{% endif %}
                         </a>
                     </li>
                     {% endwith %}

templates/front/channels.html

@@ -159,7 +159,7 @@
                     data-url="{% url 'hc-remove-channel' ch.code %}"
                     class="btn btn-sm btn-default channel-remove"
                     type="button">
-                    <span class="icon-delete"></span>
+                    <span class="ic-delete"></span>
                 </button>
                 {% endif %}
             </td>

templates/front/details.html

@@ -117,7 +117,7 @@
             <table>
                 <tr>
                     <td>
-                        <span id="log-status-icon" class="status icon-{{ check.get_status }}"></span>
+                        <span id="log-status-icon" class="status ic-{{ check.get_status }}"></span>
                     </td>
                     <td >
                         <p id="log-status-text">{% include "front/log_status_text.html" %}</p>
@@ -215,7 +215,7 @@
                         </span>
                     </th>
                     <td>
-                        <span class="icon-{{ channel.kind }}"></span>
+                        <span class="ic-{{ channel.kind }}"></span>
                         {{ channel }}
                     </td>
                 </tr>

templates/front/details_events.html

@@ -25,7 +25,7 @@
         <td class="details">
             {% if event.delta %}
             <div class="delta">
-                <span class="icon-timer"></span>
+                <span class="ic-timer"></span>
                 {{ event.delta|hms }}
             </div>
             {% endif %}
@@ -50,7 +50,7 @@
     {% if event.check_status %}
     <tr class="missing" data-dt="{{ event.created.isoformat }}">
         <td class="n-cell">
-            <span class="icon-missing"></span>
+            <span class="ic-missing"></span>
         </td>
         <td class="date"></td>
         <td class="time"></td>

templates/front/last_ping_cell.html

@@ -7,7 +7,7 @@
     {% elif check.clamped_last_duration %}
 	<br />
 	<span class="checks-subline-duration">
-		<span class="icon-timer"></span> {{ check.clamped_last_duration|hms }}
+		<span class="ic-timer"></span> {{ check.clamped_last_duration|hms }}
 	</span>
     {% endif %}
 {% else %}

templates/front/log.html

@@ -66,7 +66,7 @@
             <td class="details">
                 {% if event.delta %}
                 <div class="delta">
-                    <span class="icon-timer"></span>
+                    <span class="ic-timer"></span>
                     {{ event.delta|hms }}
                 </div>
                 {% endif %}
@@ -100,7 +100,7 @@
         {% if event.check_status %}
         <tr class="missing" data-dt="{{ event.created.isoformat }}">
             <td class="n-cell">
-                <span class="icon-missing"></span>
+                <span class="ic-missing"></span>
             </td>
             <td class="date"></td>
             <td class="time"></td>

templates/front/my_checks_desktop.html

@@ -9,11 +9,11 @@
         <th class="th-name">
             {% if sort == "name" %}
             <a href="?sort=-name" data-toggle="tooltip" class="sort-name">
-                Name<span class="icon-asc"></span>
+                Name<span class="ic-asc"></span>
             </a>
             {% elif sort == "-name" %}
             <a href="?sort=created" data-toggle="tooltip" class="sort-name">
-                Name<span class="icon-desc"></span>
+                Name<span class="ic-desc"></span>
             </a>
             {% else %}
             <a href="?sort=name" data-toggle="tooltip" class="default sort-name">
@@ -33,11 +33,11 @@
         <th class="th-last-ping hidden-xs">
             {% if sort == "last_ping" %}
             <a href="?sort=created" data-toggle="tooltip" class="sort-last-ping">
-                Last Ping<span class="icon-desc"></span>
+                Last Ping<span class="ic-desc"></span>
             </a>
             {% elif sort == "-last_ping" %}
             <a href="?sort=last_ping" data-toggle="tooltip" class="sort-last-ping">
-                Last Ping<span class="icon-asc"></span>
+                Last Ping<span class="ic-asc"></span>
             </a>
             {% else %}
             <a href="?sort=-last_ping" data-toggle="tooltip" class="default sort-last-ping">
@@ -60,7 +60,7 @@
         {% if check in hidden_checks %}style="display: none"{% endif %}>
 
         <td class="indicator-cell">
-            <span class="status icon-{{ check.get_status }}" data-toggle="tooltip"></span>
+            <span class="status ic-{{ check.get_status }}" data-toggle="tooltip"></span>
             <div class="spinner {% if check.last_start %}started{% endif %}">
                 <div class="d1"></div>
                 <div class="d2"></div>
@@ -93,7 +93,7 @@
                 <div class="integrations">
                 {% spaceless %}
                 {% for channel in channels %}
-                    <span class="icon-{{ channel.kind }}{% if channel in check.channel_set.all %}{% else %} off{% endif %}"></span>
+                    <span class="ic-{{ channel.kind }}{% if channel in check.channel_set.all %}{% else %} off{% endif %}"></span>
                 {% endfor %}
                 {% endspaceless %}
                 </div>
@@ -128,12 +128,12 @@
         <td class="actions">
             {% if rw %}
             <button class="btn btn-default pause" type="button">
-                <span class="icon-paused" />
+                <span class="ic-paused" />
             </button>
             {% endif %}
 
             <button title="Show Details" class="btn btn-default show-log" type="button">
-                <span class="icon-dots" />
+                <span class="ic-dots" />
             </button>
         </td>
     </tr>

templates/front/projects.html

@@ -16,7 +16,7 @@
             <a href="{% url 'hc-checks' project.code %}">
                 <div class="col-sm-6 col-md-4">
                     <div class="panel project {% if project.id == last_project_id %}selected{% endif %}">
-                        <div class="status icon-{{ project.overall_status }}"></div>
+                        <div class="status ic-{{ project.overall_status }}"></div>
 
                         <h4>{{ project }}</h4>
 

templates/front/welcome.html

@@ -229,7 +229,7 @@
         <table class="table">
             <tr>
                 <td>
-                    <span class="status icon-new"></span>
+                    <span class="status ic-new"></span>
                 </td>
                 <td>
                     {% blocktrans trimmed %}
@@ -240,7 +240,7 @@
             </tr>
             <tr>
                 <td>
-                    <span class="status icon-up"></span>
+                    <span class="status ic-up"></span>
                 </td>
                 <td>
                     {% blocktrans trimmed %}
@@ -251,7 +251,7 @@
             </tr>
             <tr>
                 <td>
-                    <span class="status icon-grace"></span>
+                    <span class="status ic-grace"></span>
                 </td>
                 <td>
                     {% blocktrans trimmed %}
@@ -263,7 +263,7 @@
             </tr>
             <tr>
                 <td>
-                    <span class="status icon-down"></span>
+                    <span class="status ic-down"></span>
                 </td>
                 <td>
                     {% blocktrans trimmed %}