0

Is there a way to customize the screen background in Firefox "Responsive Design View"? I would like to insert an image (for instance a blank iphone template) and use screen recording software to simulate a mobile demo. So far as I could tell there is no way to change the background, either via css or other addons.

I looked at Firefox OS simulator, but it doesn't cover my needs (and you can't use addons like firebug or Agent Spoofer).

Change the black background....

pkExec
  • 1,752
  • 1
  • 20
  • 39
  • In the latest update (84.0) this seems to use the browser's background colour. (I'm not sure anymore whether I used a stylesheet, a setting in about:config, a regular setting, an extension or something else to set my background colour, because I did so many things, but I wanted to at least leave this bit of knowledge here.) – Fabian Röling Dec 18 '20 at 02:33

1 Answers1

2

Without knowing what you have tried, we have to guess at what you need to answer this question. Do you just need to know what the selectors are? Do you need to be informed as to how to apply the CSS? Are you trying to make an add-on that makes such modifications?

Without more information, here is some general information about the CSS used to style this:

Responsive mode is styled with the CSS in chrome://browser/content/browser.css and chrome://browser/skin/browser.css. Both of these are located within the omni.ja (zip archive with filename extension changed to .ja) file in the browser directory. Within that archive the above files are chrome/browser/content/browser/browser.css, chrome/browser/skin/classic/browser/browser.css, and chrome/browser/skin/classic/aero/browser/browser.css.

The background appears to be a <vbox> and have class="browserContainer" with the attribute: responsivemode="true".

As of Firefox 36.0.4 the relevant CSS is (from chrome://browser/skin/browser.css):

.browserContainer[responsivemode] {
  background-color: #222;
  padding: 0 20px 20px 20px;
}

There are multiple ways that you could go about making changes to this. One way would be to extract the contents of the omni.ja file, make modifications to the appropriate browser.css file then put all the files back into an archive named omni.ja and put that archive in the browser directory in place of the original file. Another method would be to create an add-on that overrides the chrome://browser/skin/browser.css file (this can be done using the override instruction in the add-on's chrome.manifest file. Yet another method would be for the add-on to directly apply the new style in one of multiple different ways.

However, probably the easiest is to create a [profile directtory]/chrome/userChrome.css file with the CSS you desire to use (you will probably have to create the chrome directory in your profile directory). As an example, the following will result in a red background for the Responsive Design View:

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */
/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */
/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
/* Set default namespace to XUL */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


.browserContainer[responsivemode],
vbox[anonid=browserContainer][responsivemode]{
    background-color:red !important;
}
Makyen
  • 31,849
  • 12
  • 86
  • 121
  • Thank you very much for this information, I had no idea about firefox internals. How did you figure out the element that needed styling was a vbox? Is there a tool that can inspect internal firefox structure (like firebug does for webpages?) – pkExec Mar 28 '15 at 17:11
  • Nevermind, to answer my own comment now that I know what I am looking for: http://stackoverflow.com/questions/6231868/inspecting-firefox-with-firebug – pkExec Mar 28 '15 at 17:20
  • 1
    @pkExec, The tool that is most used to investigate the Firefox internal DOM is [DOM Inspector](https://addons.mozilla.org/En-us/firefox/addon/dom-inspector-6622/). I also like to add [Element Inspector](https://addons.mozilla.org/en-US/firefox/addon/element-inspector/) which allows you to shift-right-click on any element to show it in the DOM Inspector. [Here is a screenshot of what the DOM Inspector looks like](http://i.stack.imgur.com/qafC1.png) – Makyen Mar 28 '15 at 17:24
  • I seocnd DOM Inspector and Element Inspector I use them both as well, without it none of my addons would have been possible – Noitidart Mar 28 '15 at 20:59