Driven to the ... Edge! -in Pursuit of a 3D view of my web page

Driven to the …Edge!

Well, what can I say? It’s dark days indeed.

Never mind Global Pandemics, Brexit, American (near) Revolution over a tosser, or the Kremlin being haunted by a dissident which someone tried to assassinate- who returned to clean up shop.

NO forgot it.

All that pales into insignificance when compared to the torture of trying to …
View a web page.

DOM structure in… 3D View.

Yes, I use a computer.
It can do amazing things.

But do YOU THINK>… I can LOOK AT SOMETHING?
just VIEW IT?

…from a different angle?

GOD!
What a chore.

Web Pages are basically 3 Dimensional structures.
They have depth.

Layer upon layer of stuff, with some things going

PEEK A BOO!
from Underneath, rising up to the surface and blinging away merrily on the surface of my web page, via the Z-index, which are kind of notoriously difficult to debug.

So just my container on the bottom of my desk work surface, then I stick some divs on,
Some stuff then goes in or ON them… then pics, then then…

SO its like a contour map in the end.
…and i want to see it as such and indeed ,
Previously I COULD… but

do you think I can NOW?!
GAH!

and it is this desire to view my handy work in 3d which has driven me to ,
auto update, personal information sharing, diagnostic data sent… with NO OPT OUT
UGH.
EULA.

yes… HorrorSoft… and… the … EDGE.

This is the story.

SO back in the day, I remember getting my tiny Hello World web page mind blown by
the 3D web page render view… which I first saw in Firefox… it might have been FF 11.

it was fab!
It was brought about by the Tilt Extension to firefox

This functionality was created by a clever Romanian chap, called
Victor Porof, around 2011

you can still find the original GitHub Plugin repository Here

and then a mozilla project wiki

https://wiki.mozilla.org/Tilt_Project_Page

Then, he got hired by Mozilla firefox dev team as seen on this site,
https://blog.mozilla.org/meeting-notes/archives/date/2011/page/8

!

here is a link to a devs blog, that mentions its dev.

Then Firefox, (after hiring him) had him working with 2 others, Cedric Vivier and Rob Campbell and employed his Tilt Extension, natively into Firefox itself as mentioned here

And released it here, around 2012

Yay!!!

aaaaaand then kills it in FF version 47…

https://developer.mozilla.org/en-US/docs/Tools/3D_View

Boooo!

Now this fine, now native thing, worked up until… and including FF ESR 46 gah.
(due to multiprocess incompatibilities and other things)
But the original Tilt extension worked up until and including FF v 52

providing you found THIS info… and the shortcuts! -if you couldnt find the native 3D button
or the Tilt section in dev tools.

Screenshot 2021-02-05 at 23.51.11

Without those shortcuts or the button…or the TIlt menu option, life was a monotonous single layer.

Victor Prokov, then disappeared from that scene, his plugin vaporised from firefox extensions.
But he is still a rather busy clever teddy as can be seen by the rest of his more current Github stuff.

And, if you look at his pic, remove the hair, put him back 10 years in time, it probably means he wrote the plugin when he was 12 or something :smiley:

But, it wasn’t always plain sailing to get this to actually get it to work!

Then it was all this sort of the following malarky to get it to work

and

so that was about NINE years ago… since 2016, when 3D view was no longer available natively in FF 47, people are STILL asking why and where has it gone?

That was it, gone, just… GONE.

A major visualisation tool and concept just dropped due to some technical, unsupportable …thing, with no work around sorted.
For YEARS.
It left the scene in 2016 and then not until MS started tinkering did it start to make a come back.

And it wasn’t terribly easy to fathom out or activate when they started playing with it.
I mean…

…and this was an improvement on the earlier version…

The meaningful bit of that link in relation to this was this bit.

I mean, how was this for a set of user friendly instructions to follow… just to ACTIVATE the tool!?

and, they’d kept changing the bloody interface so you couldn’t find the controls!
Now isn’t that just infuriating?
Now, which app do we know that also evolves really quick and keeps changing the interf…
Oh never mind, :wink:
Where was I? Oh yes…

Gutted.

SO webbing got harder, more complex, convoluted and with Increased depth to content layout.
And the main decent tool to explore this depth, had been kicked into touch.
Madness.

SO I kept my OLD browsers, NOT updated, so I could STILL look at stuff in 3D, when the mood took me, and my mind was boggled by layers and depth of things, z-index which I habitually forget…cascades…etc

So Firefox 46 for native 3D View, as well as Tilt extension
and
Firefox 52 for Just the Tilt extension in a Slightly Newer (But still Obsolete) Browser.

*** UPDATE!!! ***

  • Spoiler ALERT! * go to the end!! something here now works that didnt before… woo hoo!!*

Ha! Me Clever…

buuuuuut, then the web changed.
GAH! again.

Cue… CSS Grid.
Awkward.
This sort of stuff does NOT show up in old browser… renders all wrong and… cant be seen.

here we go, My tinkery Horseblog page in 3D View in FF46.
after doing 2 things. Here we go.

First click these 2 options.

Then you see the 3D cube of much Clickyness! -

CLICK IT

And then I get to see my CSS Grid Web Page in all its aweful lack of… CSS GRID.
But in 3D!

SO then I try the Tilt Plugin’s render aaand.

see the similarity and equally similar lack of … CSS GRID render?
pants!

Still, it can still do a rather dandy representation of this far more basic and less modern website…
Cough cough…

hee hee… look familar?

:smiley:

SO fast forward to 2019 and…

THIS!

Canary engine and… gulps… EDGE… yes, MicroWhore… were inspired by FF plugin… Tilt
(Makes a nice change from Embrace, Extend, Extinguish)

And found This…which I wasn’t actually aware of at the time (Horses… remember?)

I recently searched a bit and found the devs input, about why and how it came about etc.
https://bugs.chromium.org/p/chromium/issues/detail?id=987787

referring to the history of FF’s efforts etc.

So Then I find myself…>
Glaring… yes

GLARING>… at the bloody microsoft download page…

And… I … HAVE…to do… … IT!!

Mea Culpa!

There is NO alternative… none
I want to view…

CSS Grids in … 3D

And MS have … picked up the Baton, from where FF tossed it onto the ground, by the dog poo.

So anyway… I am then tortured by the MS EULA
and you MUST share info… there is NO way out of it. no way.
GRRRrrrr.

Were they being ironic when they juxtapositioned those two informatics next to each other?
Tossers.

SO I turned internet off as installing. It offered me to play a game, until I re enabled it!
A bit like their annoying MS Office Paper clip.

cliipy

Dink DInk Dink… it looks like your to trying to wite a letter/foil my data harvesting… sort of pop up.

, disabled auto updates, even as it constantly attempts anyway.
And ran it.

…after going through preferences, turning off a myriad things.

And after fumbling around I FINALLY , got to this view of the dev tools…

and got to see this…

…tiny …postage stamp of my Web Page… bottom right of dev tools.

Screenshot 2021-02-05 at 23.16.27

WHAT USE IS THAT!?

This is after quite a bit of laggy zooming in.
then found the dev tools , in new window icon… expanded it and -got a separate dev tools window
on…
THE OTHER MONITOR! Oh yes.

FINALLY!

After quite a lot of years… there it is…

TADA!!!

SO, The Enemy of my Enemy is my friend…
FireFox ditched my wonder tool for the hard of thinking…
AND… MS… who isn’t anyones best friend really… picked up the baton, wiped off the dog poo and ran with it.

I now have an application running on my Mac, that offers NO OPTION to turn off telemetry.
GRRRrrrr

But I can see pretty 3D, renders of web pages.
MS, might as well just start writing pRon Sites… carrot dangling nastyness.

So there you go.
After just hacking my Mojave installer… re partitioning it all to get it much more up to date, I then had to install 2012- 2016 browsers, just to fail to render css Grid in 3D, but to render other DOM visualistions pretty well.

The very long winded History of 3D web Page view and DOM structure visualisation, which now the latest canary Build of Edge …employs.

Please please please let some other Browser dev get back with the plan and reinstate this so I can ditch Edge… just as a lot of other Windows users are frothing at the bit about a forced upgrade to Edge, I have VOLUNTEERED to… host this nastyness, to feed my defective inner web beast.

Gah!

there I hope that was informative for someone.
If you have never used this sort of tool, as you took to web dev, in the interloping years before or after its respective dev and demise, its back, and this should now do both CSS Grid AND Z-index etc.

worth checking out… spits even… if its…from… from… I just cant say it.

MS.
there, thats close enough.

PS, its taken me HOURS to write all of this!
ITs 4am and I only cooked my food at 2 am!
Bed… after some 3D rendering of web pages.

WOoo Hoo!!
I hate myself…right now… MS…gah

UPDATE REPRIEVE

it works!!
Firefox vr56, with the TIlt plugin, WORKS! and renders the CSS GRID!!

woo hoo.

check it out.
FF 56 download.
https://ftp.mozilla.org/pub/firefox/releases/56.0.2/mac/en-GB/
then download the .xpi from here

and double click it to install in FF 56.
I had it installed in 46 -and it appeared as a legacy plugin in 56.

You dont have to surf the web with this thing, but turn off auto updates and use it as a visualisation tool.

2 Likes

Chrome > DevTools > Layers Panel
Safari > DevTools > Layers Tab

mmmm… Safari…Nope doesn’t exist. Well not in Safari 14 anyhow.

But I did get excited about the Google layers… which is what sent me off to re explore this stuff.
BUT

TBH, I was sorely disappointed.
IT seems Very Laggy and sort of …sucked.

I mean, This is the Pinegrow site in it.

But it was really What I thought looked the most promising.
until I tried to use it.

I became aware of it , via the blog rocket site tbh.here

And found that interesting as I knew little about repaints!
But, the Chrome layers view was a fail.
or I didnt get it right/did something wrong, and hence the exploration.
And the older browsers…whizz through the visualisations with very little lag.
Edge etc… like treacle

You had initially mentioned neither thats why I mentioned them.

Yes I didn’t mention them, as they don’t have it currently, A little like why I didn’t mention the Walmart superstore chain either.
That also cant do it :slight_smile:

And I was trying to utilise a modern version of the 3D DOM model in a modern browser, no dice
And, alas, the Google version models compositing not DOM Rendering.

ie
This is different as these are compositing layers, not DOM nodes shown in 3d. Compositing layers are an optimization technique.

So good for examining Resource hogs in animations and painting/ repainting the images etc.

which is explained quite succinctly here
https://news.ycombinator.com/item?id=16943035

Which is how I learnt about the Paint/repaint, performance stuff. so good for that yes, but not for 3D DOM modelling. It might be fun to inspect Animations produced with PG etc, but no use for my purpose.

I wish both of these did indeed have it, or anything else.
I JUST installed Chrome for this very reason over the past few days, to explore layers, but alas, not a 3D DOM view, which was the point of my post, ie, the actual title.

This explains it quite well, if you dont get what layers is actually about in Chrome.

If Ive got it wrong, fire away and point me in the right direction, but alas, your 2 line supportive post, appears to be in error.

I thought Safari had dabbled in it back in the day, but cant find any working versions now.
I went off and rechecked for back in the day, I can find reference to WebKit Layers, ie
here

but again, compositing is mentioned.
SO that then turned into this

So, it went from Layers Sidebar in 2013, to a Layers Tab in 2018 but alas,
Both had bo diddly squat to do with 3D DOM representation.

Hence my frustration with finding I had to … spits… utilise a MS product to achieve my goal, and the purpose of this long, exploratory post - to point out the amazing fact that such a mega useful, revolutionary tree visualisation tool - just got dumped, due to multi-processes and some other technical difficulties, but was NEVER picked back up over the intervening years.

Until now.
Quite mad.

A bit like everyone having to stop wearing new sunglasses because it becomes a bit difficult to produce the lens pigments.
…if you’ve still got OLD sunglasses, you’re gonna carry on wearing them, and if you’ve never had any and cant get new ones… yet see the old ones passing you every day, your just going to hanker after the old ones, which you can see still work perfectly and wonder why the hell you cant get new ones.

And… if your one of the old folks with perfectly working sunglasses, you are never going to stop walking about, gloating merrily whilst using them.

I now have BOTH old and NEW …sunglasses.

GLoaTs

:slight_smile:

… “Made by Micro who?”

…Ssssshhhhh!

As its never easy to understand or keep up with your current computer / OS situation. I was unsure what you were dealing with and dabbling in currently.

So I apologize if you feel those other two mentions were out of context given whatever setup you may currently be using. Out of curiosity are you having extensive issues with your “my Web Page” (horse site) that such features are imperative for development and optimization?

HI, no not at all, I was just using a very basic, previous prototype of a CSS GRID based site, to highlight the calamity of the current state of trying to render a simple page DOM in 3D.
With all the web advances that have been made, such a great tool got ditched.

And showing that even though the OLD ones worked and could render the PG one, with Bootstrap etc, pretty well, they just didn’t cut the mustard with CSS Grid.

That was until I fell on my own sword and realised that the later, FF 56 actually COULD render CSS Grid! It never did successfully for me before…

I guess it never did in my previous attempts as… I may just have screwed my first grids up :smiley:

oops.

And not to worry, it just seems like you got the layers/Composition/DOM 3D view thing muddled up, the same way I did when I first saw the google chrome mention of it and the tools looked SO similar!

But they proved to not be relevant to my search, hence them not getting mentioned.
Still it was good as my similar error, led to me learning about Paints :slight_smile:

edit
mmm although I have to admit, I am confused by the Chrome description of it though, as I HAVE seen reference to 3D DOM modelling with it.
Ie, here

and I HAVE seen that actual,spinning image JS page site.
I shall have to have another look.

had a look… no compositing again.

I think throughout all the browser venders various iterations over time they had desired to achieve similar features while likewise varying in many ways. In the end one may consider why these 3D features are so under discussed broadly thought the developer community (if they are imperative for dev) and likewise not effectively maintained across browsers.

Yes, valid points.
It might be because they were just a because we can sort of thing, but I found countless proclamations of dismay at their demise over the years, especially with regards z-index, nesting divs etc and debugging.