New HackTheWeb version 1.3.7 – Implemented Preferences & Save to Stylish

[Updated 10.08.2012]

HackTheWeb 1.3.7

Latest version here.

– Added Options/Preferences
( Tools > Add-ons > Options/Preferences).

Advanced
– ClickSupport
– LeftClick
– RightClick

Colorize
– Color1
– Color2

Code Changes:
Fixed:
ReferenceError: evt is not defined


[Updated 07.08.2012]

HackTheWeb 1.3.6

Implemented Preferences.
– pref_colorizeOverride

Code changes:
– Updated description.
– Updated link for adding Stylish.
– Updated link for adding RIP.


[Updated 03.07.2012]

HackTheWeb 1.3.1

– Isolate now saves to stylish.
– *WHOOT* all toolbar actions now save to stylish!
– Implemented: Remove, DeWidth, Isolate, LilyWhite and Black-on-White.
– Scripts are presented in a much cleaner, easier-to-understand way.
– Save to Stylish code updated.

* Big thanks to luckymouse for helping with the Isolate CSS.

Previously:
HackTheWeb now offers the ability to save your changes to a script.
Save to Stylish, its the dawn of a new day 😉

Full Release Notes here.

If you like the add-on add a review here.

If you find any issues or errors please add a comment to this post.

, , , , , , , , , , , , ,

  1. #1 by Mike on July 3, 2012 - 4:40 am

    Next Step should be HTW being able to Sychronize saved Scripts over differents computers with FF Sych like ABP do with the filter tihs way you don’t have to tweak the same page twice or more (or use USB to transfer script when Synch is Availlable within FF.

    Thanks for the good work ! 🙂

    • #2 by htw on July 3, 2012 - 7:22 am

      Good point.

      I will look into it and add it to the wish list.

  2. #3 by Mike on July 3, 2012 - 5:58 pm

    Here’s the answer for keep in Synch Users Styles : https://addons.mozilla.org/en-US/firefox/addon/stylishsync/?src=userprofile

    BTW: A technical question: Do you know is HTW work (under the hood 😉 like ABP in preventing the browser to load “graphic” before they are processed by “graphical engine of Firefox” ?

    Ex: I remove with ABP 20 Flash animations in a page, so my page will load faster with ABP since Firefox have not to wait for the “Flash Animations” and even more if they are from anothers website server…

    So it’s the same things that Happen with HTW ?

    ———–

    Also One more question 😉 : Do you know how reve those kind of object (advertisement) on semmo.net and how they are generated technically speaking ? http://alturl.com/29hes

    Regards

    • #4 by htw on July 3, 2012 - 6:56 pm

      >Here’s the answer for keep in Synch Users Styles : stylishsync

      Hmm nice but hopefully stylish will eventually add a synch feature of its own.

    • #5 by htw on July 3, 2012 - 7:01 pm

      >BTW: A technical question: Do you know is HTW work (under the hood 😉 like ABP in preventing the browser to load “graphic” before they are processed by “graphical engine of Firefox” ?

      I recommend using ABP as well as HTW, ABP removes the ads and I use HTW to hack out any remaining annoyances.

      HTW works by reading the existing structure and then adjusting it depending on your commands.

    • #7 by htw on July 3, 2012 - 7:05 pm

      >Ex: I remove with ABP 20 Flash animations in a page, so my page will load faster

      You are better off having a add-on that toggles flash. By default nothing plays but you can click an item to play if you want.

    • #8 by htw on July 3, 2012 - 7:13 pm

      >Also One more question 😉 : Do you know how reve those kind of object (advertisement) on semmo.net and how they are generated technically speaking ? http://alturl.com/29hes

      Probably JavaScript based.

      I use the Toolbar Buttons add-on and it has lots of toggle buttons one of which enable disables JavaScript.

  3. #9 by Mike on July 3, 2012 - 6:12 pm

    It’s me again…

    Maybe you want to take a look to this “NEW” Add-on https://addons.mozilla.org//en-US/firefox/addon/user-style-manager/?src=ss.that and here’s the source code on GitHub https://github.com/scrapmac/User-Style-Manager seem LIGHTER” than Stylish and having the option to choose which one we want as “Save engine” for saving “Users Styles” Compatible with Stylish syntax 😉

    • #10 by htw on July 3, 2012 - 6:50 pm

      As you say it does look promising, I will keep watching its development.

  4. #11 by Mike on July 4, 2012 - 3:02 am

    I Apologize, it’s me again… 😛

    I have some time today (Since I live in Canada, but work on USA Schedule and today I was “off” at 1pm) to “play more” with HTW and others tools to make my work more productive and more easy for my eyes.

    So I found some UNDERVALUED interesting features in HTW.

    When I begun to use HTW it was cause I need quickly a way to remove “things” on web pages that ABP don’t remove quicly and easily.

    So like most user I installed HTW and use it as it is, just looked quickly on screenshot on the FF extension page.

    So I missed ONE THING that I needed and was already built-in cause you don’t emphasize on this feature: The Kill feature used in conjunction with RIP !!! 🙂 to save the object removed WITHOUT Stylish.

    From my point of view you could win a lot of users if you SHOW UP this feature in some screenshot or in a video.

    I even used RIP without knowing it can be drived by HTW !!!! I even at a point thinking to hack RIP to select the objects to remove the way I select objects with HTW !

    So it’s a nonsense for me that this function is almost hidden in HTW. You definitely win lot of user by providing a K button like this : http://alturl.com/bjerq

    For many casual users it will be less intimidating than “Stylish” and when they need more than saving “killed Objects” they will jump more easily in “Stylish”
    –=-=-=-=-=-=-=-=-

    Also Another underestimated features is Colorize features, this one is a brute gem well hiden that thousand of users are looking for… Again adding a “C” buttons will bring the feature to the “light”.

    I can say you have a really Killer extension… but some of the most usefull feature for the casual users are hidden behind the ones for the power users.

    I’ve worked on several projects ( games, utility, custom programming) and one of my main jobs was to be sure that the software are user friendly, even for peoples that never used a computers ( 15 years ago..) . I worked on large scale project like http://en.wikipedia.org/wiki/Wrath_of_the_Demon and many others utility.

    I’m pretty sure you will say, they will have to much buttons if I add 2 more.. 😉 The answer is Yes and No !

    In fact the power users don’t mind, but casual users don’t want to many “option at once, it’s confusing.

    So what I suggest is to have an Option to “tick” which button you want in the HTW toolbar panel. So for peoples that don’t want cluttered interface they can choose from the option panel which buttons/shorcut will be showing in the toolbar.

    One last things that could help a lot is to have the option to choose the same background color OR not with Colorize.

    I can ASSURE you that after doing such “easy” changes and putting in the front the hidden gems AKA K & C shortcut in front (Buttons) your extension in the seven most USED on Firefox before Christmas

    With simples screenshot/videos showing how it is easy to use the “hidden” features, from my experience I don’t see why you can’t be in the top 5 Firefox extension and I’m not kidding at all.

    I see lot of request for those features, and your extension DO IT but it’s hidden and not well documented and no buttons 😦

    But I don’t know a lot about JS but I know those features are easy to put in the front, I don’t think it’s like adding a new function (lot of coding).

    If you want to go deeper try to implement the Save routine of RIP extension Inside HTW ( this way one less extension).

    Also put links on HTW restart page that point right to the installation of RIP after the first start of HTW and that page can evn explain why using RIP…

    Also a “bug” on HTW page https://addons.mozilla.org/en-US/firefox/addon/hack-the-web/

    The 2 links http://www.instantfox.com/hacktheweb/keystrokes/ and http://www.instantfox.com/hacktheweb/ on /addons.mozilla.org are bogus…

    Sometime they don’t load cause the translation to http://www.workswonders.co.uk is not done so just change http://www.instantfox.com to http://www.instantfox.com and everything will be fine.

    If you want some help for testing let me know or anything I can do to help you I will be more than happy to do in my spare time.

    Have a Great Week-end !

    Mike

    • #12 by htw on July 4, 2012 - 5:49 pm

      >RIP: From my point of view you could win a lot of users if you SHOW UP this feature in some screenshot or in a video.

      Good point, I could mention is somewhere perhaps 🙂

      I am always aware of user fatigue and try to keep it simple 😉

      I will give it some thought.

    • #13 by htw on July 4, 2012 - 6:01 pm

      >For many casual users it will be less intimidating than “Stylish” and when they need more than saving “killed Objects” they will jump more easily in “Stylish”

      Hmm interesting…

      Or (playing devils advocate) confuse users with 2 ways to remove stuff ;-).

      Thinking it through I believe it needs to be an option that users can turn on through preferences… once I build preferences LOL.

    • #14 by htw on July 4, 2012 - 6:07 pm

      >Also Another underestimated features is Colorize features, this one is a brute gem well hiden that thousand of users are looking for… Again adding a “C” buttons will bring the feature to the “light”.

      Hmm what is the user case for this feature?

      That is, what would you/how would this, help users?

      It really doesn’t seem that useful to me but maybe I am missing something obvious.

      Again an option in preferences to turn a button on could be the way to go here.

    • #15 by htw on July 4, 2012 - 6:36 pm

      >Links …Sometime they don’t load cause the translation is not done.

      Odd, they are OK ATM, I will keep a watch on them.

  5. #16 by Mike on July 5, 2012 - 2:16 am

    htw :
    >Also Another underestimated features is Colorize features, this one is a brute gem well hiden that thousand of users are looking for… Again adding a “C” buttons will bring the feature to the “light”.
    Hmm what is the user case for this feature?
    That is, what would you/how would this, help users?
    It really doesn’t seem that useful to me but maybe I am missing something obvious.
    Again an option in preferences to turn a button on could be the way to go here.

    First Preference would be GREAT cause this way you can “hide” power Function form Casual User and let Power User Unlock the full potential of HTW.

    The C Buttons should is very useful for peoples like me that use computers for their works everyday on the web and for peoples that are more prone to eyes strain. Just a quick search on Google show it : http://alturl.com/q86i9

    I tested lot of software to remove the WHITE background that hurt my eyes… and it is worst with LCD monitors than old CRT… I found one software that fit MY need but it is not “USER FRIENDLY” for casual users… The software was not build for that purpose but to help web developer to test colors schemes in the process of making website.
    Here’s the software: https://addons.mozilla.org/en-US/firefox/addon/color-that-site/

    I worked with Michael to make the software more suited to use for the purpose “saving me eyes” 😎 and since and to debug the software since it was a tool he was using just for website. Since that time some others users use it like me to change colors of the site quickly.

    Some like me find it even more easy to use and Effective than using Stylish” (I’ve tryed Stylish before but if the site change something in the layout you have to redo all the work…) and CTS just works on colors of the site, try it !

    So your option with Colorize is more easy for casual user you can chose on the fly to change the WHITE background for less contrast than usual Black on White and for me reduce eyestrain and for others even reduce headaches… That’s what you were missing 😉

    Regards

    Mike

  6. #17 by Mike on July 23, 2012 - 12:39 am

    Hi,

    I have a Small Request:

    Should it be possible to save the “C Colourize – Sets background to a random color” permanently with the S save to Stylish Button ?

    BTW I use 1.3.1 latest

    Regards
    Mike

    p.s. One last request could you point me in the JS code of HTW where I can “fix” the colorize to always the same color instead of random colors ?

  7. #18 by htw on July 23, 2012 - 7:18 am

    Hi Mike,

    >Should it be possible to save the “C Colourize – Sets background to a random color” permanently with the S save to Stylish Button ?

    Colourize has not been a priority up to now but this should be doable medium term, I will add to the wish list.

    >p.s. One last request could you point me in the JS code of HTW where I can “fix” the colorize to always the same color instead of random colors ?

    This was not an option even under the original aardvark code.
    There is not preference for this ATM, I will add a preference when
    I implement the “save the “C Colourize” feature.

    It would make Colourize a lot more useful.


    Priority:
    I can request a Full Review in 5 days now that I have all issues resolved and HTW is performing as expected.

    Then I will have a look at whats next development wise.

    Note: HackTheWeb Version 1.3.1 given preliminary review. 4 days, 18 hours ago

    • #19 by htw on July 24, 2012 - 5:28 pm

      Added to wishlist.

      Update Colourize – Allow default colour choice and save to stylish.

  8. #20 by Mike on July 23, 2012 - 3:05 pm

    Thanks for your fast reply.

    Colorize will be very useful, If we can set our own 4 preferred colors instead of cycling through RANDOM colors till you have one that is easy on the eyes… 😎

    I know that Advark has no options for choosing colors…

    But in meantime since yesterday I’ve found the code in my spare time to hack it till the prefs option will be added officially in HTW

    ORIGINAL COLORIZE RANDOM CODE
    //————————————————————

    colorize : function (elem) {
    elem.style.backgroundColor = “#” +
    Math.floor(Math.random()*16).toString(16) +
    Math.floor(Math.random()*16).toString(16) +
    Math.floor(Math.random()*16).toString(16);
    elem.style.backgroundImage = “”;
    return true;
    },

    //————————————————————

    Since I never learn JS “officially” (It’s on my “To DO List”), can you tell me if my code is valid for the VAR ???

    Hacked Routine for COLORIZE: BROWN HEX COLOR CODE
    //————————————————————

    colorize : function (elem) {
    elem.style.backgroundColor = “#B39B86” +
    elem.style.backgroundImage = “”;
    return true;
    },

    //————————————————————

    It’s a kind of Brown that should be very easy for the eyes.. 😎
    Have a great Day !

    Mike

    • #21 by htw on July 24, 2012 - 4:56 pm

      My recommended short term workaround would be to change the lilyWhite function.

      The “#fff” would need changing.

      //--------------------------------------------------------
      lilyWhite: function (node, isLink) {
      // silverwave - When you just want a white background.

      ---
      node.style.backgroundColor = "#fff";
      ---

      If you want this to save correctly as well you would need to update the savescript function.

      The “background: white” would need changing.

      //--------------------------------------------------------
      savescript: function () {
      ---
      newList5 = hacktheweb.splitPrint('extensions.hacktheweb@instantfox.lilyWhite1', ' {background: white !important;}n');
      ---

  9. #22 by Mike on July 23, 2012 - 3:08 pm

    Oups there is an errors in my hack… Here is the Hack Code —>

    Hacked Routine for COLORIZE: BROWN HEX COLOR CODE
    //————————————————————

    colorize : function (elem) {
    elem.style.backgroundColor = “#B39B86″
    elem.style.backgroundImage = “”;
    return true;
    },

    //————————————————————

    Could you confirm that it will work and tell me if the the syntax look good too ???

    Mike

    • #23 by htw on July 24, 2012 - 5:12 pm

      Looks OK.

  10. #24 by Mike on July 24, 2012 - 7:31 pm

    Thx will put it together or as soon I have spare time Tonight and can give you feed back on best color to relief Eyes Strain that work with mos scheme of colors if you want.

    Your Extension will become a Killer 😉

    Regards !

  11. #25 by Mike on July 24, 2012 - 7:37 pm

    htw :
    My recommended short term workaround would be to change the lilyWhite function.
    The “#fff” would need changing.

    //--------------------------------------------------------
    lilyWhite: function (node, isLink) {
    // silverwave - When you just want a white background.

    ---
    node.style.backgroundColor = "#fff";
    ---

    If you want this to save correctly as well you would need to update the savescript function.
    The “background: white” would need changing.

    //--------------------------------------------------------
    savescript: function () {
    ---
    newList5 = hacktheweb.splitPrint('extensions.hacktheweb@instantfox.lilyWhite1', ' {background: white !important;}n');
    ---

    Oups !! Did not see this reply… Will Use LilyWhite instead of Colorize Routine will be a lot more USEFUL !! 🙂 🙂 🙂

    Thanks for the tip !

    As soon it is done, I will tell you how it work in day to day use (Will use it a lot this way).

    Thanks Again for your help and Work !

    Mike

    • #26 by htw on July 27, 2012 - 7:48 pm

      You may want to look at this style:

      SilverWave – GL01. Global 80% Width optimizeLegib

      An always available global “80% Width” style that I can switch on or off at will.

      Fixes ugly sites, forces background images to none and background color to white, fonts to black, gives the site 80% width so it doesn’t run from one side of the screen to the other. Makes fonts bigger.

      I have it set to white but you can ealily customize it to your needs.

      • #27 by htw on July 27, 2012 - 7:58 pm

        /*The first line prevents your selectors from matching XUL elements, the second restricts your style to http(s): URLs.*/

        @namespace url(http://www.w3.org/1999/xhtml);

        @-moz-document url-prefix("http:"), url-prefix("https:") {

        /* your style rules go here */

        body {

        /* margin: auto 15% 2% 15% !important; */

        margin: 1em auto !important;

        width: 80% !important;

        font-size: 100.00% !important;

        color: black !important;

        text-rendering: optimizeLegibility !important;

        background-color: #ffffff !important;

        background-image:none!important;

        }

        /*

        a:link {

        color: #C80000 !important;

        text-decoration: underline !important;

        font-size: inherit !important;

        background-color: #ffffff !important;

        }

        a:visited {

        color: #0032FF !important;

        text-decoration: none !important;

        font-size: inherit !important;

        background-color: #ffffff !important;

        }

        a:hover {

        color: green !important;

        text-decoration: underline !important;

        font-size: inherit !important;

        background-color: #ffffff !important;

        }

        a:active {

        color: black !important;

        text-decoration: none !important;

        font-size: inherit !important;

        background-color: #ffffff !important;

        }

        */

        p {

        text-indent: 30px !important;

        font-style: normal !important;

        font-size: 20px !important;

        font-weight: 300 !important;

        color: black !important;

        background-image:none!important;

        }

        dt {

        font-style: normal !important;

        font-size: 21px !important;

        font-weight: 600 !important;

        color: black !important;

        background-image:none!important;

        }

        dd {

        font-style: normal !important;

        font-size: 19px !important;

        font-weight: 300 !important;

        color: black !important;

        background-image:none!important;

        }

        li {

        font-style: normal !important;

        font-size: 19px !important;

        font-weight: 300 !important;

        color: black !important;

        background-image:none!important;

        }

        table {

        font-style: normal !important;

        font-size: 19px !important;

        font-weight: 300 !important;

        color: black !important;

        background-image:none!important;

        }

        th {

        font-style: normal !important;

        font-size: 21px !important;

        font-weight: 600 !important;

        color: black !important;

        background-image:none!important;

        }

        td {

        font-style: normal !important;

        font-size: 19px !important;

        font-weight: 300 !important;

        color: black !important;

        background-image:none!important;

        }

        em {

        font-style: oblique !important;

        font-weight: 600 !important;

        font-size: inherit !important;

        }

        strong {

        font-style: normal !important;

        font-size: larger !important;

        font-weight: 900 !important;

        color: black !important;

        }

        h1,h2,h3,h4,h5,h6 {

        font-style: normal !important;

        font-weight: 900 !important;

        margin-top: -2px !important;

        margin-bottom: -1mm !important;

        color: black !important;

        }

        }

  12. #28 by Mike on July 30, 2012 - 12:48 am

    Hi,

    I just hacked the hackthewebCommands.js to use lilywhyte button instead of colorize and to be able to save it with Stylish too..

    But for some part of web page the lily white function don’t change the color background 😦

    Could you help me to find line to add to the function to be able to change the complete background as with the C (colorize) keyboard shortcut ?

    Here is the color I use in HEX : #c2b0a5

    Here is 2 screenshot to better understand what I try to explain and the source code modified:

    1- with C (colorize) Function: http://imm.io/yuOe
    2- With Custom lily white function: http://imm.io/yuOF

    3-The modified source code to work with Lily (Stripped most comments on generated Stylish code 😉 http://www.sourcepod.com/rzgbzx15-8743

    Thanks for all your help

    Regards
    Mike

    • #29 by htw on July 30, 2012 - 6:48 am

      Interesting… please provide an example web page and I will look into this.


      Oh and on a different track, you may want to look at this style (see previous comment)
      SilverWave – GL01. Global 80% Width optimizeLegib

  13. #30 by Mike on July 30, 2012 - 1:54 pm

    Hi,

    You can try this one: http://finance.yahoo.com/

    With (C)olorize it’s fine but with Liliy “hacked” not all background is changing color…

    To see the that it don’t work, don’t forget to change to background to anything but white since it is already white 😉

    Thanks
    Mike

    • #31 by htw on July 30, 2012 - 4:58 pm

      This works on the stylish code side:

      @namespace url(http://www.w3.org/1999/xhtml);

      @-moz-document domain(“finance.yahoo.com”) {
      .yog-bd *
      {background: #c2b0a5 !important;}

      }

    • #32 by htw on July 30, 2012 - 6:10 pm

      New version:

      https://addons.mozilla.org/en-US/firefox/addon/hack-the-web/versions

      – Added a pref “colorizeOverRide”
      Default is “off” but if set to a color then colorize will use this in place of a random color each time “c” is pressed.

      about:config
      search for colorizeOverRide and set to the color of your choice.

      e.g.
      #c2b0a5

  14. #33 by Mike on July 30, 2012 - 5:19 pm

    I will test it and try to find a way to make HTW generate this script by itself with the save function…

    I let’s you know when it’s done.

    Thanks !!!!
    Mike

    • #34 by Mike on July 30, 2012 - 6:40 pm

      I try it and let you know… How it work in day to day use 🙂

      Thx

      Mike

  15. #35 by Mike on July 30, 2012 - 7:29 pm

    Hi,

    It don’t work fine 😦 Sorry but better to know now…

    This morning I begin to play with CSS that you send me for Yahoo Finance to figure how it work and how I can use it on other site and in a efficient way.

    So I tested “lot” of CSS to found one that fit All web page from now.

    Here it is:

    ———-

    * *:not(img)

    {background: #c2b0a5 !important;}

    ———–

    I understand more what are “selector” so I use
    * = for have the Full backround page including ALL in the page… But The problem was Even Image were hidden in some web page 😦

    So I added after the first “*” : *:not(img) to keep image from being hidden by backround color.

    With the (C)olorize routine you have to choose every “frame” in a page instead of having in “One Shoot Colorizing”

    So Try with this page it’s in French Forum the as a test page it’s a good one 😉

    http://www.reseaucontact.com/forums/?action=read&topic=5&post=10137217&page=1

    ——–
    @namespace url(http://www.w3.org/1999/xhtml);

    @-moz-document domain(“www.reseaucontact.com”) {
    * *:not(img)

    {background: #c2b0a5 !important;}
    ———–

    Now if you can add a Button (even optional) so If we click on this button, we don’t have to reload HTW each time we want to use the function.

    This way also most of the time we will not even need to save, since we will be able to click right on the button if we want read a long page with with white or flashy background.

    One last improvement (for now) should be a switch in the about:config choose the color (like you’ve done) BUT being Able to choose Cycling through only 2 differents colors, so this way it will work on 995 of the background even if the original font are light colors or dark colors.

    For me I will choose 2 variants of the same color with one lighter and the second darker.

    This way on any web page I’m I could be able in 2 mouse click to remove the Flash Background color and have an Easy page to read even with light color fonts or dark color fonts.

    Let me know 😉

    We are near the goal…:)

    Suggestion for future improvements:
    ____________________________________

    -Switch In about:config or option in a panel to remove comment in CSS generated for Stylish
    -Being Able to save the background change for people’s that want the change permanent.

    Being able to choose if the change we are saving will be applied to:
    1- Only the page we are : http://www.retronaut.co/2011/10/retronautic-wtf-v/
    2- Folder: http://www.oddee.com/
    3- Domain: http://www.retronaut.co

    This way we will have a more granular control over the page we want to be affected by the changes 😉

    Regards
    Mike

  16. #36 by Mike on July 30, 2012 - 7:32 pm

    Oups Error :I mean

    Being able to choose if the change we are saving will be applied to:
    1- Only the page we are : http://www.retronaut.co/2011/10/retronautic-wtf-v/
    2- Folder: http://www.retronaut.co
    3- Domain: retronaut.co

    This way we will have a more granular control over the page we want to be affected by the changes

  17. #37 by htw on July 30, 2012 - 10:18 pm

    Hi Mike,

    >* *:not(img)
    >{background: #c2b0a5 !important;}

    I think for general things of this nature a separate style that you can enable/disable is more appropriate.

    The advantages are availability and simplicity.

    e.g.


    Global Site Color Style – Light

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix("http:"), url-prefix("https:") {

    * :not(img)
    {background: Silver !important;}
    }

    Global Site Color Style – Dark

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix("http:"), url-prefix("https:") {

    * :not(img)
    {background: DarkGray !important;}
    }

  18. #38 by htw on July 30, 2012 - 10:24 pm

    Hi Mike,

    >Switch In about:config or option in a panel to remove comment in CSS generated for Stylish.

    Yes I have already thought of the need for a commentsOff pref.

    Coming soon.

    >-Being Able to save the background change for people’s that want the change permanent.

    Yes that’s planned for the next update.

  19. #39 by htw on July 30, 2012 - 10:39 pm

    Hi Mike,

    >more granular control over the page…

    You can use “@-moz-document url()”.

    e.g.

    @-moz-document url(“http://www.retronaut.co/2011/10/retronautic-wtf-v/”)

    But I don’t see a lot of demand for the “url” variant, as most ppl will want the domain option, or it will be “good enough”.

    Also the ppl who will want this are the ppl who know already know to alter the script for those few occasions they will need it.

    Nevertheless it will be a good idea to add a note in the advanced help about this.

  20. #40 by htw on July 30, 2012 - 10:50 pm

    Hi Mike,

    >For me I will choose 2 variants of the same color with one lighter and the second darker.

    Yes now that it is working I was thinking that a second override color would be useful.

  21. #41 by Mike on July 31, 2012 - 5:16 pm

    Hi Again,

    Just Using the Styles in Stylish is not conveniant for my use. Let me explain:

    I need to be able to change the Background color in 2 mouse click no more.

    When I browse & find and use things to read, I just want to be able to “quickly” click at One place to change the color of the page (temporary).

    With Stylish I have to go in menu choose the layout, enable after I finish reading go in the menu change the layout and or disable Stylish… and so on…

    So it’s not usefull at al, also I don’t want my others windows or tabs change layout ( I use now 10 tabs 4 windows) and I can always save for the page I will use the CSS cause sometime I will need the original CSS or I don’t even know before finding a thread on a forum or website what I will be stuck to read for an hour (doing research).

    So the most efficient & practical way from my point of view is to have a simple button in the Toolbar that Toggle between the 2 CSS and OFF.

    In my spare time I will try to insert it in HTW reusing the LilyWhye code…

    Could you tell me, what is the difference between: elem.style.backgroundColor = AND node.style.backgroundColor = I don’t understand the difference between the node and element ?

    ——————-
    colorize: function (elem) {
    elem.style.backgroundColor = “#” + Math.floor(Math.random() * 16).toString(16) + Math.floor(Math.random() * 16).toString(16) + Math.floor(Math.random() * 16).toString(16);
    elem.style.backgroundImage = “”;
    return true;
    },

    ———–
    AND
    ———-
    switch (node.nodeType) {
    case 1:
    // ELEMENT_NODE
    {
    if (node.tagName != “IMG”) {
    if (node.tagName == “A”) isLink = true;
    node.style.backgroundColor = “#c2b0a5”;
    node.style.backgroundImage = “”;

    var isLeaf = (node.childNodes.length == 0 && this.leafElems[node.nodeName]);

    if (!isLeaf) for (var i = 0; i < node.childNodes.length; i++)
    this.lilyWhite1(node.childNodes.item(i), isLink);
    }
    }
    ————–

    Regards

    Mike

    • #42 by htw on July 31, 2012 - 6:08 pm

      >node and element

      Same thing effectively.

    • #43 by htw on July 31, 2012 - 6:11 pm

      >In my spare time I will try to insert it in HTW reusing the LilyWhye code…

      I will be adding a LilyWhiteOverride shortly.
      This will save to Stylish as well.

  22. #44 by htw on July 31, 2012 - 6:00 pm

    Hi Mike,

    >I need to be able to change the Background color in 2 mouse click no more.

    Note:
    I use barlesque as a statusbar replacement:
    https://addons.mozilla.org/en-us/firefox/addon/barlesque/

  23. #45 by Mike on July 31, 2012 - 6:14 pm

    Thanks will give a try to it 🙂 !

    Regards
    Mike

  24. #46 by Mike on July 31, 2012 - 6:34 pm

    Oups !!! 😦

    One major problem for me… with this workaround…

    The Style is GLOBAL so all FF windows I watch on my 4 monitors have the color change applied… Not good for me 😦

    I need to change only the window where I read… AKA just inject the CSS in the windows where I read like HTW do without saving…

    Regards Mike

  25. #47 by htw on August 7, 2012 - 4:31 am

    Implemented Preferences!
    – pref_colorizeOverride

    Really pleased as this is one of my milestones.

    Next up – adding all the present prefs and then adding more useful ones, now they are easily accessible 🙂

  26. #48 by Mike on August 7, 2012 - 12:17 pm

    Thanks I will try it today,

    Should it be possible to have a “Unique Button” for Colorize in the tool-bar ALWAYS available that is not under a sub menu ?

    The unique Button could Toggle ON and OFF Colorize function.

    Also Maybe able to Use 2-3 Colors to “Cycle” with the Colorize function in the Preferences should be REALLY Useful.

    The new Button could be detachable from the main HTW Icon, this way we can choose if we want it or not, and where we want to put it 😉

    Keep on the good Work !

    Mike

  27. #49 by Mike on August 9, 2012 - 1:11 am

    You should document a little bit more the “Implemented Preferences!
    – pref_colorizeOverride” a liitle bit more.

    Just give an example about the syntax since it’s not anybody that will find that the color format is in Hex and with the prefix “#” Also tell it’s not from the interface but in about:config ! 😉

    Thanks !

    • #50 by htw on August 9, 2012 - 6:13 am

      Oh and a color works as well.

      e.g.

      Silver

  28. #51 by htw on August 9, 2012 - 6:10 am

    Aye this is just a proof that the preferences interface works, next up will be all the preferences available and maybe a color picker.

    Real Soon Now 😉

  29. #52 by htw on August 9, 2012 - 8:13 pm

    >Also tell it’s not from the interface but in about:config ! 😉

    Nope you go: Tools > Add-ons > HackTheWeb > Preferences.

    No “about:config” needed.

  30. #53 by htw on August 10, 2012 - 2:28 am

    [Updated 10.08.2012]

    New version to test Here.

  31. #54 by Mike on August 10, 2012 - 3:54 am

    Thanks a lot will load it Right Now !

    Regards
    Mike

  32. #55 by Mike on August 10, 2012 - 1:04 pm

    Hi,

    I’d like to see Colorize function work this way:

    Instead of having to choose part in the page that you want change, It will be LOT more useful if the COLORIZE function change the FULL Background colors in “One Shot” !

    The “Real Purpose” of “Colorize” is to save eyes from White and high contrast colors.

    So having to chosse each time in the page many frames or parts in a non-sense to me (Unless somebody like clicking on buttons mouse 😉

    I think for you it should be easy to change the Colorize Code to display/generate page in that way:

    @namespace url(http://www.w3.org/1999/xhtml);

    @-moz-document domain(“www.reseaucontact.com”) {
    * *:not(img)

    {background: #c2b0a5 !important;}

    ———————

    This way no more white side on each sides of the screen, just one Click or pressing “C” on keyboard will give us the “FULL” background COLORIZED in “One Shot” .

    Could you try to implement “C”olorize to work this way ?

    Regards
    Mike

  33. #56 by htw on August 10, 2012 - 4:27 pm

    Already planned for that but the order of work is:

    1. Get everything connected to OptionsPreferences.

    2. Test that it works correctly.

    I have tested this version on a windows XP box today and all the new options are working as expected.

    3. Fix colorise code.

    So next up is Full-background-colorise.

  34. #57 by Mike on August 10, 2012 - 6:58 pm

    Thanks a lot !

    > next up is Full-background-colorise.
    Don’t forget to exclude Image AKA * *:not(img) 😉

    If you want I can test your beta build on Win7x64

    Regards ! 🙂

    • #58 by htw on August 21, 2012 - 8:38 pm

      Just a thought…

      NoSquint 2.1.5

      NoSquint allows you to adjust the text-only and full-page (both text and images) zoom levels as well as color settings both globally (for all sites) and per site.

      Seems right up your street.

      • #59 by Mike on August 22, 2012 - 3:56 am

        Will give a try, but not sure if I like it put is setting in my prefs.js file instead of it’s own DB (less garbage in prefs.js).

        Also not sure if it does the trick to being able to change the color ONLY for the time I read the page: Until I hit refresh…

        Sometime I’d just read an a long web page on a forum and don’t want to have always the colors changed when I will comeback.

        Also I have the choice of only ONE bgrd color…

        The Optimized Colorize function like we talked about seem much more promising to me !

        But this week or this week-end I will give on test Drive to NoSquint ! 🙂

        Thanks a lot

        Regards
        Mike

      • #60 by Mike on August 22, 2012 - 3:57 am

        test

  35. #61 by Mike on August 17, 2012 - 8:20 pm

    Hi I use HTW on 2 different computers and on the computer with V1.3.7 the remove function don’t work ????

    I was not sure, but I’ve tested to be sure and there is some regression cause on my other computer I use HTW 1.3.1 and all is fine.

    It’s not an extension conflict since the 2 computers are in sync for with Firefox so they have the same extension EXCEPT for the Version of HTW ??

    Both are on Win7 64…

    Let me know if you have another version that I could test…

    From what I remember it’s since the last version I think it’s broken.

    Regards Mike

  36. #62 by htw on August 17, 2012 - 9:53 pm

    Working on Win7 64bit OK.
    Tested V1.3.7
    Firefox 14.01

    Check that Tools > Add-ons > HTW > Options:
    LeftClick is set to “Remove”
    ClickSupport set to “On”

  37. #63 by Mike on August 18, 2012 - 2:28 am

    You are Right ! 🙂

    I forget to re-enable mouse Click last time I setup custom colors for Colorize…. Sorry ! Hihihihhihihhi 😉

    Regards

  38. #64 by Anatoly on September 8, 2012 - 6:35 pm

    Win7, FF 15.0, HTW 1.3.7. Does not work with Stylish 1.3 – “Save the style for your next visit” button or “S” key do nothing. Error console show where error is. With Stylish 1.2.6 it’s all OK.

    • #65 by htw on September 8, 2012 - 7:13 pm

      Thanks for the information regarding Stylish 1.3.0.

      Confirmed HTW not working with Stylish 1.30 (use Stylish 1.2.6 until this is fixed).

      I will see if its my code or something the Stylish author has changed.

      Once again thanks for the warning.

    • #66 by htw on September 8, 2012 - 9:39 pm

      Please to update to HTW 1.3.8.

      Latest Version Here: HackTheWeb 1.3.8

  39. #67 by htw on September 8, 2012 - 7:54 pm

    ______________________________

    NOTE! HTW is not “Saving to Stylish” with Stylish 1.3.0.
    Use Stylish 1.2.6 here until this is fixed.
    I will see if its my code or something the Stylish author has changed.
    ______________________________

  40. #68 by htw on September 8, 2012 - 9:36 pm

    The fix for HTW not “Saving to Stylish” with new Stylish version 1.3.0 is to update to HTW 1.3.8

    Latest Version Here: HackTheWeb 1.3.8

  41. #69 by htw on September 10, 2012 - 5:28 pm

    HTW 1.3.8. will be getting pushed out automatically over the next few days.

Leave a comment