In the Firefox developer tools rules view the selectors are pink. Sometimes there grayed out selectors together with the pink ones. What do they do?
In my experience, the greyed out html elements are those with display: none;
If a rule has multiple selectors, the ones that apply to the selected element are brighter (for me, green; but apparently for you, pink) and the ones that do not apply to the selected element are dimmed.
Related
Is it possible to change columns width in Firefox Developer Tools? How can I do it?
When I point over column edge (like Status, etc. on the screenshot) there's no resize tool so I can see whole content.
Update: This feature is now available and enabled by default in Firefox 67. You can disable it (are you crazy?) using devtools.netmonitor.features.resizeColumns flag.
Original answer: As you probably know there is no option to change the column(s) size (as of FF57), the only option you have is hide/show columns. it's easy to do, just right-click on any column, you should see the list of columns and can select/un-select them.
But that's it?! no, you can change the column(s) size using CSS (hack the dev tools), here is the steps:
Open up the dev tools (using F12 or ...)
Click on the gear button, up right corner Go to Settings, shortcut: F1
Check this 2 options:
Enable browser chrome and add-on debugging toolboxes
Enable remote debugging
Hit Ctrl+Shift+Alt+I and Click OK (on security prompt) to open Browser Toolbox
You should be able to inspect the Dev tools using opened Browser Toolbox
Play with CSS (same as you do with normal web page)
Save your custom CSS in userChrome.css file
Need more info about userChrome.css, head to userchrome.org
Here is steps to create/modify userChrome.css:
Open up about:support
Click on Open Folder (in Profile Folder row)
Open/Create chrome directory
Open/Create userChrome.css file
Do what I said in first section
To demonstrate how it works, I change the background color of one of Network tab's columns to red.
And here is my userChrome.css file content (for above example)
.requests-list-file.requests-list-column {
background-color: red !important;
color: #fff !important;
}
I used !important just for time's sake, don't use of that if you can
While there seems to be some recent progress on the feature request and its dependency, the latter was created in 2016 so it's fairly safe to assume it could be a while yet before Firefox supports column resizing by default.
In the meantime, here's the CSS I've added to my userChrome.css:
.requests-list-header-button {
padding-inline-start: 0px !important;
padding-inline-end: 0px !important;
}
.requests-list-method {
min-width: 30px !important;
}
.requests-list-status {
min-width: 40px !important;
}
.requests-list-file {
min-width: 100px !important;
}
I wanted to enlarge the File column, but found that reducing the width of the Status and Method columns instead made a big improvement alone. The styles also remove side padding from the column headers to avoid the text being truncated with ….
These are the classes for the default columns:
requests-list-status
requests-list-method
requests-list-file
requests-list-domain
requests-list-cause
requests-list-type
requests-list-transferred
requests-list-size
requests-list-waterfall
Note that if you reduce column widths too much, it may throw off the alignment. See Mehdi's answer if you don't know where to save your userChrome.css or you need to find classes of other columns.
I've created a textarea element, and applied a style of text-align: center; to it. Now, whenever I type something and then press enter to go to a new line, the text on the previous line will be bumped over the left a little. Why is this happening? I've tested this in Firefox, and the problem is not present. It is present in Internet Explorer 8 and 9. Any ideas?
SOLVED: I found that adding a css style of white-space: pre; to the text area fixes the problem.
I got this problem with Firefox and input elements.
JsFiddle
In this menu, if you navigate to "Strumenti" -> "Colonne" -> "Prova6", you will see a table inside a li with two inputs and one combobox.
The inputs seems to be disabled but only with Firefox: with Chrome or IE it's all working as expected.
Any ideas?
After a deep search, I finally found the problem:
$( ".sortable" ).disableSelection();
This line, included in this jqueryUI demo, disable the input in FF.
JsFiddle of the solution
There is also this css -moz-user-select: none; that I personally wrote for disable selection over the text of my menu that cause a wired behavior, alwasys in FF: I will delete it for my solution.
I am not able to make the rich text editor from YUI 2 (see http://developer.yahoo.com/yui/editor/) works in Firefox
My project--> A forum
Here are images of what's happening:
In IE with no comment:
http://imageshack.us/photo/my-images/39/ienocomment.jpg/
In IE with comment:
http://imageshack.us/photo/my-images/13/iecomment.jpg/
In Firefox with comment:
http://imageshack.us/photo/my-images/217/firefoxcomment.jpg/
The bug happens here:
In Firefox with no comment:
http://imageshack.us/photo/my-images/444/firefoxnocomment.jpg/
For some reason, the UI shows X X X X X and the top bar is buggy...I have NO idea why it would do that in Firefox when there is no answer for the question..
To workaround this, I tried to download YUI 3 Editor, but I can't seem to be able to add the toolbar proprieties correctly. All I want is a workable text area to put things in bold, specify colors, etc (basic stuff). If you can provide me an editor that will do that, i would be very happy.
If you need other information, let me know, thanks.
Here is the code:
http://pastebin.com/yiEiYH2V
The default margin is specified for Firefox as:
$(".test_div").css("margin-top","5px");
This is revealing the xxxx toolbar placeholder labels which are hidden otherwise. Adding a comment suppresses the margin due to collapsing margins.
Here is my scenario. I like my color scheme. I have a dark blue background with light grey text. I have the Plain Text option in VS 2010 in Tools | Options | Environment | Fonts and Colors set to be a dark grey for the foreground and dark blue for the background:
alt text http://www.elbalazo.net/post/vs_plaintext_color.jpg
But I need to fix this major problem/annoyance which is when I highlight some text and then lost focus with my mouse it turns almost completely white!
alt text http://www.elbalazo.net/post/WhiteBackgroundVS2.jpg
And worse, when I mouse over the little section lines of code on the left, the selection of the entire editor goes white with a light grey foreground for text:
alt text http://www.elbalazo.net/post/WhiteBackgoundVS.jpg
Not able to figure out where and how to fix this. I don't see a way. Note: I'm using R# 5.0+ so I don't know if that has anything to do with this color issue or what...maybe it's overriding some VS stuff or this is just a VS issue I don't know..probably just not looking in the right area under Fonts and colors...but a lot of the item foreground elements are read only.
UPDATED:
I think it might be (not sure) this one but I can't test it as the foreground is locked and not editable:
alt text http://www.elbalazo.net/post/vs_brachmatching_color.jpg
I'm pretty sure your first problem can be solved by setting the colors on the 'Highlighted Reference' option in the Fonts and Colors window. If ReSharper is override this setting I couldn't tell you. I don't have it installed on this machine. As for your second problem I have no idea.
If you get too irritated at trying to figure out the color options you could also try Studio Styles for pre-made ones. I believe that is where I got the one I use currently.
I believe the setting you are looking for is "Inactive Selected Text". Found while trying to figure out why my selected search texts were not highlighted in an obvious manner.
Might be a year late... answering for future searches.
ReSharper is indeed overriding some of your settings, but those settings can be found in the same screen, towards the bottom of the listbox.
In Tools | Options | Environment | Fonts and Colors, scroll to the bottom of the 'Display Items:' listbox, and you should see a series of settings that start with ReSharper. For instance, the 'ReSharper Current Line Highlight` was causing me issues when I changed my theme to use a dark background.
Hope that helps.
The highlight for matching references is the "Highlighted Reference" background color (as Sean Copenhaver pointed out).
The highlight for the outlining region hover is "Collapsed Region" (as Brandon Satrom pointed out in his comment on the original question). The foreground color is the color used in the outlining margin and the background color is the color used under the text. You can also disable that highlight by disabling Tools->Options->Environment->General->Enable rich client visual experience, though that will disable other things (animations, gradients, etc.)
The brace matching rectangle is the highlight that appears when you insert or put the caret on a brace (e.g. ")", "]", "}"). It only lets you override the background color because you can't use it to change the foreground (text) color.
I had this same problem (much later) with VS 2010 and R# 7.1.
Disable the "Highlight current line" option in ReSharper > Options > Environment > Editor.
That option, when enabled, causes the VS 2010 color options for Highlighted Reference to not apply.
FWIW I had this problem without ReSharper and in my case tracked it down to the Brace Matching (Rectangle) color setting which looked nothing like what I was seeing in the editor but allowed me to fix the issue anyway.
So this is weird but I was having the same problem and it simply went away when I went to Tools->Options->Environment->Fonts and Colors and changed the font size to 18. I then went back in the same menu and changes it back to 10 (default) and the editor no longer highlights the collapsible regions white. Strange behavior.