Habrastil for karmagolika

Karmad *** p

I had to sit here in deep karma-pit. As a beginner, for me it was a very emotional experience, I wanted to track karma every second. It is most convenient to do this with the help of firefox extension, which is called habraholic (by Semenov , thanks a lot , kind person!) But somehow I was not very happy with the type of indicators - black, faceless, harsh (for me) numbers.

I wanted some kind of holiday, and then caught my eye on writing extensions for Firefox . He sat down to understand that yes how ...

habraholic.xpi

.xpi is .zip. Rename, and unpack. We get the extension in the form of folders and files. Everything you need to edit is in the ../chrome/content folder

Xul, label, chrom

For a start, I discovered that karma and rating are displayed in the statusbar in one line. And it is necessary to paint in different colors. So it is necessary to break the label into three labels (karma, rating, position). Open the panel.xul file, which describes our objects, and add two more to the label that has already been registered, with unique names:
')

< label id="habraholickarma" value="!" tooltiptext=", ." onclick="habraholicLeftClick(event)" />
< label id="habraholicrating" value="!" tooltiptext=", ." onclick="habraholicLeftClick(event)" />
< label id="habraholicposition" value="!" tooltiptext=", ." onclick="habraholicLeftClick(event)" />

* This source code was highlighted with Source Code Highlighter .

I just copied the line three times, so when I don’t set the username in the status bar it says “Habrahabr! Habrahabr! Habrahabr! It is consistent with my mood over the past three days.

Habrastyle

To add a setting that will enable / disable Habrastil, you need to open the prefs.xul file, which describes the settings window. Add to the checkbox "Do not show position in the rating" one more:

< checkbox id="habraholic-hideRatingPosition" preference="habraholic-hideRatingPosition-pref" label=" " />
< checkbox id="habraholic-habrastyle" preference="habraholic-habrastyle-pref" label="- " />

* This source code was highlighted with Source Code Highlighter .

< checkbox id="habraholic-hideRatingPosition" preference="habraholic-hideRatingPosition-pref" label=" " />
< checkbox id="habraholic-habrastyle" preference="habraholic-habrastyle-pref" label="- " />

* This source code was highlighted with Source Code Highlighter .

Total:


Was shocked by how simple it is.

CSS? CSS!

So, we have three text blocks - the label, and they are shown in black font with a size of 13 points. This is what we decided to rule. We will apply styles to each label. Just to apply the style, you need to know what style you want to apply. The FF CSS Viewer extension helped me a lot in gaining this knowledge. After its installation, you simply hover the mouse over the page elements and it shows which styles are applied to the element. Let's go to Habra ...

Karma: color # 66CC66, size 36px, Verdana font family, sans-serif
Rating: color # 3399FF, size 36px, Verdana font family, sans-serif
Position: color # 777777, size 14px, Verdana font family, sans-serif

Now I have so far the whole text is sadly like this:

Position: black, size 13px, Verdana font family, sans-serif

In order to know if the style is enabled or disabled in the settings, let's add the habraholicIsHabraStyle () function, which one-on-one copies the habraholicIsRatingPositionHidden () function, except for the control ID, the value of which it returns.

Further it is simple - right after the text is output to the labels, we apply styles to these labels:

if (habraholicIsHabraStyle())
{
document .getElementById( "habraholickarma" ).style.color = "#66CC66" ;
document .getElementById( "habraholickarma" ).style.fontSize = "36px" ;
document .getElementById( "habraholicposition" ).style.fontFamily = "Verdana,sans-serif" ;
} else {
document .getElementById( "habraholickarma" ).style.color = "black" ;
document .getElementById( "habraholickarma" ).style.fontSize = "13px" ;
}

* This source code was highlighted with Source Code Highlighter .

How many decimal places?

It seems to be all right, but something is not good. Habra api returns the values ​​we need a bit out of format. For example, I had "-10 -57.6", and in my haborcenter everything is different and beautiful: "-10.00 -57.60". I am an engineer, and I am not used to scattering zeros, even if they are on the right. In general, we add a function that hits the obtained values ​​at a point, adds a comma instead of a point and one or two zeros. For accuracy.

function addCommas(nStr)
{
nStr += '' ;
var x = nStr.split( '.' ); //
var x1 = x[0]; //
if (x.length - 1) if (!(x[1].length - 1)) x[1] += '0' ; // , ,
var x2 = x.length > 1 ? ',' + x[1] : ',00' ; // - , -
return x1 + x2;
}

* This source code was highlighted with Source Code Highlighter .

That's all:

Attention question

Why in the given example the .toFixed method did not work, for example x.toFixed?