Marketing & Analytics pixels on Homedepot.com

Adding Provider Icons to Omnibug

If you are not familiar with Omnibug, check it out at omnibug.io:

Omnibug is a plugin for the Google Chrome and Mozilla Firefox browsers to ease developing and debugging web metrics implementations. Each outgoing request (sent by the browser) is checked for a pattern; if a match occurs, the URL is displayed and decoded to show the details of the request.

My first feature as an official contributor to Omnibug is the addition of icons to entries in the requests view. Depending on when I publish this and when Omnibug releases an update, this feature might already be in place. Since I never really feel like I know something until I write about it, I will illustrate how I added these icons. It was fairly simple to implement (thanks to the excellent structure of Omnibug) and is done in two different parts: adding the icons, and showing/hiding them based on user’s settings.

Getting the Icons

Before I can display the icons, I need to get the image files. Favicons are ubiquitous and about the size I am looking for (16px x 16px). After some conversions from .ico to .png (some sites used a png for their favicon which I didn’t know was possible) I was ready to start inserting them.

Icon file in src/assets/images/icons

Displaying the icons

Each provider entry in the request view contains a <span> with a title that specifies the provider. I used this title attribute to select the span and insert the corresponding icon using the ::before pseudo selector with a content rule.

Span with title indicates the provider
This type of rule will add the icon to an Adobe Analytics entry
Entry with icon

I could hard code this rule for each provider, but where is the fun in that? In the file icons.scss, I have a Sass map (dict/object like data type in Sass) that contains key/value pairs of known provider title values and file paths to its icon. Then, I have a Sass mixin (function) that takes a title and path and will generate the rule I need. The goal here is to iterate over the $icons map and create rules based on its values. This removes the need for me to hard code icon rules and makes adding a new icon when a new provider is added as easy as adding a title/path element to the $icons map. ($icons below is truncated a bit)

$iconPath: "../assets/images/icons/"; 
$icons: 
("Adobe Analytics": $iconPath + "ADOBEANALYTICS16x16.png")
@mixin iconRule($title, $path) {    
&[title="#{$title}"]::before {
content: url($path);
}
}

Iterating over $icons and generating new rules happens in panel.scss which holds all the CSS rules for the main Omnibug view.

span {
@each $title, $path in $icons {
@include iconRule($title, $path)
}
}

Using the iteration/mixin combination compiles to:

span[title="Adobe Analytics"]::before {
content: url("../assets/images/icons/ADOBEANALYTICS16x16.png"); }
span[title="Adobe Audience Manager"]::before {
content: url("../assets/images/icons/ADOBEAUDIENCEMANAGER16x16.png"); }
span[title="Adobe Dynamic Tag Manager"]::before {
content: url("../assets/images/icons/ADOBEDYNAMICTAGMANAGER16x16.png"); }
etc...

I then added a few rules for spacing and layout. Everything looking good!

Icons next to entries in main view

Hiding/Showing the icons

Users have the ability to toggle showing the icons on and off in the Omnibug settings.

Toggling the icons

Since the entry view is controlled by CSS, and the icons are shown by default, I use the settings toggle to add rules to hide the icons. As opposed to hiding the icons by default and adding rules to show them.

Global Settings Object

The global settings object (OmnibugSettings)for Omnibug can be seen in the file src/libs/OmnibugSettings.js. I am adding a key to the getDefaults function (which as its name would suggest, sets default settings values) called providerIcons with a value of true. This value will determine whether the icons should be shown and will update according to the checkbox in the settings view. This global settings object is manipulated as the user changes settings.

In the file src/devtools/panel.js a new OmnibugSettings object called settings is created and populated with default settings. When the settings are saved or updated by the user, this object will change to reflect the new settings.

If settings.providerIcons is not true, a CSS rule will be inserted into the view that resets the content attribute (used to specify the icon png) to being an empty string. Setting this to null or none instead of an empty string messes up the spacing of the provider name. I am not sure why.

if (!settings.providerIcons) { 
styleSheet.sheet.insertRule(
`.label + span::before {content: “”;}`
);
}

Settings View

Finally, I added the checkbox into the settings view. You can see this in the file src/options/options.html. The settings file receives data from these options when the user changes anything. This is facilitated by the data-bind-property attribute.

<fieldset>
<div class="row">
<label for="providerIcons">Show provider icons</label>
<div class="col">
<input type="checkbox" name="providerIcons" id="providerIcons" data-bind-property="providerIcons" />
</div>
</div>
<p class="help">Show provider icon next to request entry.</p>
</fieldset>
Show/hide checkbox in settings

Omnibug is an awesome tool and it gives me a great sense of pride to contribute to it. On a side note, as a mostly self taught developer, being part of an open source project is a huge milestone for me. I started with beginner Javascript videos on Youtube and Teamtreehouse.com about 5 years ago. If I can do it, anyone can.