Skip to content

Instantly share code, notes, and snippets.

@noscripter

noscripter/firefox-viewsource-customize.md

Forked from abelcheung/firefox-viewsource-customize.md
Created October 11, 2021 02:59
Show Gist options
  • Save noscripter/cf3acab645fc7c91801b7670744849b5 to your computer and use it in GitHub Desktop.
Save noscripter/cf3acab645fc7c91801b7670744849b5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @abelcheung abelcheung revised this gist Aug 23, 2019. 2 changed files with 41 additions and 41 deletions.
    14 changes: 7 additions & 7 deletions firefox-viewsource-customize.md
    View file
    Original file line number Diff line number Diff line change
    @@ -44,13 +44,13 @@ Beware of a few issues before choosing to customize this way:

    - The default `view-source` stylesheet, `viewsource.css`, is loaded **after** `userContent.css`.
    That means merely copying style from `viewsource.css` and changing values won't work,
    as later resource would override earlier ones [with same specificity][css fish]. Overriding
    such behaviour needs either:
    1. Use higher CSS specificity
    2. Attach changes with `!important` rule (not recommended in general, but probably fine
    [for user customization][css-tricks important])

    Attached stylesheet uses a mixture of both strategy.
    as later resource would override earlier ones [with same specificity][css fish].
    - Another parculiarity about `view-source` is that, even CSS selectors with higher specificity
    won't work. That means replacing `pre` rule with `#viewsource pre` would actually render the
    rule useless.
    - The only fix is, attach changes with `!important` rule. Strongly unrecommended for general
    web development, but for user customization
    [this is a valid usage][css-tricks important].
    - `userContent.css` won't show up under Web Developer Tools, only `viewsource.css` is available.
    That implies more tedious debugging.

    68 changes: 34 additions & 34 deletions userContent.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    }

    #viewsource {
    font-family: "Roboto Mono", Inconsolata, "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, -moz-fixed;
    font-family: "Roboto Mono", Inconsolata, "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, -moz-fixed !important;
    line-height: 1.5em;
    background-image:
    url(https://farm9.staticflickr.com/8536/8680613751_71ef92bbdb_o_d.jpg),
    @@ -19,56 +19,56 @@
    color: #839496;
    }

    #viewsource pre[id]:before,
    #viewsource span[id]:before {
    width: 6ch;
    color: #586e75;
    margin-left: -7ch;
    pre[id]:before,
    span[id]:before {
    width: 6ch !important;
    color: #586e75 !important;
    margin-left: -7ch !important;
    }
    #viewsource pre {
    pre {
    padding-left: 1ch;
    margin-left: 6ch;
    margin-left: 6ch !important;
    border-left: 2px solid #073642;
    }
    #viewsource pre > :first-child {
    pre > :first-child {
    padding-right: 1ch;
    }

    #viewsource .start-tag {
    color: #d33682;
    .highlight .start-tag {
    color: #d33682 !important;
    }
    #viewsource .end-tag {
    color: #d33682;
    .highlight .end-tag {
    color: #d33682 !important;
    }
    #viewsource .comment {
    color: #586e75;
    .highlight .comment {
    color: #586e75 !important;
    }
    #viewsource .cdata {
    color: #cb4b16;
    .highlight .cdata {
    color: #cb4b16 !important;
    }
    #viewsource .doctype {
    color: #268be2;
    .highlight .doctype {
    color: #268be2 !important;
    }
    #viewsource .pi {
    color: #268be2; /* orchid -> blue */
    .highlight .pi {
    color: #268be2 !important; /* orchid -> blue */
    }
    #viewsource .entity {
    color: #b58900; /* violet -> yellow */
    .highlight .entity {
    color: #b58900 !important; /* violet -> yellow */
    }
    #viewsource .attribute-name {
    color: #93a1a1;
    .highlight .attribute-name {
    color: #93a1a1 !important;
    }
    #viewsource .attribute-value {
    color: #2aa198;
    .highlight .attribute-value {
    color: #2aa198 !important;
    text-shadow: 1px 1px 2px black;
    }
    #viewsource .markupdeclaration {
    color: #859900;
    .highlight .markupdeclaration {
    color: #859900 !important;
    }
    #viewsource .error,
    #viewsource .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
    .highlight .error,
    .highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
    .pi, .entity, .attribute-name, .attribute-value) {
    color: #002b36;
    background-color: #dc322f;
    color: #002b36 !important;
    background-color: #dc322f !important;
    }
    }
    }
  2. @abelcheung abelcheung renamed this gist Aug 23, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ff-view-source.md → firefox-viewsource-customize.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    ## TL;DR

    1. Open (or create) `chrome/userContent.css` under your Firefox profile folder
    2. Paste the CSS content attached below and save file
    2. Append attached CSS content and save file
    3. Restart Firefox

    ![firefox view-source style customization](https://user-images.githubusercontent.com/83110/63570427-ba79bd80-c5af-11e9-9fee-7de77ba1b9ab.png)
  3. @abelcheung abelcheung revised this gist Aug 23, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions ff-view-source.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,10 +6,10 @@
    2. Paste the CSS content attached below and save file
    3. Restart Firefox

    ----

    ![firefox view-source style customization](https://user-images.githubusercontent.com/83110/63570427-ba79bd80-c5af-11e9-9fee-7de77ba1b9ab.png)

    ----

    ## Introduction

    Although the good ol' days of viewing source in browser (via <kbd>Ctrl+U</kbd>
  4. @abelcheung abelcheung revised this gist Aug 23, 2019. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion ff-view-source.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,16 @@
    # Customizing Firefox view-source style

    ## TL;DR

    1. Open (or create) `chrome/userContent.css` under your Firefox profile folder
    2. Paste the CSS content attached below and save file
    3. Restart Firefox

    ----

    ![firefox view-source style customization](https://user-images.githubusercontent.com/83110/63570427-ba79bd80-c5af-11e9-9fee-7de77ba1b9ab.png)

    # Customizing Firefox view-source style
    ## Introduction

    Although the good ol' days of viewing source in browser (via <kbd>Ctrl+U</kbd>
    or Right click &rarr; View Page Source for most browsers)
  5. @abelcheung abelcheung revised this gist Aug 23, 2019. 1 changed file with 19 additions and 4 deletions.
    23 changes: 19 additions & 4 deletions ff-view-source.md
    View file
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,7 @@ Launch `about:config` in Firefox and check for the key

    ## Caveats

    Beware of a few points before choosing to customize this way:
    Beware of a few issues before choosing to customize this way:

    - The default `view-source` stylesheet, `viewsource.css`, is loaded **after** `userContent.css`.
    That means merely copying style from `viewsource.css` and changing values won't work,
    @@ -53,7 +53,7 @@ Beware of a few points before choosing to customize this way:
    [css-tricks important]: https://css-tricks.com/when-using-important-is-the-right-choice/
    [css fish]: https://specifishity.com/

    ## Solarized Dark usage
    ## Usage of Solarized Dark theme

    ![Solarized theme](https://raw.githubusercontent.com/altercation/solarized/master/img/solarized-vim.png)

    @@ -67,8 +67,23 @@ changes due to contrast problems (and personal choices?):
    entity color to yellowish instead.
    - Text shadow applied to blue / cyan syntax highlights to enhance font outline.
    - Plain background is boring, right? *Right?* The stylesheet below applies a blueish tint
    (resembling Solarized Dark background color, `#002B36`) to the *left side* of background
    image, as well as translucency to guarantee background luminosity is low enough.
    (resembling Solarized Dark background color, `#002B36`) to the *left half* of background
    image (where most HTML is shown), as well as translucency to guarantee background
    luminosity is low enough.
    - Zebra stripping applied to background

    Everybody is free to experiment with your own favourite background filters.

    ## Changes to `view-source` UI

    - Line number widened to 6 digits. Yes, HTML with tens of thousands of lines really *does*
    exist (as demonstrated with screenshot above, over 58000 lines actually)
    - Border added between line number and content

    ## Future user changes

    ![Firefox Style Editor](https://user-images.githubusercontent.com/83110/63579867-249d5d00-c5c6-11e9-97b7-0eb202bfc9ab.png)

    On `view-source` UI, it is possible to check out its stylesheet by launching Web Developer Tool
    <kbd>F12</kbd>, and select Style Editor tab. Users can then freely pick styles they are not
    satisfied with, and incorporate changes to `userContent.css`.
  6. @abelcheung abelcheung revised this gist Aug 23, 2019. 2 changed files with 32 additions and 11 deletions.
    39 changes: 30 additions & 9 deletions ff-view-source.md
    View file
    Original file line number Diff line number Diff line change
    @@ -19,17 +19,21 @@ user style to Firefox profile.
    The original `view-source` style is available from
    `resource://content-accessible/viewsource.css`, [as of Firefox 57][mdn res].
    However it is protected resource and can't be modified at will; customization can only
    be saved externally and re-imported everytime one uses Style Editor under Web Developer
    be saved externally and reimported everytime one uses Style Editor under Web Developer
    Tools.

    To alleviate unnecessary re-import everytime upon browser start, it is possible to add
    extra styles to Firefox profile instead. This is the same as [how Stylish works][stylish]
    To alleviate unnecessary reimport each and every time upon browser start, it is possible to add
    extra styles to Firefox profile instead. This is the same as [how Stylish works][stylish].

    {: .flash}
    **Note:** Since Firefox 68/69, [extra advanced Firefox config][ghacks] is needed.
    Launch `about:config` in Firefox and check for the key
    `toolkit.legacyUserProfileCustomizations.stylesheets`.

    [css-tricks viewsource]: https://css-tricks.com/view-source/
    [mdn res]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs
    [ghacks]: https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-and-usercontent-css-disabled-by-default/
    [stylish]: https://userstyles.org/

    ## Caveats

    Beware of a few points before choosing to customize this way:
    @@ -41,13 +45,30 @@ Beware of a few points before choosing to customize this way:
    1. Use higher CSS specificity
    2. Attach changes with `!important` rule (not recommended in general, but probably fine
    [for user customization][css-tricks important])

    Attached stylesheet uses a mixture of both strategy.
    - `userContent.css` won't show up under Web Developer Tools, only `viewsource.css` is available.
    That implies more tedious debugging.

    [css-tricks viewsource]: https://css-tricks.com/view-source/
    [css-tricks important]: https://css-tricks.com/when-using-important-is-the-right-choice/
    [mdn res]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs
    [ghacks]: https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-and-usercontent-css-disabled-by-default/
    [stylish]: https://userstyles.org/
    [css fish]: https://specifishity.com/
    [css fish]: https://specifishity.com/

    ## Solarized Dark usage

    ![Solarized theme](https://raw.githubusercontent.com/altercation/solarized/master/img/solarized-vim.png)

    Solarized theme is one of the most widely used color palette, featuring precisely calculated
    lightness and hue relationships. Colors used in attached CSS try to be as faithful to both
    Solarized colors and original `view-source` color choices as possible, but there are a few
    changes due to contrast problems (and personal choices?):

    - HTML entities (`&amp;`, `&lt;` etc) were originally displayed in violet, but Solarized
    violet is too close to normal text color under Solarized Dark theme. So I changed HTML
    entity color to yellowish instead.
    - Text shadow applied to blue / cyan syntax highlights to enhance font outline.
    - Plain background is boring, right? *Right?* The stylesheet below applies a blueish tint
    (resembling Solarized Dark background color, `#002B36`) to the *left side* of background
    image, as well as translucency to guarantee background luminosity is low enough.
    - Zebra stripping applied to background

    Everybody is free to experiment with your own favourite background filters.
    4 changes: 2 additions & 2 deletions userContent.css
    View file
    Original file line number Diff line number Diff line change
    @@ -67,8 +67,8 @@
    }
    #viewsource .error,
    #viewsource .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
    .pi, .entity, .attribute-name, .attribute-value) {
    .pi, .entity, .attribute-name, .attribute-value) {
    color: #002b36;
    background-color: #dc322f;
    }
    }
    }
  7. @abelcheung abelcheung revised this gist Aug 23, 2019. 2 changed files with 56 additions and 37 deletions.
    27 changes: 23 additions & 4 deletions ff-view-source.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,11 +4,13 @@
    2. Paste the CSS content attached below and save file
    3. Restart Firefox

    ![firefox view-source style customization](https://user-images.githubusercontent.com/83110/63570427-ba79bd80-c5af-11e9-9fee-7de77ba1b9ab.png)

    # Customizing Firefox view-source style

    Although the good ol' days of viewing source in browser (via <kbd>Ctrl+U</kbd>
    or Right click &rarr; View Page Source for most browsers)
    [can be dated][css-tricks], it still hasn't been completely retired yet,
    [can be dated][css-tricks viewsource], it still hasn't been completely retired yet,
    and can still be useful for cases like checking out vanilla HTML source
    (not post-processed by JavaScript, for example). This gist is about
    customizing `view-source` style semi-permanently through adding
    @@ -23,12 +25,29 @@ Tools.
    To alleviate unnecessary re-import everytime upon browser start, it is possible to add
    extra styles to Firefox profile instead. This is the same as [how Stylish works][stylish]

    {: .flash}
    **Note:** Since Firefox 68/69, [extra advanced Firefox config][ghacks] is needed.
    Launch `about:config` in Firefox and check for the key
    `toolkit.legacyUserProfileCustomizations.stylesheets`.
    {: .flash}

    [css-tricks]: https://css-tricks.com/view-source/
    ## Caveats

    Beware of a few points before choosing to customize this way:

    - The default `view-source` stylesheet, `viewsource.css`, is loaded **after** `userContent.css`.
    That means merely copying style from `viewsource.css` and changing values won't work,
    as later resource would override earlier ones [with same specificity][css fish]. Overriding
    such behaviour needs either:
    1. Use higher CSS specificity
    2. Attach changes with `!important` rule (not recommended in general, but probably fine
    [for user customization][css-tricks important])
    Attached stylesheet uses a mixture of both strategy.
    - `userContent.css` won't show up under Web Developer Tools, only `viewsource.css` is available.
    That implies more tedious debugging.

    [css-tricks viewsource]: https://css-tricks.com/view-source/
    [css-tricks important]: https://css-tricks.com/when-using-important-is-the-right-choice/
    [mdn res]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs
    [ghacks]: https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-and-usercontent-css-disabled-by-default/
    [stylish]: https://userstyles.org/
    [stylish]: https://userstyles.org/
    [css fish]: https://specifishity.com/
    66 changes: 33 additions & 33 deletions userContent.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    }

    #viewsource {
    font-family: "Roboto Mono", Inconsolata, "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, -moz-fixed !important;
    font-family: "Roboto Mono", Inconsolata, "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, -moz-fixed;
    line-height: 1.5em;
    background-image:
    url(https://farm9.staticflickr.com/8536/8680613751_71ef92bbdb_o_d.jpg),
    @@ -19,56 +19,56 @@
    color: #839496;
    }

    pre[id]:before,
    span[id]:before {
    width: 6ch !important;
    color: #586e75 !important;
    margin-left: -7ch !important;
    #viewsource pre[id]:before,
    #viewsource span[id]:before {
    width: 6ch;
    color: #586e75;
    margin-left: -7ch;
    }
    pre {
    #viewsource pre {
    padding-left: 1ch;
    margin-left: 6ch !important;
    margin-left: 6ch;
    border-left: 2px solid #073642;
    }
    pre > :first-child {
    #viewsource pre > :first-child {
    padding-right: 1ch;
    }

    .highlight .start-tag {
    color: #d33682 !important;
    #viewsource .start-tag {
    color: #d33682;
    }
    .highlight .end-tag {
    color: #d33682 !important;
    #viewsource .end-tag {
    color: #d33682;
    }
    .highlight .comment {
    color: #586e75 !important;
    #viewsource .comment {
    color: #586e75;
    }
    .highlight .cdata {
    color: #cb4b16 !important;
    #viewsource .cdata {
    color: #cb4b16;
    }
    .highlight .doctype {
    color: #268be2 !important;
    #viewsource .doctype {
    color: #268be2;
    }
    .highlight .pi {
    color: #268be2 !important; /* orchid -> blue */
    #viewsource .pi {
    color: #268be2; /* orchid -> blue */
    }
    .highlight .entity {
    color: #b58900 !important; /* violet -> yellow */
    #viewsource .entity {
    color: #b58900; /* violet -> yellow */
    }
    .highlight .attribute-name {
    color: #93a1a1 !important;
    #viewsource .attribute-name {
    color: #93a1a1;
    }
    .highlight .attribute-value {
    color: #2aa198 !important;
    #viewsource .attribute-value {
    color: #2aa198;
    text-shadow: 1px 1px 2px black;
    }
    .highlight .markupdeclaration {
    color: #859900 !important;
    #viewsource .markupdeclaration {
    color: #859900;
    }
    .highlight .error,
    .highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
    #viewsource .error,
    #viewsource .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
    .pi, .entity, .attribute-name, .attribute-value) {
    color: #002b36 !important;
    background-color: #dc322f !important;
    color: #002b36;
    background-color: #dc322f;
    }
    }
  8. @abelcheung abelcheung created this gist Aug 23, 2019.
    34 changes: 34 additions & 0 deletions ff-view-source.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    ## TL;DR

    1. Open (or create) `chrome/userContent.css` under your Firefox profile folder
    2. Paste the CSS content attached below and save file
    3. Restart Firefox

    # Customizing Firefox view-source style

    Although the good ol' days of viewing source in browser (via <kbd>Ctrl+U</kbd>
    or Right click &rarr; View Page Source for most browsers)
    [can be dated][css-tricks], it still hasn't been completely retired yet,
    and can still be useful for cases like checking out vanilla HTML source
    (not post-processed by JavaScript, for example). This gist is about
    customizing `view-source` style semi-permanently through adding
    user style to Firefox profile.

    The original `view-source` style is available from
    `resource://content-accessible/viewsource.css`, [as of Firefox 57][mdn res].
    However it is protected resource and can't be modified at will; customization can only
    be saved externally and re-imported everytime one uses Style Editor under Web Developer
    Tools.

    To alleviate unnecessary re-import everytime upon browser start, it is possible to add
    extra styles to Firefox profile instead. This is the same as [how Stylish works][stylish]

    **Note:** Since Firefox 68/69, [extra advanced Firefox config][ghacks] is needed.
    Launch `about:config` in Firefox and check for the key
    `toolkit.legacyUserProfileCustomizations.stylesheets`.
    {: .flash}

    [css-tricks]: https://css-tricks.com/view-source/
    [mdn res]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs
    [ghacks]: https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-and-usercontent-css-disabled-by-default/
    [stylish]: https://userstyles.org/
    74 changes: 74 additions & 0 deletions userContent.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    @-moz-document url-prefix(view-source:) {

    *|*:root {
    background: none !important;
    }

    #viewsource {
    font-family: "Roboto Mono", Inconsolata, "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, -moz-fixed !important;
    line-height: 1.5em;
    background-image:
    url(https://farm9.staticflickr.com/8536/8680613751_71ef92bbdb_o_d.jpg),
    linear-gradient(to right, #002b36d0, #002b36d0, #000000d0),
    linear-gradient(#00000040 50%, transparent 50%);
    background-size: cover, cover, auto 3em;
    background-position: center, center, top 10px left 0;
    background-attachment: fixed, fixed, scroll;
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-blend-mode: overlay, normal, normal;
    color: #839496;
    }

    pre[id]:before,
    span[id]:before {
    width: 6ch !important;
    color: #586e75 !important;
    margin-left: -7ch !important;
    }
    pre {
    padding-left: 1ch;
    margin-left: 6ch !important;
    border-left: 2px solid #073642;
    }
    pre > :first-child {
    padding-right: 1ch;
    }

    .highlight .start-tag {
    color: #d33682 !important;
    }
    .highlight .end-tag {
    color: #d33682 !important;
    }
    .highlight .comment {
    color: #586e75 !important;
    }
    .highlight .cdata {
    color: #cb4b16 !important;
    }
    .highlight .doctype {
    color: #268be2 !important;
    }
    .highlight .pi {
    color: #268be2 !important; /* orchid -> blue */
    }
    .highlight .entity {
    color: #b58900 !important; /* violet -> yellow */
    }
    .highlight .attribute-name {
    color: #93a1a1 !important;
    }
    .highlight .attribute-value {
    color: #2aa198 !important;
    text-shadow: 1px 1px 2px black;
    }
    .highlight .markupdeclaration {
    color: #859900 !important;
    }
    .highlight .error,
    .highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
    .pi, .entity, .attribute-name, .attribute-value) {
    color: #002b36 !important;
    background-color: #dc322f !important;
    }
    }