Bug 1035536 and about:neterror

Discuss application theming and theme development.
Post Reply
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Bug 1035536 and about:neterror

Post by mcdavis »

I just wanted to write up what I had to do to deal with recent changes in about:neterror CSS and Bug 1035536. The good news is that about:neterror DOM in unchanged for Fx31 through Fx35. The bad news is that I have to use a different method to get CSS on there for four out of those five versions (although maybe something simpler will come to me after I step away from it for a while). The good news is that it's possible to get the same styling across all five versions.

Here's my write-up.

Code: Select all

Bug 1035536 - New error pages are unable to be styled by 3rd party complete themes

patch:
- (2014-09-05) (Fx35) https://hg.mozilla.org/mozilla-central/rev/61d42bd6aa43
- (2014-09-05) (Fx35) https://hg.mozilla.org/mozilla-central/rev/4d52d359af70
- (2014-09-08) (Fx34) https://hg.mozilla.org/releases/mozilla-aurora/rev/25da1c334a23
- (2014-09-08) (Fx33) https://hg.mozilla.org/releases/mozilla-beta/rev/f9e4f36ba116

outcome:
- platform: fx33 and up, all desktop
- in general, this bug is about fixing a hard-to-theme approach taken in prior bugs
- the effect is to restore theme-ability for about:neterror for fx33 through fx35
- note: the patch for fx35 is different from the ones for fx34 and fx33
  - the approach is different too
- for fx33 and fx34, adds a new blank file at chrome://browser/skin/aboutNetError.css and makes about:neterror load it
  - that file is just for us themers
- for fx35, moves in-content assets and CSS back into skin packages as they should have been
  - such that chrome://browser/skin/aboutNetError.css is no longer empty, now having the rules that were in content CSS
- several other CSS file use and rule changes, detailed below
- related bugs:
  - (2014-05-09) (Fx32) Bug 982347 - Implement new visual style for network error pages
  - (2014-08-15) (Fx34) Bug 989469 - Use InContent prefs styling for add-on manager
  - (2014-08-26) (Fx34) Bug 1009370 - Implement new visual style for private browsing mode in-content page
- DOM change: no
- CSS change: yes, see below
- DONE Q: is docshell/resources/content/netError.xhtml the source for the trad one in toolkit? A: yes and still is

- summary of changes in about:neterror DOM, fx31 through fx35

  - between Fx31 and Fx32: none, the DOM is the same (other than a single string change, and there's still the CSS inclusion change)
  - between Fx32 and Fx33: none, the DOM is the same (there's still the CSS inclusion change)
  - between Fx33 and Fx34: none, the DOM is the same
  - between Fx34 and Fx35: none, the DOM is the same (there's still the CSS inclusion change)
  - so: the DOM is the same, fx31 to fx35, as of 10/24/2014

- summary of about:neterror xhtml urls:

    - does it have chrome override? (compare vers in winmerge, search for neterror inside files)
    - where is the source file? (scan for netError in filenames, there should be only one)

    - in fx31

        - chrome address:       chrome://global/content/netError.xhtml
        - source:               docshell/resources/content/netError.xhtml

    - in fx32 CHECKED

        - adds chrome manifest override such that chrome://global/content/netError.xhtml is actually loaded from chrome://browser/content/aboutneterror/netError.xhtml
        - new file chrome://browser/content/aboutneterror/netError.xhtml
        - old file chrome://global/content/netError.xhtml still exists but overridden

        - chrome address:       chrome://global/content/netError.xhtml
        - source:               browser/base/content/aboutneterror/netError.xhtml
        - alt chrome address:   chrome://browser/content/aboutneterror/netError.xhtml
        - overridden source:    docshell/resources/content/netError.xhtml

    - in fx33 CHECKED

        - still using chrome manifest override

        - chrome address:       chrome://global/content/netError.xhtml
        - source:               browser/base/content/aboutneterror/netError.xhtml
        - alt chrome address:   chrome://browser/content/aboutneterror/netError.xhtml
        - overridden source:    docshell/resources/content/netError.xhtml

    - in fx34 CHECKED

        - still using chrome manifest override

        - chrome address:       chrome://global/content/netError.xhtml
        - source:               browser/base/content/aboutneterror/netError.xhtml
        - alt chrome address:   chrome://browser/content/aboutneterror/netError.xhtml
        - overridden source:    docshell/resources/content/netError.xhtml

    - in fx35 CHECKED

        - moves source file from content/aboutneterror/aboutNetError.xhtml to just content/aboutNetError.xhtml
        - still using chrome manifest override

        - chrome address:       chrome://global/content/netError.xhtml
        - source:               browser/base/content/aboutNetError.xhtml
        - alt chrome address:   chrome://browser/content/aboutNetError.xhtml
        - overridden source:    docshell/resources/content/netError.xhtml

- summary of existence of about:neterror-related CSS files in firefox with the default theme:
  - NB that this is speaking about whether the file exists at all, and not about whether it's used in about:neterror

    filename                                                fx31    fx32    fx33    fx34    fx35    Notes
    chrome://browser/content/aboutneterror/netError.css     n       YES     YES     YES     n       Added in Bug 982347; deleted in Bug 1035536 (this bug)
    chrome://global/skin/netError.css                       YES     YES[1]  YES[1]  YES[1]  YES[1]  Old as the hills
    chrome://browser/skin/in-content/common.css             n       YES     YES     n       n       Added in Bug 982347; deleted in Bug 989469
    chrome://global/skin/in-content/common.css              n       n       n       YES     YES     Added in Bug 989469
    chrome://browser/skin/aboutNetError.css                 n       n       YES     YES     YES     Added in Bug 1035536 (this bug)

    [1] present (but not used?)

- summary of changes in chrome://browser/content/aboutneterror/netError.css between Fx32, Fx33, and Fx34

  - status:
    - this file only exists for Fx32, Fx33, and Fx34
    - added for Fx32 in Bug 982347 - Implement new visual style for network error pages
    - removed in the Fx35 part of Bug 1035536 (this bug)
  - changes between Fx32 and Fx33: none, it's identical
  - changes between Fx33 and Fx34:
    1 - @imports in-content/common.css from chrome://global/skin rather than from chrome://browser/skin
    2 - #errorTryAgain gains min-width: 150px
    3 - @media (max-width: 675px) rule for #errorTitle is instead set on #errorTitleText
        - padding-top, background-image, -moz-padding-start, and -moz-margin-start
    4 - removes rule setting font-size and min-width on button
        - because of changes in the included common.css

- summary of CSS files used by about:neterror, by firefox version, with the default theme:

    - in fx31 (untouched by this bug):

        - about:neterror directly links in chrome://global/skin/netError.css

    - in fx32 (untouched by this bug):

        - about:neterror directly links in chrome://browser/content/aboutneterror/netError.css
          - which @imports chrome://browser/skin/in-content/common.css
        - NNL approach:
          - have chrome://browser/skin/in-content/common.css in-theme
            - and NNL has it @import chrome://global/skin/netError.css
            - and to which NNL adds a couple rules
          - chrome://browser/skin/aboutNetError.css does not exist for fx32, so we can't use that

    - in fx33, after this bug:

        - about:neterror directly links in chrome://browser/content/aboutneterror/netError.css
          - which @imports chrome://browser/skin/in-content/common.css
        - about:neterror ALSO directly links in chrome://browser/skin/aboutNetError.css
          - a new empty in-theme file, added in this bug
        - NNL approach:
          - have chrome://global/skin/netError.css because fx31 uses it
          - have chrome://browser/skin/in-content/common.css for fx32 because that's how we get CSS in about:neterror
          - have chrome://global/skin/in-content/common.css for fx34 and fx35+ because that's how we get CSS in about:privatebrowsing
          - have aboutNetError.css because fx34 and fx35 use it
          - meaning for fx33 only, our about:neterror rules will be applied twice
            - once from netError.css and once from aboutNetError.css
            - not an issue for either past or future fx versions

    - in fx34, after this bug:

        - deletes chrome://browser/skin/in-content/common.css; this file no longer exists
        - about:neterror directly links in chrome://browser/content/aboutneterror/netError.css
          - which @imports chrome://global/skin/in-content/common.css
            - note that this is now in global rather than browser, as of fx34
        - about:neterror ALSO directly links in chrome://browser/skin/aboutNetError.css
          - a new empty in-theme file, added in this bug
        - NNL approach:
          - code goes in NNL's chrome://browser/skin/aboutNetError.css
            - by @importing our netError.css
            - and code which overrides content CSS settings
          - we don't use chrome://global/skin/in-content/common.css to apply about:neterror rules any more

    - in fx35, after this bug:

        - about:neterror directly links in chrome://browser/skin/aboutNetError.css
          - and only this file; no longer uses chrome://browser/content/aboutneterror/netError.css
        - NNL approach:
          - code goes in NNL's chrome://browser/skin/aboutNetError.css
            - by @importing our netError.css
            - and code which overrides content CSS settings
          - we don't use chrome://global/skin/in-content/common.css to apply about:neterror rules any more

NNL impact:
- in conclusion, our approach:
  - have chrome://global/skin/netError.css
    - because fx31 uses it
    - because still present in fx32+ (even though apparently unused)
  - have chrome://browser/skin/in-content/common.css
    - and have it @import chrome://global/skin/netError.css
    - because that's how we get CSS in about:neterror for fx32 and fx33
      - and it's the only way to do it for fx32
    - no longer used at all as of fx34
  - have chrome://global/skin/in-content/common.css for fx34 and fx35+
    - because that's how we get CSS in about:privatebrowsing and other things
    - do not have it @import netError.css
  - have chrome://browser/skin/aboutNetError.css
    - with our neterror rules in it, by @importing netError.css
    - because fx34 and fx35 use it
    - because that's the only way to style about:neterror for fx34 and up
  - this means that for fx33 only, we'll have neterror rules applied twice
    - once from browser/in-content/common.css @importing netError.css
    - once from from aboutNetError.css, which also @imports netError.css
    - but we'll live with that for just that one version
    - because it's simpler than adding yet another appver-specific file
      - although we may need to anyway in the future, the way this is going; still, trying to go without
    - and it'll become a non-problem when we drop fx33
  - regarding the changes in chrome://browser/content/aboutneterror/netError.css:
    - since this content file has styling in it, we need to override those in theme CSS
    - nothing needed for fx31 since chrome://browser/content/aboutneterror/netError.css doesn't exist yet
    - for fx32 and fx33, add NNL styling overrides in chrome://browser/skin/in-content/common.css
    - for fx34, add NNL styling overrides in chrome://browser/skin/aboutNetError.css
    - nothing needed for fx35 since content CSS no longer an issue (the content CSS file is gone)

- revisit:
  - when dropping fx33 and down, can get rid of chrome://browser/skin/in-content/common.css as no longer needed
  - when dropping fx34 and down, can remove from chrome://browser/skin/aboutNetError.css the rules overriding content CSS (since there is no content CSS as of fx35)
- DONE
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
ShareBird
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil
Contact:

Re: Bug 1035536 and about:neterror

Post by ShareBird »

That said, we have been intentionally de-prioritizing support for 3rd party themes, as there's just so few people using them (and the experience of using them is sub-par).

"If you repeat a lie often enough, it becomes the truth."
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.
Post Reply