How do you prevent Firefox extensions from modifying the page? - firefox

We have a page with a rich text editor. If the content being edited contains an image and the user is using Firefox and they have the Pinterest browser button installed, then the following HTML gets added to the end of the rich text content in the editor. You can see it in there using the Source button in the editor's toolbar and when the form is submitted, the added HTML gets included with it and sent to the server.
<p><span style="border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px/20px "Helvetica Neue",Helvetica,sans-serif; color: rgb(255, 255, 255); background: rgb(189, 8, 28) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+PHBhdGggZD0iTTE0LjczMywxLjY4NiBDNy41MTYsMS42ODYgMS42NjUsNy40OTUgMS42NjUsMTQuNjYyIEMxLjY2NSwyMC4xNTkgNS4xMDksMjQuODU0IDkuOTcsMjYuNzQ0IEM5Ljg1NiwyNS43MTggOS43NTMsMjQuMTQzIDEwLjAxNiwyMy4wMjIgQzEwLjI1MywyMi4wMSAxMS41NDgsMTYuNTcyIDExLjU0OCwxNi41NzIgQzExLjU0OCwxNi41NzIgMTEuMTU3LDE1Ljc5NSAxMS4xNTcsMTQuNjQ2IEMxMS4xNTcsMTIuODQyIDEyLjIxMSwxMS40OTUgMTMuNTIyLDExLjQ5NSBDMTQuNjM3LDExLjQ5NSAxNS4xNzUsMTIuMzI2IDE1LjE3NSwxMy4zMjMgQzE1LjE3NSwxNC40MzYgMTQuNDYyLDE2LjEgMTQuMDkzLDE3LjY0MyBDMTMuNzg1LDE4LjkzNSAxNC43NDUsMTkuOTg4IDE2LjAyOCwxOS45ODggQzE4LjM1MSwxOS45ODggMjAuMTM2LDE3LjU1NiAyMC4xMzYsMTQuMDQ2IEMyMC4xMzYsMTAuOTM5IDE3Ljg4OCw4Ljc2NyAxNC42NzgsOC43NjcgQzEwLjk1OSw4Ljc2NyA4Ljc3NywxMS41MzYgOC43NzcsMTQuMzk4IEM4Ljc3NywxNS41MTMgOS4yMSwxNi43MDkgOS43NDksMTcuMzU5IEM5Ljg1NiwxNy40ODggOS44NzIsMTcuNiA5Ljg0LDE3LjczMSBDOS43NDEsMTguMTQxIDkuNTIsMTkuMDIzIDkuNDc3LDE5LjIwMyBDOS40MiwxOS40NCA5LjI4OCwxOS40OTEgOS4wNCwxOS4zNzYgQzcuNDA4LDE4LjYyMiA2LjM4NywxNi4yNTIgNi4zODcsMTQuMzQ5IEM2LjM4NywxMC4yNTYgOS4zODMsNi40OTcgMTUuMDIyLDYuNDk3IEMxOS41NTUsNi40OTcgMjMuMDc4LDkuNzA1IDIzLjA3OCwxMy45OTEgQzIzLjA3OCwxOC40NjMgMjAuMjM5LDIyLjA2MiAxNi4yOTcsMjIuMDYyIEMxNC45NzMsMjIuMDYyIDEzLjcyOCwyMS4zNzkgMTMuMzAyLDIwLjU3MiBDMTMuMzAyLDIwLjU3MiAxMi42NDcsMjMuMDUgMTIuNDg4LDIzLjY1NyBDMTIuMTkzLDI0Ljc4NCAxMS4zOTYsMjYuMTk2IDEwLjg2MywyNy4wNTggQzEyLjA4NiwyNy40MzQgMTMuMzg2LDI3LjYzNyAxNC43MzMsMjcuNjM3IEMyMS45NSwyNy42MzcgMjcuODAxLDIxLjgyOCAyNy44MDEsMTQuNjYyIEMyNy44MDEsNy40OTUgMjEuOTUsMS42ODYgMTQuNzMzLDEuNjg2IiBmaWxsPSIjYmQwODFjIj48L3BhdGg+PC9nPjwvc3ZnPg==") no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 0.85; z-index: 8675309; display: none; cursor: pointer; border: medium none; top: 520px; left: 1368px;">Save</span></p>
The embedded background image is the pinterest icon. This happens on both Windows and Mac, but only in Firefox. Does not happen in Chrome or Safari. I was unable to test IE11 because the button failed to install.
Is there a way to prevent plugins from modifying rich text editor content? Or, is there a way to tell the pinterest plugin specifically to stay out of the editor or even just the page?

The short answer is that you can't prevent a Firefox add-on from modifying your webpage, if the extension desires to do so. Firefox add-ons run with the privileges of the browser. Thus, they can have complete control over what is displayed, how it is displayed, or even if your page is displayed at all. Your question is, at its essence, the same as "Can I prevent the Firefox browser from displaying my page the way that Firefox wants to display it?"
You have to work with the fact that it is going to do whatever it is choosing to do. If you desire your website to work with the Firefox browser with this extension installed you must work around whatever it is that the extension is doing to your website.
There are a variety of possible strategies (not an all-inclusive list):
Contact Pinerest and inform them of the problem. It sounds like the add-on is causing harm to your website. This is probably not intentional. Have them file a bug. If it is affecting your site, it is probably
affecting others.
Have your server detect the additional HTML code in the input and just automatically remove it.
Experiment with different HTML structures for your webpage to try to find one that results in the extension putting the code somewhere it does not get included in the data sent to your server.
If it was me, I would take a good look at the source code for the Pinterest add-on. Like most Firefox add-ons, it is plain JavaScript. You should be able to determine the criteria that it is using to choose where to put the HTML code it is inserting. Once you know that, it should be reasonably easy to design your page such that the add-on does not interfere with something you care about. To save you a bit of searching, the URL for the add-on is, currently, here. You should use "Save Link As" to save that .xpi file to somewhere. Then change the .xpi file extension to .zip. You should then be able to extract all the files for the add-on from the package. It is a normal bootstrapped add-on.

Related

SCSS changes display: flex; to display: grid;

I am making an internal website for a company.
We have to use Internet explorer.
I am using SCSS to make this work.
This works well in most cases except when I want to use flexbox
SCSS changes
.container{
display: flex;
}
to
.container{
display: grid;
}
How can I tell it to stop that?
Which version of internet explorer are you using?
Internet Explorer 6-9 do not support flexbox at all.
Internet Explorer 10 supports 2012 syntax for flexbox. So to get this to work cross browser for IE11 and other browsers you could do something like:
.container {
display: flex;
display: flexbox;
}
Browsers that do not support the 2012 syntax should ignore the 'flexbox' value however if IE10 encounters it, it should use that.
Internet Explorer 11 supports the current way of using flexbox. So if you are using IE11 and encountering this issue I would double check that your CSS isn't getting overridden unexpectedly.
EDIT
Just saw that you had tagged this as IE11 - I would double check that your values aren't being overriden somewhere. Flex is known to be buggy with IE11 but I can't imagine it would choose to switch to grid unless it was getting that value from a CSS file.

Increase code font size in firefox developer tool

How to increase code fonts in Firefox developer tools?
I know that there is a zoom function but I want to set the font size only for the code.
Open Firefox Developer Tools
Click anywhere within Firefox Developer Tools
Press Ctrl++ on Unix/Win or Cmd++ on Mac
To be clear, I mean the + key. You don't need to hold the Shift key while doing it.
Maybe an easier way will be to open about:config and set
devtools.toolbox.zoomValue to bigger value.
You need to modify userChrome.css under ~/.mozilla/firefox/[profile-name]/chrome with this:
/* Styles for Web developer tools */
#namespace url(http://www.w3.org/1999/xhtml);
.CodeMirror {
font-family: "Ubuntu Mono", monospace !important;
font-size: 15pt !important;
}
The result looks like this:
This only changes the debugger and style editor. There's a different selector for the html inspector. Not sure what that is yet.
Open Firefox and type about:support. In Application Basics section chose Profile Folder - Open Folder. It will fire your file manager. If there is no chrome folder than create it. After that go to this chrome folder and create an userChrome.css file, open it in a text editor and add :
.devtools-monospace {font-size: 12px!important;}
Save. Be sure to restart Firefox.
UPDATE: One thing bothered me - while typing in the devtools console the text actually a bit smaller than on output (after pressing Enter). In order to make it the same we need to change font-size for its corresponding css class too. I don't know its class name yet so I just set
* { font-size: 12px !important; } globally and it works.
So sure, as stated before, the short answer is cmd++.
But the + sign might not be directly accessible on your keyboard (no numeric key pad, laptop, strange layout).
You then have to press maj first to access the + sign, like, for example on the american keyboard layout: maj+=.
Unfortunately, even if you are correctly focused on the dev tool pane, cmd+maj+= increases the font of the web view pane, while cmd+- decreases the font on the dev tool pane.
And you end-up with a web tool pane with a font size so small that it is unreadable, and no way to increase it.
Then #Thal's answer comes handy, once focused to the dev tool pane cmd+0 resets the dev tool's font size to the original.
If you want to answer the question like #Timothy_Truckle is asking for, here are a couple of them (still focus on the dev tool pane, of course):
switch to the US keyboard layout and press cmd+=
find a keyboard layout with the + directly accessible, switch to it, and press cmd++
That's for you guys wondering why some find it hard to simply press cmd++ or why some find it hard to focus on the dev tool pane (because they actually focus on the dev tool pane, but the result is as if they were focused on the web view pane).
You can specify a style for the devtools-monospace class selector. To do so, edit userChrome.css in your mozilla profile's chrome directory, and specify the CSS properties you want. For example:
.devtools-monospace {
font-family: "Source Code Pro",monospace !important;
font-size: 16px !important;
}
The userChrome.css needs to be in the chrome folder of your Firefox profile. If the folder don't exist, create it. Your userChrome.css will then override the CSS from Firefox dev tools after you restart the browser.
To find your profile in Windows OS type: Strg + R and then enter:
%APPDATA%\Mozilla\Firefox\Profiles\
Some elements of Firefox can be styled in the userChrome.css file situated in your Firefox profile's chrome folder.
As of 2018, modify/create ~/.mozilla/firefox/[profile-name]/chrome/userChrome.css with something similar to:
#-moz-document url-prefix("chrome://devtools/content/") {
* { font-size: 13px !important; }
}
Then restart Firefox.
The solution on the Mozilla forums almost has it right: https://support.mozilla.org/en-US/questions/1198481
Using Ctrl+= or Cmd+= was not ideal for me since it increased fonts for all the elements of the window, including the tab names.
Using .devtools-monospace { font-size: 13px !important;} was almost ok, but it did not affect the Debugger and Network tabs.
Using #bohag_bihu's solution had side effects for the address bar and some other text inputs.
I accidentally had my firefox developer window resized to the minimum (couldn't even read it anymore), "CMD +" (mac) didn't work for me, well only for the main web page even if the console was focused, I just hit: "CMD 0" and it came back to normal, if it can be a good alternative to anyone else ;)
As John said, the way to increase the font-size in the devtools is to use ctrl/cmd+, just like you would on a web page. In fact the devtools is a webpage. You just need to make sure that the devtools frame is focused first.
I'm afraid there's no way to only increase the font-size for the code right now.
For certain Mozilla versions (I was testing on Mozilla SeaMonkey equivalent to Mozilla Firefox 52 ESR), an explicitly set root element is required.
This will work:
#namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#namespace html url("http://www.w3.org/1999/xhtml");
while this won't:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#namespace html url("http://www.w3.org/1999/xhtml");
Once #namespace rules have been set,
you only need to add selectors and styles:
.devtools-monospace,
.CodeMirror,
.CodeMirror pre {
font-family: "Courier New", monospace !important;
font-size: 10pt !important;
}
This one works on FF => 68.0 Linux with userChrome.css. Inspector tools are now using CSS variables and the inspector tree itself is loaded in an iframe so none of the tweaks actually worked esp. with .CodeMirror classes.
You can find all the variables in this file (just copy paste below URL in FF to view source)
resource://devtools/client/themes/variables.css
For the userChrome.css part here's what solved it for me.
/* #namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); */
:root {
/* Text sizes */
--theme-code-font-size: 13px !important;
}
If userChrome.css is not loaded create userContent.css and add the same rulesets. Tried and tested on FF Mac/Linux 89

How to remove box/arrow next to image in web browser?

How can I get rid of the little box/arrow next to images in my web browser? What controls when they show up and when they don't? I'm porting a blog from WordPress over to BlogEngine.NET. Those little arrows aren't in the WordPress blog, but they're showing up in the posts in BlogEngine.NET. I'm viewing both in Chrome. They also show up in IE and Firefox, but not in Safari.
UPDATE:
Here are some live links (I'm viewing in Chrome):
WordPress (no arrow): http://www.inrixtraffic.com/blog/2012/neverlate-inrix-traffic-contest/
BlogEngine.NET (arrow): http://www.inrix.com/traffic/blog/post/2012/06/18/NeverLate-INRIX-Traffic-Contest
That is coming from the CSS, specifically this selector:
div.post .text a[href^="http:"] {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
According to my inspector (built into Chrome, right click, inspect element), that is coming from http://www.inrix.com/traffic/blog/themes/Inrix/style.css, line 372. Ditch the "background" line from that file, or override it in a later css file, and you will be golden.

border-radius and IE 7 and IE8

I am applying border-radius on my layout and I having problems with IE 7 and IE8. I'm using the PIE.htc but I still can not do the compatibility works.
The code is:
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 0;
-moz-border-top-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
behavior: url(PIE.htc);
I'm testing in ieTester, can anyone help me?
if you use behavior: url(PIE.htc); then your Pie.htc should be in the same folder as your html page or master page.
your page's doctype should be XHTML or HTML5.
then my experience says its better to place the behavior code on top your css rule.
you better not use IE Tester as a trustful utility. It came up with a hand full of tools but not quite useful ones. its better to use IE 9, then change its browser and document mode in its developer tools. when you change them the whole page will reload in that mode. it even has quirk mode which is a complete total NIGHTMARE.
And if you can update your question with more facts about your code and browser.

My CSS images are not working on Windows Azure

I have a really strange situation where the CSS images are not displayed after the site is deployed to Windows Azure.
The images are part of the project (all the files and sub-folder are included in the project)
All images have a build action of Content
I'm not using relative path, always use absolute path on my views /content/path/to/images, but on CSS there is relative path url(../img/image.png) but this should not be a problem.
Static files are OK (CSS and Javascript work correctly), except for the images not showing up.
I deployed using git, but even with the Publishing Wizard I get the same result.
The images are there if I request them with the full path. This is "unreal" ;)
I'm must be neglecting a key thing here, but can't find it.
Thanks for your time.
Edit:
The image work via the img tag. So only the CSS images, which make no sense, they are working correctly locally.
I guess I can share the link, so you can see this thing live ;)
http://receivably.azurewebsites.net
Look at the top left logo, nothing appear, here is the HTML and CSS (this was working well a couple of deplyment ago, and work fine locally.
<a class="brand" href="/">name</a>
In the CSS:
.navbar .brand {
display: block;
width: 180px;
height: 34px;
padding-top: 0;
padding-bottom: 0;
margin-top: 2px;
margin-left: 10px;
overflow: hidden;
font-size: 18px;
line-height: 600px;
color: #333;
background: url(../img/logo.png) no-repeat 0 0;
}
And if we request the file directly it's there: http://receivably.azurewebsites.net/content/site/img/logo.png
The CSS file is placed in /content/site/css and images on /content/site/img.
May I add that I'm now unable to git push. Only the publishing wizard work. I've having LOTS of problem with that website on Azure, my other 3 app work flawlessly.
I think your css bundler is breaking things.
Here's what I see in your bundled CSS from the homepage (I've de-minified it a bit):
.brand
{
display:block;width:180px;height:34px;padding-top:0;padding-bottom:0;margin-top:2px;
margin-left:10px;overflow:hidden;font-size:18px;line-height:600px;color:#333;
background:url(../img/logo.png) no-repeat 0 0
}
Notice:
background:url(../img/logo.png) which may not be correct from the CSS which is executing from /bundles/
It should say:
../content/site/img/logo.png
Or as you said /content/site/img/logo.png
This would explain why it works locally (non bundled) and even in prior deployments -- because bundling related code may have changed recently. This is a classic release-time issue and it's one reason why turning on bundling full time (not just in Release mode) is wise, even though it takes an extra 0.500 seconds at Compile time. :-)
Hope that helps.

Resources