tadwohlrapp
commented
1 month ago Alright, so I dug in and compared the old and new markup. Unfortunately this time there is no simple new attribute on the body tag (which would make reproducing the issue a bit easier), but rather some changed and new CSS as well as tiny changes in the search result title's HTML markup.
Here's how to reproduce it:
1. Visit google.com and add the following CSS (I'm using the Stylebot extension): This includes all changes to the existing classes
.new-shitty-ui {
.DKV0Md {
padding-top: 4px;
}
.DKV0Md,
.Z3xoIb {
margin-top: 20px;
}
.ojE3Fb .q0vns {
background-color: #f4f6f7;
border-radius: 100px;
display: inline-flex;
padding: 4px 16px 4px 4px;
max-width: 520px;
overflow: hidden;
align-items: center;
}
.GvPZzd {
font-size: 12px;
line-height: 18px;
font-family: Google Sans, sans-serif;
}
.iG7WGe {
color: var(--IXoxUe);
font-family: Google Sans, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding-left: 6px;
padding-right: 6px;
}
.VuuXrf {
color: #202124;
font-size: 14px;
max-width: 370px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
line-height: 20px;
white-space: nowrap;
font-family: Google Sans, sans-serif;
font-weight: 500;
}
.CA5RN {
display: inline-flex;
flex-direction: row;
overflow: hidden;
}
.DDKf1c {
margin-right: 8px;
}
.csDOgf .MJ8UF {
padding-left: 0;
top: -10px;
}
}Diff screenshot of Google's old and new CSS
2. Search for ublacklist > find the search result for the play store listing > open DevTools, find this search result's title div <div class="yuRUbf"> > Edit as HTML:
3. Replace it completely with the following HTML:
<div class="new-shitty-ui yuRUbf">
<div><span jscontroller="msmzHf" jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a jsname="UWckNb"
href="https://chromewebstore.google.com/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe?hl=en"
ping="/url?sa=t&source=web&rct=j&opi=89978449&url=https://chromewebstore.google.com/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe%3Fhl%3Den"><br>
<h3 class="LC20lb MBeuO DKV0Md">uBlacklist - Chrome Web Store</h3>
<div class="notranslate HGLrXd NJjxre iUh30 ojE3Fb">
<div class="q0vns"><span class="DDKf1c">
<div class="eqA2re UnOTSe Vwoesf" aria-hidden="true"><img class="XNo5Ab"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAe1BMVEWwvLDZ2dnj4+PY2Njk5OTk4+Pl395HcEzm5ubv7+/o6Onm5ubn5+fl5eXn5ubx8vLdSz/aPjP/zkRHiPQPoV7r7e3dTkE9hPT/zTX4uU/hm5bgf3jz1MPbbWRrnPTQ0Mf61YtLjFCYuve91PmJsfebc00qo2S4Wzxvu5LoXaG4AAAADXRSTlMFNoMyZm34AOHhULCwgh+baAAAAOxJREFUKJGV0utOhDAQhmHcNbi7CtNhW7qWctij3v8V+tkDNqZgfBMS0icz8KPFy0rFOhaLAcsaVZlK4K5OS3CX4mb7hLabHFbxN7KTb8+u1yz+/rF/YbWAFR6F6uykKo3pOmPK6A7dmxp7ZhZ4uB/VjHsiRWRYtCHBBkdK7R3COp4JcY+zGaMJZ9CO4iSNHPb9ZOMkyfv3B1kYa6f3UJwc5UOIFquut9uVplODTpY8fkqMip4GjQZqHE4BH1LKlu1FH5G+WDfa+LUKJs9MxxD5vQnKD9LedIoHj+d68DaosPbg7u3CxfzzUq/0BeI8KWT7MN/WAAAAAElFTkSuQmCC"
style="height:26px;width:26px" alt="" data-atf="1">
</div>
</span>
<div class="CA5RN">
<div><span class="VuuXrf">Chrome Web Store</span></div><span class="iG7WGe">·</span>
<div class="byrV5b" style="overflow:auto"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
role="text">https://chromewebstore.google.com<span class="ylgVCe ob9lvb" role="text"> ›
detail › ublacklist</span></cite></div>
</div>
</div>
</div><span jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md" style="display:none"></span>
</a></span>
<div class="B6fmyf byrV5b Mg1HEd">
<div class="HGLrXd iUh30 ojE3Fb">
<div class="q0vns"><span class="DDKf1c">
<div class="eqA2re UnOTSe" style="height:26px;width:26px"></div>
</span>
<div class="CA5RN">
<div><span class="VuuXrf">Chrome Web Store</span></div><span class="iG7WGe">·</span>
<div class="byrV5b" style="overflow:auto"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
role="text">https://chromewebstore.google.com<span class="ylgVCe ob9lvb" role="text"> › detail
› ublacklist</span></cite></div>
</div>
</div>
</div><span class="go828442299" lang="en-US"><span class="ub-button go786762153" role="button" tabindex="0">Block
this site</span></span>
<div class="csDOgf BCF2pd ezY6nb L48a4c">
<div jscontroller="gOTY1"
data-id="atritem-https://chromewebstore.google.com/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe?hl=en"
data-viewer-group="1" jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof">
<div>
<div jscontroller="PbHo4e" jsshadow="" jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
data-viewer-entrypoint="1">
<div jsslot="">
<div jsname="I3kE2c" class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc" style="position:absolute"
aria-label="About this result" role="button" tabindex="0"><span jsname="czHhOd"
class="D6lY4c mBswFe"><span jsname="Bil8Ae" class="xTFaxe z1asCe"
style="height:18px;line-height:18px;width:18px"><svg focusable="false"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg></span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Diff screenshot of Google's old and new HTML
The changes in the HTML markup are really minimal, basically just adding a divider dot <span class="iG7WGe">·</span> to the title and a new style="overflow:auto" attribute.
The main changes happen in the CSS.
One of my Google accounts seems to have been selected for A/B testing Google's new serp UI.
Besides introducing hideous gray bars to search results it also breaks uBlacklist's styling a bit. See screenshots.
Expected Behavior
Old UI: "Block this site" is nicely centered vertically.
Actual Behavior
New UI: "Block this site" sits at the search result title's bottom. Also gets cut off by website's og:image thumbnail.
Steps to Reproduce the Problem
Specifications