Click the image to get the full pic, everything is there. It doesn't fits fully in my browser window!
Are you able to get a window frame similar to what I posted, titled "Blockable items on current page"? If not Click the ABP Icon that I have encircled...
Now from the roots to the twigs:
Suppose you want to fetch a page, lets say: https://candorz.asp.net/something.aspx
So how would the browser work? We wont be getting into n/w details so I will skip some unneeded items...
1. It will GET /something.aspx from candorz.asp.net using HTTPS, ok?
The server will return the page's HTML, say like:
CandorZ Demo Example
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="http://candorz.asp.net/StyleSheetNew.css" rel="stylesheet" type="text/css" />
<form name="form1" method="post" action="Default44.aspx" id="form1">
<img src="CandorZ.jpg" />
Now the browser after getting this HTML, will search for all the CSS/JS/IMG files in it
For each file it will make a request to the webserver again. For the above example they can be:
2. It will GET /StyleSheet.css from candorz.asp.net using HTTPS
3. It will GET /StyleSheetNew.css from candorz.asp.net using HTTP
4. It will GET /JScript.js from candorz.asp.net using HTTP
5. It will GET /CandorZ.jpg from candorz.asp.net using HTTPS
So total 5 requests will be made to render the above URL
IE/FF/... will recognize that (3) and (4) are loaded with HTTP for an HTTPS URL so it will show you a warning!
How ABP helps?
It shows you the protocol that is loading the element. I have highlighted the protocol in the "Blockable items on current page" frame's Address. From that you can easily identify which elements are loaded over HTTP only...
Hope this clears out!