well hello friends today we are going to
do more browser hacking and it's going
to be about background images so I
figured I would just add support for
having a background image on a page
right and we'll do it in the old HTML
body background style so I mean the fact
that we will turn into this but we want
it to be more like body background you
know
copal dot PNG or whatever so we'll grab
some cool no needs website background
like what were some typical coolin
sending this one classic let's use that
one actually it's perfect
so we're gonna have to turn this into a
V engine so we can do that with vacuum
so it's just export out and I will put
in my eyes you're going to be call it
90s PG PNG and this is automatic see if
we can load it because some randon
worked on PNG the PNG decoder Allah
backed and added a bunch of additional
dmg features so I think maybe now we
might actually be able to load this
because my original decoder could only
do with RGB a 8 bits per channel but now
it would be cool if yeah so like now I
don't have to worry so much about that
usually if
something we can usually load it so
that's awesome Thank You Brandon by the
way so it's forget about that and then
let's see if we can make a test page for
this so see maybe should we do this to
the default page I guess it would be
kind of funny so let me put that here
cuz I'm I'm not gonna put it here
because I don't I don't want to do the
parsing of the URL thing cuz normally
what she would do is this right 98 PG
PNG but I don't want to parse URL right
now so I'm just gonna put it here and
we'll worry about parsing them see us
this equivalent later but if we open
this in Firefox
we'll see that it actually now looks
kind of dumb because the text color is
all wrong so we'll change that and and
we will brighten this up a little bit
[Music]
this is starting to look extremely 1990s
which I love obviously let me just
change them what am I thinking I want to
change the color of the link to a little
bit brighter so I'll say for 4f instead
of just zero zero f yeah that's just a
little touch up on the color I think
that's a bit nicer okay
and since I'm doing it anyway I'm just
gonna be link although interview we
don't actually support visited links yet
but you know in the future we will and
this will give us something to target so
I guess that for us yeah that looks kind
of neat
it's not quite as dark as I wanted it
I'm getting really into the important
details here so I'll see oh geez what's
going on here what Firefox why are you
doing this I just want to see the page
okay well that's good enough for me
freakin browsers right then no wonder
people would want to write their own
okay so now that we have that here let's
see what it would render like at the
moment just to see what we are working
with so now the page looks like this
instead and that's just so pretty with
the hover effect um so anyways let's go
ahead and do them wait this looks weird
oh why is it like that I would expect
this to be white there should be dots
here okay
but let's ignore that for now and just
focus on the background so let's see
first thing we'll do is go on the body
element cuz we have to now we have to
notice that the background attribute on
the body element is a presentational
hint which is what the CSS spec like the
modern specs call basically like this
old-school
attributes that are supposed to have
some sort of effect on the CSS so
cool just this is where we apply all the
presentational hints that we can find an
annulment so if we encounter a
background attribute we will basically
translate it to CSS so let's a style set
property will need background image and
we'll make something new like an image
style value mm-hmm we're gonna create it
with I guess the URL that's enough value
so this thing doesn't exist yet
we have to make that up and then this
thing doesn't exist either so I can
start by adding a background image
property and we're gonna need a style
value if it's an image it's gonna be I'm
not really sure how we're gonna solve
this but we'll figure it out
so that's a really simple one like this
one I've inherit let's take that and
change it so much style value it's gonna
it's gonna represent like a CSS value in
a stylesheet that refers to an image
right so we want it to be able to load
an image I guess that's the important
part
Const well let's say URL actually like
this include back and that means that
embody we have to actually pass it a URL
instead of just a string we can do that
by completing the URL complete URL it's
for in terms relative URLs into absolute
URLs based on them
document where the document is the web
so that's what it's for
so for URL that's already absolute then
it doesn't have to do anything mm-hmm
to strain here we can just say something
like um Mitch name something like this
and URL to string so let's store that
okay so so far so good but of course we
also want to load this thing so this is
the trickier part so we wanted load it
and then when it finishes loading this
loading is gonna be asynchronous and
when it finishes loading we want to have
some kind of a notification for that so
for that to work correctly let me let me
just um start writing the loading parts
that we will see what I mean when we get
there so yes
I should probably do this in the CDP
file instead do something like that
I think we're gonna have it get the
document as well like that and we want
the document because we want to be able
to tell it that the image finished
loading so you have to redraw something
basically it's not gonna be very
granular at the moment you know a smart
solution would figure out exactly what
needs to be redrawn and then only reach
all that we're gonna we're gonna hit a
little harder and just redraw everything
but it should still be fine so I think
we're gonna have a little constant here
or yeah yeah right so because we want to
pass the document to this oh no no not
like that here but that's not Const
I'm gonna be lazy here and just do this
for now it's not perfect I have to save
come back and think about that one okay
so here we want to fire off the resource
load so go get the resource loader load
URL and then hit me with Oh actually we
shouldn't this should not be a reference
just like this because there's no
guarantee that document will stay around
so we should actually keep this in a
week there like this yeah that's better
and then here we will make a week better
to document and it's going to give us
data right it was a pipe-bomb yeah yeah
okay so if M document if the document
has disappeared we can just do nothing
otherwise i'm bitmap is load PNG from
memory that they got a data size and
will need that PNG loader for this
and then if a bitmap turn otherwise once
a.m. document update what we really
might do is um repaint everything cuz
hmm how do we do that
I'm document set needs display but
there's no such thing I need document
paint let's see so if we want to repaint
at the moment we can we have layout node
set needs display which will tell frame
that the frame needs to repaint
something frame set needs display what
if we would call it with an empty rect
we would say that that means that you
want a full repaint we can do that so in
style image what's it called style image
style you will do in document frame no
not font cache frame okay said needs
display okay so that's a full repaint
all
I'll do the best and I'll repaint it
possible okay so when the frame gets
told to do a full repaint and he will
invoke this hook and this hook is set up
by HTML view here so this is what
happens basically we just take the rect
coming from the repaint request from
inside the veg team l and then we
translate it to the HTML view widget and
then tell the windowing server to update
that part of our right so here we can
just do something like if content rectus
empty will say that that means that we
shouldn't just update everything okay
just we needed to have graphics fit nap
here on my channel
[Music]
maybe I was trying to be a little too
lazy here with these so let's just do
this to make it hackable otherwise you
have to include graphics bitmap
everywhere anyway C++ and it's a stupid
header situation
I guess that's it's one thing I'm
looking forward to someone finally
fixing one day so so far we good but
we're not actually doing anything with
this value and we don't have a bitmap
exposed anywhere but now we can do that
so we can say so then when we paint
something and it has one of these as the
background image then we should ask if
it has a bitmap and then if there is a
bitmap we should tile that bitmap across
the whole time so that would be in
layout
ox this is basically where we render any
CSS box or that's not exactly true
because it doesn't include line boxes
but any non-playing box and what we do
for the background color is right here
so if there's a background color CSS
property set then we will paint that so
I guess we should do backup image
afterwards so opening this pretty teen
background image has value and it was
image
I did not have one of those so let's add
one of those is image okay so we have an
image now we want to mm oh I can't take
you that because of reason if image
value dot
then finally context painter draw tile
fitna Allah our padded rect and we will
snap in there that image value good now
okay how let's go guess we'll find out
the image tiling code is not terribly
well tested it's used for the tiling
wallpaper mode but I never test that no
mmm crash it looked good at first so
what do we have weak better to document
failing business Keanu okay where are we
they're in a lambda in image tile value
so we're in this lambda right here did
this thing go away so you know it's it's
not great that you can schedule a
resource load and then you can disappear
yourself these are rough counted so we
could just be lazy here and do something
like and on all that's better
or yes we can take ourselves like that
it's ugly but just to move forward
okay that's pretty neat so now we have
this problem that I mean I'm just gonna
appreciate the neatness for a moment but
you can see that it doesn't render down
here and that's because the body element
it doesn't actually continue all the way
which is a bit annoying but we have had
the same problem doing the body
background color so what the hell did I
do for that so wrecked
yeah yeah right so we ended up in HTML
view for something has I'm a document
background color we just fill that in so
[Music]
mmm this is a bit weird I wish that
I'm thinking what's the right solution
here for this I guess this really smart
just want to test something up so bear
with me no margin maybe like that I just
um just want to see what that looks like
if we have that margin and yeah yeah
yeah right so it still tells the body
background even though it's margin so I
guess body is special in that way
because you're not gonna paint inside of
you're gonna I'm not gonna paint the
margin of some random element and fill
that with the background image but body
is special hmm so maybe we should do the
same thing here mm how do we have the
background image I guess we're gonna
need some help for that
so we'll say yeah and document
background
[Music]
do like that painter draw child okay so
then we'll need something to extract
this and then in fact if we have a
background image that we shouldn't
bother with the background color so mmm
yeah let's not do that right now I was
thinking like what if you have a
background color but then a transparent
bitmap but yeah okay let's be correct
and let's do it that way we can optimize
this away if you have a opaque
background image but I'm getting ahead
of myself so we're gonna need something
that returns a background image if there
is one
so that should be like this background
image and it will work essentially the
same way that we will get the body
element and failure will just be like
this so the body element layout node and
then get the body element we add notes
background image property and verify
that it's an image or let's see Oh Mitch
value it is image style you background
that color it's the wrong name here
obviously
star that this image value it enough if
that's the null and we also fail look
finally so if we do have a bit this is
very similar to background color but at
the same time it's a bit different and
then now I'm thinking that it's like
currently will fill in HTML view will
fill in the background before drawing
anything else yeah and then we're
actually gonna do them filling in the
body once again
so probably we want to avoid that let's
see HTML view this is gonna be like how
the body is painted and then in the box
we can ask if we are the body then don't
do anything basically if note and node
equal to document body we have no node
or the node is not the document body I
cannot compare those because I don't
know if a smell body element is so we
need that and also this is kind of
convoluted so it is body say and
[Music]
No
and notice equal to document.body and I
guess we should put that out of line I
can see that my indentation is off so
we're gonna need to fix that because we
messed it up somewhere here yeah his
body so we want if not his body right
yeah
things should still look the same with
this change maybe we could find another
cool background actually cool 90s
desktop wallpaper burger look at those
quite cool oh that's a cool well I
didn't want to desktop offered Ashland
and well some of these are so tasteful I
don't want that one again I want a
different I have so many of these saved
I don't know why I'm looking for a new
one suddenly
[Music]
okay I want cloud okay now we're talking
this will do the trick doing important
stuff here because I'm gonna put this on
a separate element so that's what I want
to achieve and then we can do a div here
put this in there oh but now I
can't parse that the parsing trick okay
okay let's do a that's cheap
cloudy we're gonna cheat here and just
do it pretend that there's no URL thing
in CSS and we'll just look at the file
name directly Jean and then in style
resolution or
hmm I guess we'll have to go in the CSS
parser so if my pricing in C's is value
then you really would like to know what
the property name is so I have to I'll
go pass him what kind of property or
arson
okay and then if property acting is back
up color um then we will return an image
type value oh crap
we knew the documents as well I can't
get to the document
hmm that's annoying I want to get to
some document from here so in order to
do that I'm gonna have to refactor the
CSS parser so it knows what document
it's parsing for and that's gonna take a
little too long for this video so I'm
just gonna say stop there and we'll work
on committing what we have instead
through the cloudy thing and I'll get
back to that some other time and the
parser we can undo that change all right
[Music]
okay so hatch review I forgot the same
so here we just tweaking the welcome
page so that it has a background um and
I should not forget to add that cool
background
[Music]
and then we're just having the
background image CSS property and then
install value we're inventing this image
style value which has a URL that it will
load asynchronously and then when it
finishes loading it will decode it as a
PNG and then repaint the entire frame
that it was loaded inside this is very
suboptimal but it does work basically oh
and then in style value we're adding the
image style value subclass which is a
URL the document in a bitmap kind of
cool mmm
nothing terribly special about that and
then in document we added background
image because HTML view needs to get
that so that it can fill in the
background for us and then for the body
element when we encounter the background
property we turned that into a CSS
background image property so that's cool
and then in HTML view when we get too
old to that like an empty rack needs to
be displayed then we redisplay
everything so that's how we do that full
of repaint when we get a little load of
the background images finished and here
we can extract the background image in
HTML view rendering so that we tile the
background image if there is one that's
just because like I was saying the body
element can be smaller than dumb the
document viewport so we have to make
sure that we filled on everything
because the body element background
should be filling the entire viewport no
matter what and then in layout box just
put this inside if not is body so that
we let HTML you fill in the body
background and then layout box can fill
in a background of everything else
um so actually we can verify that still
works by just checking like this little
yeah so you can see these backgrounds
are still filled because they are not
the body okay and the code that trusts a
background image is just if there is a
background image value and it is an
image and it has a bitmap this
effectively means that the big map has
finished loading and it we were able to
decode the image then we will file that
but now simple effective cool awesome
and finally here's that little helper to
tell us if you like a box represents the
body element that's just so we know that
we we don't have to fill in the
background for those okay so we'll leave
that one for some other day so implement
basic tiled background image support
it's now possible to set an image I have
a H background image yeah good body
see HTML view adults all body handles
the body element also I should know you
know officially direct is a lot of
orange land looks as responsive or far
other
cool um nope that's not it possible to
use this background image correctly and
since we can't parse them yeah okay
that's pretty cool so let's see it one
more time huh horrible but why is that
so these are like um there's other lists
some water why that list bullet doesn't
show up we should see the bullet there's
the bullet from list hit the style okay
let's have a look at it so it uses the
text color but maybe it has some wrong
text color layout was the item marker it
appears to have no style I guess I would
explain why it doesn't work
oh yeah lucky here see picture stone
that's an empty style we should be
inheriting style for this guy so this
type of marker always has a parent so
let's just go directly to the payment
and get style from him instead
because marker is always owned by the
principal box for the list item which is
this one so now we get thumb now we get
this style from this one instead it's a
little bit weird that because it's a lay
a box and it's required to have some
kind of style and maybe the right thing
to do here would be to have the parents
style but currently it's not accessible
to us at the moment of construction so
that's something that should be
refactored so that we would be able to
get the parent style directly and
instead of having to do it here so fix
me it's it would be nicer to not
Aaron stop yeah
mmm it's time here - laughs yeah okay so
I'll just look at it again cuz it's so
neat look at that cool background how
cool is that so I guess this gonna be it
for today's video
so if you made it this far then I thank
you for watching for hanging out as I
continue to build a browser apparently
but surprised that I ended up doing this
so soon but it's very fun I hope that's
interesting to watch as well yeah so
thanks for hanging out and I hope you
have a great day I'll see you next time
bye