Tuesday, October 17th, 2006
DOM Helper: IE Inline CSS Editor
Rhys Jeremiah created DOM Helper, an inline CSS editor for Internet Explorer:
Well I’ve finally got round to producing the inline CSS editor that I wanted to do in the first place. The first stab, was in C++ and although it worked, it was a complete nightmare. It didn’t allow you to alter CSS files that were loaded as “@import”. This new version does, it parses the CSS and adds each individual rule back to the style sheet. Simply replacing the CSSText caused a memory corruption error in MSHTML.
It’s been re-written it in C# using Pavel Zolnikov’s BandObjects. I’ve also added a few extras such as a DOM Explorer and the ability to add plugins to the band object.
While it’s been writting in C# 2.0 there’s not much use of the new version 2 features. Mind I was most satisfied with my first foray into using generics. I didn’t think that there’d be much use for them but I did find a use, albeit slightly contrived.
I wish I had known about this yesterday…would have saved me a bit of headache (copying html source + local testing) for something trivial.
How to get it working in IE7???
The WebDeveloper extension for Firefox has had this for ages…
Nice, very nice. I’m gonna try this for sure.
Sounds promising, but I installed it with the latest .net 2.0 installed (as per Windows Update) and it immediately crashed from a missing assembly. Anyone else run into this problem?
************** Exception Text **************
System.IO.FileNotFoundException: Could not load file or assembly 'Microsoft.mshtml, Version=7.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. The system cannot find the file specified.
File name: 'Microsoft.mshtml, Version=7.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a'
at bho.csseditor.CSSEditor.Activate(Boolean NewDocument)
... {snip} ...
Arjan:
Thank you for that. Yes, the Web Developer Extension has a whole s**tload of things that don’t do me any good in IE. Since I need to support IE, tools like this help. Slag IE where and when it sucks (you don’t have to look hard for opportunities), don’t do it when people try to improve the experience developing for it in any little way they can.
installed successfully. But how to get it work with IE7?
ciao André
I got the same error as Peter. Any suggestions?
@ Patrick: The web developer extension is awesome, but you can’t use it in IE. This is extremely helpful for layout bugs you only get in IE, something the web developer toolbar for firefox can’t help.
@localhost: I also ran across the same error message. It’s a shame since I could have really used this type of tool for IE.
what does this do that MS IE Dev Toolbar doesn’t? With the IE dev tool bar you can edit the currentStyle properties of the any element you wish.
Can do the same thing using DebugBar (free for personal use), plus much more …
http://www.debugbar.com
@Steve & Peter:
Get yourself a copy of Microsoft.mshtml.dll and drop it in your DOMHelper directory. Then register it with RegAsm.exe, the same way you did with DOMHelper itself.
Failing that, download and install the .NET 2.0 SDK, which includes Microsoft.mshtml.dll and should resolve the issue as well. It is, however, ~364Mb, and the file you need is ~4Mb.
Boy I just pissed myself laughing:
What a nightmare developing anything to work with MS products!
e.g. “Get yourself a copy of Microsoft.mshtml.dll and drop it in your DOMHelper directory. Then register it with RegAsm.exe, the same way you did with DOMHelper itself.
Failing that, download and install the .NET 2.0 SDK, which includes Microsoft.mshtml.dll and should resolve the issue as well. It is, however, ~364Mb, and the file you need is ~4Mb. ”
I say, forget about IE; if enough of us ignore it, it will go away.
I did some poking around on the Microsoft site, and you can download the required assembly as part of the Office 2003 PIA, here. This comes with a .msi file that is very easy to install. After I installed it, I was able to run the DOM helper, which was actually quite cool.
After registering i cannot see it in Explorer Bars. Any Ideas? Thanks!
Nice idea but it does not work in IE7
Also not seeing it under Explorer Bars :( .
This is a long time later but since the time of this post until now there still isn’t an inline CSS editor that seems to work. I tried CSSVista which has been discontinued and it doesn’t seem to work anymore. The DOMHelper, however, does. Even on IE7. But it’s a challenge.
You install it as per the directions on it’s homepage. After registering the dll, it wouldn’t show up until after a reboot.
After the reboot I could see the toolbar in the list of available toolbars and select it. It opened but switching to the CSS pane threw the same error as Peter back from Oct 17 2006.
If you don’t have Office 2003, like me, you can’t use the Office 2003 PIA as above from Oct 18 2006. This is on the IE compatibility images so there isn’t anything other than IE7 and an antivirus software. However you can search for the dll. The one I found was a lower-case “microsoft.mshtml.dll”. I couldn’t register it until I renamed it to “Microsoft.mshtml.dll”.
After another reboot it still gave the same error as Oct 17 Peter’s. It turns out you have to register it with the .net 2.0 Config tool. And that, AFAIK, comes with the .net 2.0 SDK.
So 300+MB later and installing only the tools and not the example projects nor the documentation, I had the config tool.
Going into My Computer>Configured Assemblies > Add… allowed me to choose. Select “Choose Assembly…”. Scroll through the list because it’s not in alphabetical order. It’s near the VisualStudio entries on my install.
Select it, click Finish, wrap up, close IE, and perhaps there was another reboot in there for good measure, and I was happily greeted with the DOMHelper’s HTML pane actually working on load. Clicking the CSS pane took me in and I could get to work.
So it is possible with some effort and a fast ‘net connection.