[feature suggestion] option for enhanced visual awareness

[ghost]

When browsing I hardly look at the address/tool bar and rather focus on the content window thus in such work flow missing the DCF+ icons (colours). Else having getting used to tilting up my eyes from the content window to one of the bars in search for the DCF+ icons (colours).

I would rather be content to have a more intrusive but enhanced/instant visual awareness with a frame/border (top and each side in the style of red/white or yellow/black hazard tape) placed/injected in the content window .

Suppose that others may prefer the less intrusive icons this could perhaps be a option.

[claustromaniac]

Will probably take a while, but I've been considering adding content scripts for another purpose anyway. I'm going to experiment a bit and see what I can do. There are other possibilities that might be worth exploring, too.

[claustromaniac]

OK, so I played around a while. I'm sorry to say your specific idea is not the most reliable solution, and it's hard to make it look good universally (in any device, with any resolution, long etc). I like your idea about the hazard tape stripes, but I would rather add a frame only on one or two opposite borders (not upper and side borders like you said). That way it's a lot more reliable and looks good pretty much universally. I'll put together a couple of examples for you to test in a while.

[claustromaniac]

Vertical bars :point_left:

Horizontal bars :point_left:

If you don't see the bars, be sure to disable Stylus or such extensions, and allow css and preferably javascript. That's only necessary for testing on those pages, the extension wouldn't need you to do any of those things, obviously. In fact, I wrote a Scratchpad script for you to see a live example, if you want (actually, it was for testing but who cares):

1. Press shift + F4 to open the Sratchpad.
2. Paste the code (below) in there.
3. Open a new tab and go to some site, or don't, you can actually do it in this tab if you want.
4. Run the script (with CTRL+R or Execute - Run)

let div = document.createElement('div');
let divb = document.createElement('div');
div.setAttribute('id', "DetectCloudflarePlus_firstBanner");
divb.setAttribute('id', "DetectCloudflarePlus_secondBanner");
div.addEventListener('click', () => {
    div.outerHTML = '';
});
divb.addEventListener('click', () => {
    divb.outerHTML = '';
});
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = `div#DetectCloudflarePlus_firstBanner {
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 999999;
    display: block;
    width: 100%;
    height: 1%;
    background: repeating-linear-gradient(
      45deg,
      rgb(250,250,0),
      rgb(250,250,0) 1.5%,
      rgb(0,0,0) 1.5%,
      rgb(0,0,0) 3%
    );
}
div#DetectCloudflarePlus_secondBanner {
    top: 99%;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 999999;
    display: block;
    width: 100%;
    height: 1%;
    background: repeating-linear-gradient(
      45deg,
      rgb(250,250,0),
      rgb(250,250,0) 1.5%,
      rgb(0,0,0) 1.5%,
      rgb(0,0,0) 3%
    );
}
div#DetectCloudflarePlus_firstBanner:hover {
    opacity:0; filter:alpha(opacity=0);
}
div#DetectCloudflarePlus_secondBanner:hover {
    opacity:0; filter:alpha(opacity=0);
}`;
document.body.appendChild(divb);
document.body.appendChild(div);
document.head.appendChild(css);

[claustromaniac]

If you don't find my initial experiment too convincing, we can always use the international warning symbol for radioactive high-voltage laser-emitting biohazards that coat the floor and make it slippery.

[ghost]

I would vote for horizontal and perhaps only 1 at the top

[claustromaniac]

I have some bad news.

Like many other beginners, I assumed that if I injected new elements into the DOM (like these bars), Firefox would have my back covered on the aspect of security. As it turns out, such a practice is not safe because page scripts can interact with DOM elements injected by extensions (i.e. they're not completely isolated). This is Bad.

Some addon developers prefer to ignore this fact, but I prefer to do the responsible thing and just drop this idea, at least until the devs at Mozilla give me some API to do this safely.

References:

• Where it says Create your UI with extension components:
  • https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices
• Also... Bug 1287590

---

Fortunately, there are alternatives. Unfortunately, there aren't many.

But there is an interesting one that is not on that list: the recently-added theme API. I'm afraid it's either that or showing system notifications... but I think that programmatically changing the color theme of the browser UI itself not only is a safer alternative to injecting intrusive elements, it may also give a more prominent visual cue without being intrusive at all. I'd say it's worth a shot, at least.

[claustromaniac]

A little update:

I have toyed around with the theme API, and I have to say it's pretty cool. It is kind of limited, and it doesn't get along with native themes (dark and light), but it can be made to work with other extensions that add custom themes. I'll probably implement a new version for testing soon and ask for feedback here before I decide what to do with it.

[claustromaniac]

Another update: I postponed this issue for a while because the Theme API exists only from v58 onwards, and there were more pressing matters to take care of first.

My plan is to implement a set of themes, one for each color (default, orange, red, purple), and add an option to change them dynamically when appropriate. The default theme would be one similar (maybe even identical) to Firefox default theme, but the extension would only use it if the user didn't install a custom theme. If the user did install a custom theme, the default should be that custom theme.

A far less complex alternative that is still on the table would be to use system notifications. I could allow the user to enable them only for individual states. So you could get notified only when the status is RED, for example.

As I am typing this, I came up with something else that sounds like it might be worth a shot: maybe I can automatically display the popup (without the user clicking on any icons) when something is detected. For this to be effective, I would have to make some changes to have the popup update in real time, which would be a worthwhile improvement anyway. There is a significant drawback to this approach, though: if the user clicks anywhere while the page loads, the popup will disappear immediately... hm :roll_eyes:

[ghost]

My plan is to implement a set of themes, one for each color (default, orange, red, purple), and add an option to change them dynamically when appropriate.

Running FF Nightly and having experimented with https://color.firefox.com I would likely not favour theme changing for the reason of having the OS and FF dark themed and introducing a change in the luminosity, which comes inherently with a colour change, would be rather sort of (environmentally) disturbing/intrusive. It would probably be less so with a light themed OS/FF.

---

use system notifications

would that work consistently on different OS?

And then it would be something outside the browser window and eventually trigger a sound alert too in case the system notification are linked to a sound alert.

From my perspective I would find this likely rather (environmentally) bothersome.

---

automatically display the popup

That sounds most appealing to me, as an option (perhaps non-default). With a (sub-)option to collapse/fade the pop-up after X seconds. And perhaps not for resources like css, media (images, video, audio) and fonts - but that is perhaps too much of efforts to invest.

drawback to this approach, though: if the user clicks anywhere while the page loads, the popup will disappear immediately

But in any case it would have popped up and served (initially) its intended purpose of enhanced visual awareness

[claustromaniac]

That sounds most appealing to me, as an option (perhaps non-default).

Definitely non-default.

With a (sub-)option to collapse/fade the pop-up after X seconds. And perhaps not for resources like css, media (images, video, audio) and fonts - but that is perhaps too much of efforts to invest.

I think a good way to do this would be to make the popup appear only the first time a resource is detected as coming from an edge node when you navigate to a given page. I have yet to confirm that I can actually do this, though.

EDIT: Can't do this either :weary: .

you can't open the popup programmatically from an extension's JavaScript; it can be opened only in response to a user action.

---

There are many extensions that use system notifications, and they work consistenly regardless of the OS. I can make notifications disappear automatically to make them less annoying. Given that the alternative is the Theme API, which would be far more complex to work with, I'd say it's worth a try.

[ghost]

:disappointed: , system 🔔 is not for me, neither would be theme colouring

[ghost]

came across this WX https://addons.mozilla.org/en-US/firefox/addon/pericles/ which serves sort of an transparent and collapsible overlay in the browser window

[claustromaniac]

It injects DOM elements, which is the same approach I was going to use first. It's not safe. Any website can use Javascript to detect those elements, therefore they make it easier for them to identify you, and there might be other risks involved. If such risks are acceptable to you, I am willing to implement what I was going to implement originally in https://github.com/claustromaniac/detect-cloudflare-plus/issues/3#issuecomment-418960099.

[ghost]

Ach well, I liked the idea of such collapsible overlay and hoped that with a same-origin policy a layer of isolation is achievable.

But of course safety before :candy:

[ajvsol]

The Toolbar API will land sometime in the next few versions of Firefox, that would more than likely work for these purposes.

[ghost]

I sometimes use Animated PNGs when replacing some extensions' toolbar icons. These display correctly on Firefox, not sure all browsers support them, surprised not to see them more often (maybe because they could bother some users). Example:

[Mikaela]

I think I would be one of bothered users and I would consider it as accessibility issue.

[ghost]

@Mikaela ,

I think I would be one of bothered users and I would consider it as accessibility issue.

The suggestion is an answer to an enhanced visual awareness. Also the animated icon remains only as long as the site is opened contrarily to my above animated E example.

Anyway it's often possible to modify an extension's toolbar icons, and even urlbar icons.

For True Sight for instance:

In userConfig.css (located in [USERPROFILE]/config) and, in this example, a subfolder named [USERPROFILE]/config/UserData

/* TRUE SIGHT - Toolbar button */
#detect-cloudflare-pa_cm_org-browser-action[tooltiptext="True Sight"] {
list-style-image: url(UserData/TrueSight-TBAR-0.png) !important;}
#detect-cloudflare-pa_cm_org-browser-action[tooltiptext="External resources were served by a CDN."] {
list-style-image: url(UserData/TrueSight-TBAR-1.png) !important;}
#detect-cloudflare-pa_cm_org-browser-action[tooltiptext="Multiple CDNs detected on this page!"] {
list-style-image: url(UserData/TrueSight-TBAR-2.png) !important;}
#detect-cloudflare-pa_cm_org-browser-action[tooltiptext="This page was served by a CDN!"] {
list-style-image: url(UserData/TrueSight-TBAR-3.png) !important;}

/* TRUE SIGHT - Urlbar button */
#main-window .urlbar-icon[id*="detect-cloudflare-pa_cm_org"][tooltiptext="External resources were served by a CDN."] {
list-style-image: url(UserData/TrueSight-UBAR-1.png) !important;}
#main-window .urlbar-icon[id*="detect-cloudflare-pa_cm_org"][tooltiptext="Multiple CDNs detected on this page!"] {
list-style-image: url(UserData/TrueSight-UBAR-2.png) !important;}
#main-window .urlbar-icon[id*="detect-cloudflare-pa_cm_org"][tooltiptext="This page was served by a CDN!"] {
list-style-image: url(UserData/TrueSight-UBAR-3.png) !important;}

From there on the user can craft his own icons and copy them to [USERPROFILE]/config/UserData That's what I do for 90% of my 47 Firefox extensions (those handling a toolbar/urlbar icon) given that default button icons are, IMO, most often (not always) hardly perceptible.