►
Description
Relates to https://gitlab.com/gitlab-org/gitlab/-/merge_requests/131616
A
Hello,
my
name
is
Michael
Lee
of
the
source
code
group
and
today
I'm
going
to
be
talking
about
adding
a
button
onto
the
blog
viewer
to
toggle
the
blame
annotations
directly
in
the
blog
View
and
kind
of
discussing
how
that
edition
of
the
button
forced
me
to
look
at
how
we
may
clean
up
the
UI
with
respect
to
the
display
of
on
the
buttons,
because
we
have
way
too
many
buttons
on
the
Block
Vera.
So,
let's
get
into
it.
A
So
at
the
moment,
in
the
Mr,
there
is
a
idea
of
adding
the
blame
button
to
The
Blob
viewer,
and
it
was
added
here
and
this
blame
is
different
than
the
blame
at
the
top
here.
The
blame
at
the
top
takes
you
to
the
blame
history
page
that
views
all
the
blame
for
the
file
and
that's
what
we
have
right
now,
but
we
have
the
ability
now
to
just
view
the
blame
directly
in
the
blob
viewer
and
a
way
to
toggle.
That
is,
to
click
this
button
here.
A
I
think
this
makes
sense,
because
all
these
buttons
here
are
text
based
and
everything
else
is
icon
based.
However,
this
is
where
I
feel
like
we
should
change
it
to
make
it
more
Associated
to
code
preview
and
blame
so
because
the
these
buttons
here
toggle
the
view
of
what
you
see
here
and
that's
what
we're
doing
here
by
clicking
on
this.
You
toggle
the
view
to
see
the
code
view
with
the
blame
annotations
next
to
it.
A
We
would
do
something
like
this,
where
we
have
the
preview
code
and
blame
in
in
this
order,
because
usually
readmes,
we
display
immediately
in
the
preview
mode
there's
other
preview
modes
that
we
have,
such
as
data
tables
and
I,
think
we
can
start
off
like
that
by
showing
that
by
default.
So
who
wants
to
view
code,
it's
code
and
blame
in
I
wouldn't
expand
these
words
out
to
be
preview
of
code
and
blame
right
now,
because
we
just
don't
have
enough
space
for
all
of
this.
A
But
I
think
this
might
be
a
good
MVC,
because
what
we
can
start
doing
is
start
looking
at
this
as
a
scenario
where
we
want
to
add
more
functionality,
but
as
we
do
that
we
need
to
start
moving
things
around
too
much
and
the
other
thing
that
I
moved
around
was
this
edit
button
all
the
way
to
the
right
hand
side
just
to
line
it
up,
so
that
there's
some
order
here.
This
is
the
primary
action
and
everything
else
is
secondary
and
the
kind
of
order
follows
the
existing
order.
A
The
secondary
buttons
over
here
with
a
longer
view,
like
I,
said
you
want
to
move
all
these
buttons
into
an
overflow
menu,
so
Premier
link
goes
into
the
overflow
menu
blame.
So
this
is
viewing
the
history.
This
one
goes
into
the
overflow
menu
so
that
it
doesn't
conflict
with
this
plane,
because
at
the
moment
we
have
two
blames
on
the
page
and
which
blame
is
which
so
that
will
go
into
their
history.
A
I'll
go
in
this
overflow
menu.
That
just
leaves
us
with
these
three
buttons
and
if
we're
going
to
use
them
as
a
button
group,
there's
no
selected
active
state.
So
it's
not
the
best
kind
of
component
to
use.
We
do
have
a
segmented
control,
but
that
is
a
component.
That's
looking
to
be
deprecated
in
the
future.
So
if
we
want
to
Future
proof
ourselves
so
to
do
that,
we
can
go
towards
using
tabs.
A
We
have
read
me
in
two
places:
we
can
essentially
remove
that
with
this
copy
file-
name
up
into
this
area
here,
so
that
looks
like
that,
and
then
we
get
something
a
little
bit.
Our
actions
are
now
located
in
the
top
right
with
our
primary
actions.
Our
overflow
is
secondary
actions
here,
I
guess
the
other
things
that
we
need
to
like
to
make
this
design
kind
of
work
by
adding
this
tab.
A
We're
essentially
increasing
the
height
of
the
page,
and
this
is
just
an
exploration
where
what
would
this
look
like
if
I
made
everything
thinner
so
with
code
owners?
There's
a
lot
of
space
being
used
here
and
if
we
reduce
the
padding
around
the
content
and
to
make
it
a
lot
smaller
and
then
reduce
the
font
size,
because
we
made
the
padding
smaller,
it
could
look
something
like
this
could
work
and
other
functionality
is
still
there.
So
we
have
author
two
weeks
ago.
So
this
is
the
author's
name
they
were.
A
They
did
it
two
weeks
ago.
The
commit
name
is
here
and
clicked
on.
This
allows
you
to
copy,
so
all
the
functionalities
there,
it
just
looks
different
clicking
on
this-
will
take
you
to
the
actual
commit
itself
or
you
can
potentially
click
on.
That
would
also
take
you
to
the
commit
as
well
like
I
said
everything
is
in
the
Overflow
menu.
So
the
overflow
menu
will
in
this
quick,
iteration
and
kind
of
look
like
this
there's.
A
We
can
like
chunk
this
up
and
put
in
different
sections
around
like
actions
that
affect
the
file.
Whether
you
want
to
copy
in
downloading
could
be
in
different
formats
such
as
is
the
markdown
file
or
if
we
have
PDFs
or
other
things
like
that,
it
could
be
included
in
here
and
then.
This
is
an
example
of
what
this
might
look
like
for
a
file
that
doesn't
have
a
preview
such
as
Hamilton,
and
here
we
wouldn't
have
the
preview
tab.
A
We
just
have
code
and
blame
and
everything
else
kind
of
functions
the
same
and
by
displaying
it
out
like
this.
You
know
if,
if
a
file
is
locked,
we
could
add
a
lock
icon
in
here
and
then
put
a
tooltip
saying
that
this
file
is
locked,
and
this
is
kind
of
making
this
align
with
how
we
display
locked
file
in
the
repository,
so
I
think.
A
A
A
A
The
first
step
is
probably
just
moving
like
this,
and
then
we
can
look
towards
finding
different
issues
to
kind
of
get
us
to
the
state
here
where
we
do
want
to
make
the
blame
kind
of
a
at
the
same
level
as
code
and
preview.
It
is
just
a
way
of
toggling
the
different
views
of
our
code
down
here.
Thank
you.