facebook.com redesign discussion & filters

yourduskquibbles / webannoyances

Fix and remove annoying web elements such as sticky headers, floating boxes, floating videos, dickbars, social share bars and other distracting elements.

Creative Commons Attribution Share Alike 4.0 International

1.3k stars 48 forks source link

facebook.com redesign discussion & filters #234

Open RedDragonWebDesign opened 4 years ago

RedDragonWebDesign commented 4 years ago

I was forced over to New Facebook today, under duress. Looks like we need to write some filters for its 2 floating toolbars. Visit any profile page to see the 2nd toolbar, which is a little farther down than the 1st toolbar. Here's what I have so far.

! 1st toolbar, needs work
facebook.com##div[role="banner"] div:style(position: absolute !important;)
! 2nd toolbar, I think this is working
facebook.com##div[role="main"] div[style="top: 60px;"]:style(position: relative !important; top: 0 !important;)

1st toolbar without filter:

2020-07-17_070438

1st toolbar with my filter, needs improvement:

2020-07-17_070450

RedDragonWebDesign commented 4 years ago

I added nth-of-type to the 1st filter, better, but still not working perfectly.

facebook.com##div[role="banner"] div:nth-of-type(3):style(position: absolute !important;)

yourduskquibbles commented 4 years ago

@RedDragonWebDesign I will investigate hopefully later today and see if I can come up with something for their new design.

yourduskquibbles commented 4 years ago

I will consolidate these into 1 line for elements with the same CSS changes, but how do the following work for you?

This should pin the top header and the sidebars for the Homepage, user profiles, Facebook Marketplace, Facebook Watch, Facebook Gaming, Facebook Groups and

! https://www.facebook.com
! main header & sub elements
facebook.com##div[role="banner"] > div:nth-of-type(3):style(position: absolute !important;)
facebook.com##div[role="banner"] > div:nth-of-type(4):style(position: absolute !important;)
facebook.com##div[role="banner"] > div:nth-of-type(2):style(position: absolute !important;)
facebook.com##div[role="banner"] > div:nth-of-type(1):style(position: absolute !important;)

! homepage right sidebar (contacts section)
facebook.com##[role="complementary"]:style(position: static !important; max-height: unset !important;)
! homepage left sidebar
facebook.com##div[role="navigation"]:style(position: static !important; top: 60px !important;)

! settings heading in left sidebar on stories 
facebook.com##[class="oajrlxb2 g5ia77u1 qu0x051f esr5mh6w e9989ue4 r7d6kgcz rq0escxv nhd2j8a9 nc684nl6 p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso i1ao9s8h esuyzwwr f1sip0of lzcic4wl l9j0dhe7 abiwlrkh p8dawk7l"]:style(left: 25px !important; right: unset !important;)
facebook.com##[role="navigation"] .e5ffyxfx:style(right: unset !important; left: 200px)

! left sidebars for Facebook Watch. Marketplace, Gaming and Groups
facebook.com##[aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)
facebook.com##[aria-label="Marketplace sidebar"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)
facebook.com##[aria-label="Gaming"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)
facebook.com##[aria-label="List of Groups"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)

! user profile timeline bar in mid page
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"]:style(position: static !important;)
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"] .kr9hpln1.b5wmifdl:style(visibility: visible !important; opacity: 1 !important;)
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"] .i9k17dj3:style(transform: translateY(0) !important;)

RedDragonWebDesign commented 4 years ago

I got a chance to test these out today. Tested 1080p, Chrome, Windows 7. Two small things I am seeing so far.

1) Like/Love/etc icons on all pages (main feed, profile pages, etc.) are messed up, they are appearing too far right.

2020-08-21_142345

2) Left sidebar on profile pages is still floating, I recommend we static that if we can.

yourduskquibbles commented 4 years ago

1. Like/Love/etc icons on all pages (main feed, profile pages, etc.) are messed up, they are appearing too far right.

Fixed for me by removing the following

! messes up like button location on homefeed
! facebook.com##[class="oajrlxb2 g5ia77u1 qu0x051f esr5mh6w e9989ue4 r7d6kgcz rq0escxv nhd2j8a9 nc684nl6 p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso i1ao9s8h esuyzwwr f1sip0of lzcic4wl l9j0dhe7 abiwlrkh p8dawk7l"]:style(left: 25px !important; right: unset !important;)

2. Left sidebar on profile pages is still floating, I recommend we static that if we can.

Fixed for me by adding

! Left Sidebar profile
facebook.com##.lpgh02oy:style(position: static !important;)

Full Updated [2020-08-27] list of filters to test:

! https://www.facebook.com
! main header & sub elements simplified filter
facebook.com##div[role="banner"] > div:nth-of-type(-n+4):style(position: absolute !important;)
! Replaced filter below with simplified filter above
! facebook.com##div[role="banner"] > div:nth-of-type(1), div[role="banner"] > div:nth-of-type(2), div[role="banner"] > div:nth-of-type(3), div[role="banner"] > div:nth-of-type(4):style(position: absolute !important;)

! homepage right sidebar (contacts section)
facebook.com##[role="complementary"]:style(position: static !important; max-height: unset !important;)

! homepage left sidebar
facebook.com##div[role="navigation"]:style(position: static !important; top: 60px !important;)

! settings heading in left sidebar on stories 
facebook.com##[role="navigation"] .e5ffyxfx:style(right: unset !important; left: 200px)

! left sidebars for Facebook Watch. Marketplace, Gaming and Groups
facebook.com##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)

! remove horizontal scroll bar caused by facebook.com##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)
facebook.com##html:style(overflow-x: hidden !important; height: unset !important;)

! user profile timeline bar in mid page
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"]:style(position: static !important;)
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"] .kr9hpln1.b5wmifdl:style(visibility: visible !important; opacity: 1 !important;)
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"] .i9k17dj3:style(transform: translateY(0) !important;)

! Left Sidebar profile
facebook.com##.lpgh02oy:style(position: static !important;)

2020-08-27 Edit: Test filters updated to remove horizontal scroll bar caused by facebook.com##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;) and update to @krystian3w simplified filter

RedDragonWebDesign commented 4 years ago

Your updated code looks great so far. No issues at this time.

yourduskquibbles commented 4 years ago

Thanks for feedback! I'll test some more today myself and then add to list. I heard that facebook added a shop tab so need to confirm there are working filters for that part of the site as well.

krystian3w commented 4 years ago

facebook.com##div[role="banner"] > div:nth-of-type(1), div[role="banner"] > div:nth-of-type(2), div[role="banner"] > div:nth-of-type(3), div[role="banner"] > div:nth-of-type(4):style(position: absolute !important;)

simplified:

facebook.com##div[role="banner"] > div:nth-of-type(-n+4):style(position: absolute !important;)

https://css-tricks.com/examples/nth-child-tester/ (also possible test -nth-of-type)

RedDragonWebDesign commented 3 years ago

I've been using your custom Facebook filters for a month or two now. No major issues.

There's a tiny issue where an image doesn't hide completely when in the "scrolled above it" position. It occurs on profile pages, on desktop. Everything looks good when you are "scrolled below it" though.

Scrolled Above It

Scrolled Below It

If you didn't fix this, I think it'd be fine. Quite minor. I think you can probably push these changes and close this ticket soon.

RedDragonWebDesign commented 3 years ago

Search page has a floating pane on the left that we might want to un-float.

To reproduce - Just search a random name, then scroll down.

RedDragonWebDesign commented 3 years ago

Fundraisers page, left side... maybe un-float it, or close the gray gap on the top. - https://www.facebook.com/fundraisers/

Also, click on any fundraiser on the fundraisers page, on PC. Then scroll down. Floating toolbar.

2020-12-10_211314

2020-12-10_211328

RedDragonWebDesign commented 3 years ago

I think Facebook changed their UI. All floating page elements are floating again. : /

yourduskquibbles commented 3 years ago

Hmm, the homepage seems to be fine for me at least still. I will start poking around various pages to see what can be updated.

yourduskquibbles commented 3 years ago

I only had to update one filter (for the left sidebar) from from previous filter set, can you test these updated filters?

! main header & sub elements
facebook.com##div[role="banner"] > div:nth-of-type(-n+4):style(position: absolute !important;)

! homepage right sidebar (contacts section)
facebook.com##[role="complementary"]:style(position: static !important; max-height: unset !important;)

! homepage & various other pages left sidebar (also make the sidebar max height so it doesn't "chop off" after page scroll down on a page with lots of content.) e.g. ['Marketplace'](https://www.facebook.com/marketplace/)
facebook.com##[data-pagelet="page"] div[role="navigation"] > div:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! settings heading in left sidebar on stories 
facebook.com##[role="navigation"] .e5ffyxfx:style(right: unset !important; left: 200px)

! left sidebars for Facebook Watch. Marketplace, Gaming and Groups
facebook.com##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)

! remove horizontal scroll bar caused by facebook.com##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)
facebook.com##html:style(overflow-x: hidden !important; height: unset !important;)

! user profile timeline bar in mid page
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"]:style(position: static !important;)
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"] .kr9hpln1.b5wmifdl:style(visibility: visible !important; opacity: 1 !important;)
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"] .i9k17dj3:style(transform: translateY(0) !important;)

! Left Sidebar profile
facebook.com##.lpgh02oy:style(position: static !important;)

! not sure what these are fixing, they look like they may be the old site design but they were in `My filters` so adding in for now
facebook.com###u_0_13:style(position: absolute !important;)
facebook.com###fbbEmergencyBanner:style(position: static !important;)
facebook.com###u_0_13 > div[style*="float: none; height: 40px;"]

RedDragonWebDesign commented 3 years ago

These worked perfectly. Tested on homepage, profile page, page, group, and event. Thank you for writing these.

RedDragonWebDesign commented 3 years ago

Found an issue with searching. To reproduce, type something into search box, then hit enter.

The left aside is sticky.
Some of the text in the search box gets cut off by the magnifying glass container.

2021-01-20_164036 2021-01-20_164017

yourduskquibbles commented 3 years ago

Will check, I also noticed facebook live looked like it had some leftover sticky elements. I will test and deploy to Web Annoyances Ultralist once I figure your issue and the one I noticed on facebook live

yourduskquibbles commented 3 years ago

@RedDragonWebDesign Can you test these new filter set?

! main header & sub elements
facebook.com##div[role="banner"] > div:nth-of-type(-n+4):style(position: absolute !important;)

! homepage right sidebar (contacts section)
facebook.com##[role="complementary"]:style(position: relative !important; max-height: unset !important;)

! homepage & various other pages left sidebar
facebook.com##[data-pagelet="page"] div[role="navigation"] > div:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! settings heading in left sidebar on stories 
facebook.com##[role="navigation"] .e5ffyxfx:style(right: unset !important; left: 200px)

! left sidebars for Facebook Watch. Marketplace, Gaming and Groups
facebook.com##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)

! remove horizontal scroll bar caused by facebook.com##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)
facebook.com##html:style(overflow-x: hidden !important; height: unset !important;)

! search page sidebar - new filters 2021-01-20
facebook.com##[data-pagelet="page"] div[aria-label="Result Filters"] > div:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! profile page scroll down subheader- new filters 2021-01-20
facebook.com##[role="main"] [data-visualcompletion="ignore-dynamic"][style="padding-left: 8px; padding-right: 8px;"]:upward(4):style(opacity: 0 !important; visibility: hidden !important;)
facebook.com##[role="tablist"]:upward(4):style(transform: translateY(0) !important;)
facebook.com##[role="tablist"]:upward(3):style(opacity: 1 !important; visibility: visible !important;)
facebook.com##[role="tablist"] [aria-haspopup="menu"] div[style="background-color:var(--accent);"]

! user profile timeline bar in mid page
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"]:style(position: static !important;)
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"] .kr9hpln1.b5wmifdl:style(visibility: visible !important; opacity: 1 !important;)
facebook.com##div[role="main"] div.lpgh02oy[style="top: 60px;"] .i9k17dj3:style(transform: translateY(0) !important;)

! Left Sidebar profile
facebook.com##.lpgh02oy:style(position: static !important;)

facebook.com###u_0_13:style(position: absolute !important;)
facebook.com###fbbEmergencyBanner:style(position: static !important;)
facebook.com###u_0_13 > div[style*="float: none; height: 40px;"]

The section for ! profile page scroll down subheader has some risky filters, can you confirm you don't see breakage on pages outside of a profile page? I've tried to target just a profile page with what I can find that is human readable but there's a chance it hides something outside of profile page if it finds any of the following matching conditions outside of profile pages so ideally have a decent amount of testing around various parts of facebook Risky filter targets that could find matches outside of profile pages:

facebook.com##[role="main"] [data-visualcompletion="ignore-dynamic"][style="padding-left: 8px; padding-right: 8px;"]:upward(4):style(opacity: 0 !important; visibility: hidden !important;)
##[role="tablist"]:upward(4):style(transform: translateY(0) !important;)
##[role="tablist"]:upward(3):style(opacity: 1 !important; visibility: visible !important;)
##[role="tablist"] [aria-haspopup="menu"] div[style="background-color:var(--accent);"]

RedDragonWebDesign commented 3 years ago

I did some tests. The floating filters seem to be working well. I did find some whitespace in a couple of spots though.

https://www.facebook.com/groups/feed/

2021-01-21_034718

https://www.facebook.com/thetestinstant

2021-01-21_034632

yourduskquibbles commented 3 years ago

https://www.facebook.com/thetestinstant

This one is caused by facebook.com##[role="main"] [data-visualcompletion="ignore-dynamic"][style="padding-left: 8px; padding-right: 8px;"]:upward(4):style(opacity: 0 !important; visibility: hidden !important;)

Need to figure out a better way to only block the profile page scroll down flashing or just remove this filter and deal with it being a minor annoyance as it obviously breaks other things on facebook. (Example,. Create a new group and the entire "example" box on right side is blocked by this filter.

yourduskquibbles commented 3 years ago

@RedDragonWebDesign I think facebook.com##[role="main"] [data-visualcompletion="ignore-dynamic"][style="padding-left: 8px; padding-right: 8px;"]:upward(4):style(opacity: 0 !important; visibility: hidden !important;) is responsible for both breakages, can you test disabling that one filter and see if the issues you post are resolved?

RedDragonWebDesign commented 3 years ago

Confirmed. Disabling that filter solves the two whitespace issues.

I didn't notice any "flashing", but maybe I don't know what I'm looking for.

yourduskquibbles commented 3 years ago

The flashing is on profile pages and group pages, it's because I'm forcing the subheader links to be displayed with those other 3 filters I added.

Not sure how to remove that mini profile pic that appears

Example Below where my mouse moves to: profiles+groups_subheader

RedDragonWebDesign commented 3 years ago

Ah. Confirmed. I get the flashing.

yourduskquibbles commented 3 years ago

! Facebook redesign floating filters
! Updated 2021-02-05

! https://github.com/yourduskquibbles/webannoyances/issues/234#issuecomment-764189519
! https://www.facebook.com
! main header & sub elements
facebook.com,facebookcorewwwi.onion##div[role="banner"] > div:nth-of-type(-n+4):style(position: absolute !important;)

! [Added 2021-02-05] to ad_placeholders.txt sublist
! remove sponsored box on right sidebar of homepage
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] [role="complementary"] [data-pagelet="RightRail"] > div:not([data-visualcompletion="ignore-dynamic"]) span[aria-label="Advertiser link"]:upward(11)

! [Updated 2021-02-05] 
! Move contacts list (right sidebar) on homepage to top of page after removing sponsored box so aligned with feed and left sidebar
facebook.com,facebookcorewwwi.onion##[role="complementary"]:style(position: relative !important; top: 0 !important; max-height: unset !important;)

! homepage & various other pages left sidebar
! [Updated 2021-02-05] 
! Make left sidebar sticky again on homepage (updated to remove extra div after `[role="navigation"]`) - Updated 2021-02-05
facebook.com,facebookcorewwwi.onion,facebookcorewwwi.onion##[data-pagelet="page"] div[role="navigation"]:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! settings heading in left sidebar on stories 
facebook.com,facebookcorewwwi.onion##[role="navigation"] .e5ffyxfx:style(right: unset !important; left: 200px)

! left sidebars for Facebook Watch. Marketplace, Gaming and Groups
facebook.com,facebookcorewwwi.onion##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)

! remove horizontal scroll bar caused by facebook.com,facebookcorewwwi.onion##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)
facebook.com,facebookcorewwwi.onion##html:style(overflow-x: hidden !important; height: unset !important;)

! search page sidebar
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] div[aria-label="Result Filters"] > div:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! profile page scroll down subheader
facebook.com,facebookcorewwwi.onion##[role="tablist"]:upward(4):style(transform: translateY(0) !important;)
facebook.com,facebookcorewwwi.onion##[role="tablist"]:upward(3):style(opacity: 1 !important; visibility: visible !important;)
facebook.com,facebookcorewwwi.onion##[role="tablist"] [aria-haspopup="menu"] div[style="background-color:var(--accent);"]

! user profile timeline bar in mid page - keep as displayed before scrolling down page
facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"]:style(position: static !important;)
facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"] .kr9hpln1.b5wmifdl:style(visibility: visible !important; opacity: 1 !important;)
facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"] .i9k17dj3:style(transform: translateY(0) !important;)
! user profile timeline bar in mid page - Remove the mini picture  flashing subheader
! profile page scroll down subheader breakage on other facebook pages by overzealous filter - removed 2021-01-21
! ex. 1: https://github.com/yourduskquibbles/webannoyances/issues/234#issuecomment-764718910
! 2021-01-22 Updated filter below
! https://www.facebook.com/sheryl
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(2):has([data-visualcompletion="ignore-dynamic"][style="padding-left: 8px; padding-right: 8px;"])

! Left Sidebar & Middle subnav on profile pages - updated 2021-01-22
! https://www.facebook.com/sheryl
! facebook.com,facebookcorewwwi.onion##.lpgh02oy:style(position: static !important;) updated to more target filter below because breaks places search (https://www.facebook.com/search/places/?q=sheryl%20sandberg)
facebook.com,facebookcorewwwi.onion##.lpgh02oy:has(div[data-pagelet*="ProfileTilesFeed"]):style(position: static !important;)
facebook.com,facebookcorewwwi.onion##.lpgh02oy[style*="top: 56px;"]:style(position: static !important;)

! Floating Places map previously broken by  facebook.com,facebookcorewwwi.onion##.lpgh02oy:style(position: static !important;) - updated 2021-01-22
! https://www.facebook.comn/search/places/?q=sheryl%20sandberg
facebook.com,facebookcorewwwi.onion##.lpgh02oy .leaflet-container:upward(2):style(position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important;)

! Facebook Groups floating subheader elements (similar to Profile subheader but doesn't use the same DOM tree structure) - Added 2021-01-22
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(1) [role="tablist"]:upward(6):style(transform: translateY(0) !important;)
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(1) [role="tablist"]:upward(5):style(opacity: 1 !important; visibility: visible !important;)
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div:nth-of-type(2) [aria-label="Invite"]:upward(4)

! old facebook design elements - sometimes rendered on error pages or somewhere else not updated to 2020 redesign.
facebook.com,facebookcorewwwi.onion###u_0_13:style(position: absolute !important;)
facebook.com,facebookcorewwwi.onion###fbbEmergencyBanner:style(position: static !important;)
facebook.com,facebookcorewwwi.onion###u_0_13 > div[style*="float: none; height: 40px;"]

! facebook sale groups not working as of 2021-01-22 because they get loaded through their own iframe that launches some mix of the old facebook with new facebook
! https://www.facebook.com/salegroups

Only place I've found with floating stuff is Sale Groups because they get loaded through an iframe using the old facebook design.

RedDragonWebDesign commented 3 years ago

Did a quick test of a couple of kinds of pages. All recent issues, including whitespace and floating Cheryl Sandberg, appear fixed. Maybe it's ready to push to production? Thanks for your time and effort on this.

yourduskquibbles commented 3 years ago

Did a quick test of a couple of kinds of pages. All recent issues, including whitespace and floating Cheryl Sandberg, appear fixed. Maybe it's ready to push to production? Thanks for your time and effort on this.

Thanks for testing these, going to add them all now that I am able to handle support issues if they come up after adding them.

yourduskquibbles commented 3 years ago

Couple updates needed that I found -

! [Added 2021-02-05] to ad_placeholders.txt sublist
! remove sponsored box on right sidebar of homepage
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] [role="complementary"] [data-pagelet="RightRail"] > div:not([data-visualcompletion="ignore-dynamic"]) span[aria-label="Advertiser link"]:upward(11)

! [Updated 2021-02-05] 
! Move contacts list (right sidebar) on homepage to top of page after removing sponsored box so aligned with feed and left sidebar by adding top: 0 !important;
facebook.com,facebookcorewwwi.onion##[role="complementary"]:style(position: relative !important; top: 0 !important; max-height: unset !important;)

! [Added 2021-02-05] 
! make left sidebar sticky again on homepage (remove extra div after `[role="navigation"]`)
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] div[role="navigation"]:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

Full Updated filter list as of 2021-02-05 is commented below in https://github.com/yourduskquibbles/webannoyances/issues/234#issuecomment-774381351

yourduskquibbles commented 3 years ago

! Facebook redesign floating filters
! Updated 2021-02-05

! https://github.com/yourduskquibbles/webannoyances/issues/234#issuecomment-764189519
! https://www.facebook.com
! main header & sub elements
facebook.com,facebookcorewwwi.onion##div[role="banner"] > div:nth-of-type(-n+4):style(position: absolute !important;)

! [Added 2021-02-05] to ad_placeholders.txt sublist
! remove sponsored box on right sidebar of homepage
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] [role="complementary"] [data-pagelet="RightRail"] > div:not([data-visualcompletion="ignore-dynamic"]) span[aria-label="Advertiser link"]:upward(11)

! [Updated 2021-02-05] 
! Move contacts list (right sidebar) on homepage to top of page after removing sponsored box so aligned with feed and left sidebar
facebook.com,facebookcorewwwi.onion##[role="complementary"]:style(position: relative !important; top: 0 !important; max-height: unset !important;)

! homepage & various other pages left sidebar
! [Added & Updated 2021-02-05] 
! Filter with extra div Needed for some pages e.g. https://www.facebook.com/fundraisers/
! filter with removed extra div for homepage
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] div[role="navigation"] > div, [data-pagelet="page"] div[role="navigation"]:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! settings heading in left sidebar on stories 
facebook.com,facebookcorewwwi.onion##[role="navigation"] .e5ffyxfx:style(right: unset !important; left: 200px)

! left sidebars for Facebook Watch. Marketplace, Gaming and Groups
facebook.com,facebookcorewwwi.onion##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)

! remove horizontal scroll bar caused by facebook.com,facebookcorewwwi.onion##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)
facebook.com,facebookcorewwwi.onion##html:style(overflow-x: hidden !important; height: unset !important;)

! search page sidebar
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] div[aria-label="Result Filters"] > div:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! profile page scroll down subheader
facebook.com,facebookcorewwwi.onion##[role="tablist"]:upward(4):style(transform: translateY(0) !important;)
facebook.com,facebookcorewwwi.onion##[role="tablist"]:upward(3):style(opacity: 1 !important; visibility: visible !important;)
facebook.com,facebookcorewwwi.onion##[role="tablist"] [aria-haspopup="menu"] div[style="background-color:var(--accent);"]

! user profile timeline bar in mid page - keep as displayed before scrolling down page
facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"]:style(position: static !important;)
facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"] .kr9hpln1.b5wmifdl:style(visibility: visible !important; opacity: 1 !important;)
facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"] .i9k17dj3:style(transform: translateY(0) !important;)
! user profile timeline bar in mid page - Remove the mini picture  flashing subheader
! profile page scroll down subheader breakage on other facebook pages by overzealous filter - removed 2021-01-21
! ex. 1: https://github.com/yourduskquibbles/webannoyances/issues/234#issuecomment-764718910
! 2021-01-22 Updated filter below
! https://www.facebook.com/sheryl
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(2):has([data-visualcompletion="ignore-dynamic"][style="padding-left: 8px; padding-right: 8px;"])

! Left Sidebar & Middle subnav on profile pages - updated 2021-01-22
! https://www.facebook.com/sheryl
! facebook.com,facebookcorewwwi.onion##.lpgh02oy:style(position: static !important;) updated to more target filter below because breaks places search (https://www.facebook.com/search/places/?q=sheryl%20sandberg)
facebook.com,facebookcorewwwi.onion##.lpgh02oy:has(div[data-pagelet*="ProfileTilesFeed"]):style(position: static !important;)
facebook.com,facebookcorewwwi.onion##.lpgh02oy[style*="top: 56px;"]:style(position: static !important;)

! Floating Places map previously broken by  facebook.com,facebookcorewwwi.onion##.lpgh02oy:style(position: static !important;) - updated 2021-01-22
! https://www.facebook.comn/search/places/?q=sheryl%20sandberg
facebook.com,facebookcorewwwi.onion##.lpgh02oy .leaflet-container:upward(2):style(position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important;)

! Facebook Groups floating subheader elements (similar to Profile subheader but doesn't use the same DOM tree structure) - Added 2021-01-22
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(1) [role="tablist"]:upward(6):style(transform: translateY(0) !important;)
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(1) [role="tablist"]:upward(5):style(opacity: 1 !important; visibility: visible !important;)
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div:nth-of-type(2) [aria-label="Invite"]:upward(4)

! old facebook design elements - sometimes rendered on error pages or somewhere else not updated to 2020 redesign.
facebook.com,facebookcorewwwi.onion###u_0_13:style(position: absolute !important;)
facebook.com,facebookcorewwwi.onion###fbbEmergencyBanner:style(position: static !important;)
facebook.com,facebookcorewwwi.onion###u_0_13 > div[style*="float: none; height: 40px;"]

! facebook sale groups not working as of 2021-01-22 because they get loaded through their own iframe that launches some mix of the old facebook with new facebook
! https://www.facebook.com/salegroups

Only place I've found with floating stuff is Sale Groups because they get loaded through an iframe using the old facebook design.

yourduskquibbles commented 3 years ago

I have a couple updates for the left scrollbar to make the display more streamlined and "natural" by having the left sidebar display all the way to the bottom of the page rather than just the bottom of the page before scrolling.

@RedDragonWebDesign Do you mind testing out a couple filters to see if you have other issues anywhee else that I haven't captured. Main things to look for is that the content of any pages is "centered" and that there isn't some wonky behavior. you should just be able to use the current filters from Web Annoyances Ultralist and then add these 4 into My Filters to test.

Filters to add to My Filters to test:

! Start Facebook Test Filters 2021-02-10
! Disable existing left sidebar filter in Web Annoyances Ultralist
facebook.com,facebookcorewwwi.onion#@#[data-pagelet="page"] div[role="navigation"] > div, [data-pagelet="page"] div[role="navigation"]:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! make left sidebar not cut off at 1000px
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] div[role="navigation"] > div, [data-pagelet="page"] div[role="navigation"]:style(position: absolute !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! make main content center on page by setting padding
facebook.com,facebookcorewwwi.onion##div[role="main"][aria-label]:style(padding-left: 360px !important;)

! make homepage center on page by setting padding
facebook.com,facebookcorewwwi.onion##.fjf4s8hc[role="main"]:style(margin: 0 0 0 360px !important;)

! make footer on homepage not part of infinite scroll causing it to never be displayed for more than it takes to load new infinite content
facebook.com,facebookcorewwwi.onion##footer[aria-label="Facebook"]:upward(1):style(position: absolute !important; top: calc(80vh) !important; left: unset !important;)
! End Facebook Test Filters 2021-02-10

RedDragonWebDesign commented 3 years ago

I think these filters will need some attention, my friend.

2021-02-11_044612 2021-02-11_044706 2021-02-11_044936 2021-02-11_044519

yourduskquibbles commented 3 years ago

Thanks, the list as-is is also causing issues with messenger: see https://github.com/AdguardTeam/AdguardFilters/issues/68917 but these filters seem to fix that issue. So need to fix that then work on the wonky stuff you found. Thank you for testing and sceenshots!

yourduskquibbles commented 3 years ago

Full filter list used in Web Annoyances Ultralist as-of 2021-02-11 is below:

! Facebook redesign floating filters
! Updated 2021-02-11

! https://github.com/yourduskquibbles/webannoyances/issues/234#issuecomment-764189519
! https://www.facebook.com
! main header & sub elements
facebook.com,facebookcorewwwi.onion##div[role="banner"] > div:nth-of-type(-n+4):style(position: absolute !important;)

! [Added 2021-02-05] to ad_placeholders.txt sublist
! remove sponsored box on right sidebar of homepage
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] [role="complementary"] [data-pagelet="RightRail"] > div:not([data-visualcompletion="ignore-dynamic"]) span[aria-label="Advertiser link"]:upward(11)

! [Updated 2021-02-05] 
! Move contacts list (right sidebar) on homepage to top of page after removing sponsored box so aligned with feed and left sidebar
facebook.com,facebookcorewwwi.onion##[role="complementary"]:style(position: relative !important; top: 0 !important; max-height: unset !important;)

! homepage & various other pages left sidebar
! Filter with extra div Needed for some pages e.g. https://www.facebook.com/fundraisers/
! filter with removed extra div for homepage
! Start Facebook Test Filters 2021-02-10
! make left sidebar not cut off at 1000px
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] div[role="navigation"] > div, [data-pagelet="page"] div[role="navigation"]:style(position: absolute !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! make main content center on page by setting padding
facebook.com,facebookcorewwwi.onion##div[role="main"][aria-label]:style(padding-left: 360px !important;)

! make homepage center on page by setting padding
facebook.com,facebookcorewwwi.onion##.fjf4s8hc[role="main"]:style(margin: 0 0 0 360px !important;)

! make footer on homepage not part of infinite scroll causing it to never be displayed for more than it takes to load new infinite content
! Disabling for now 2021-02-11
! facebook.com,facebookcorewwwi.onion##footer[aria-label="Facebook"]:upward(1):style(position: absolute !important; top: calc(80vh) !important; left: unset !important;)
! End Facebook Test Filters 2021-02-10

! settings heading in left sidebar on stories 
facebook.com,facebookcorewwwi.onion##[role="navigation"] .e5ffyxfx:style(right: unset !important; left: 200px)

! left sidebars for Facebook Watch. Marketplace, Gaming and Groups
facebook.com,facebookcorewwwi.onion##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)

! remove horizontal scroll bar caused by facebook.com,facebookcorewwwi.onion##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)
facebook.com,facebookcorewwwi.onion##html:style(overflow-x: hidden !important; height: unset !important;)

! search page sidebar
facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] div[aria-label="Result Filters"] > div:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! profile page scroll down subheader
facebook.com,facebookcorewwwi.onion##[role="tablist"]:upward(4):style(transform: translateY(0) !important;)
facebook.com,facebookcorewwwi.onion##[role="tablist"]:upward(3):style(opacity: 1 !important; visibility: visible !important;)
facebook.com,facebookcorewwwi.onion##[role="tablist"] [aria-haspopup="menu"] div[style="background-color:var(--accent);"]

! user profile timeline bar in mid page - keep as displayed before scrolling down page
facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"]:style(position: static !important;)
facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"] .kr9hpln1.b5wmifdl:style(visibility: visible !important; opacity: 1 !important;)
facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"] .i9k17dj3:style(transform: translateY(0) !important;)
! user profile timeline bar in mid page - Remove the mini picture  flashing subheader
! profile page scroll down subheader breakage on other facebook pages by overzealous filter - removed 2021-01-21
! ex. 1: https://github.com/yourduskquibbles/webannoyances/issues/234#issuecomment-764718910
! 2021-01-22 Updated filter below
! https://www.facebook.com/sheryl
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(2):has([data-visualcompletion="ignore-dynamic"][style="padding-left: 8px; padding-right: 8px;"])

! Left Sidebar & Middle subnav on profile pages - updated 2021-01-22
! https://www.facebook.com/sheryl
! facebook.com,facebookcorewwwi.onion##.lpgh02oy:style(position: static !important;) updated to more target filter below because breaks places search (https://www.facebook.com/search/places/?q=sheryl%20sandberg)
facebook.com,facebookcorewwwi.onion##.lpgh02oy:has(div[data-pagelet*="ProfileTilesFeed"]):style(position: static !important;)
facebook.com,facebookcorewwwi.onion##.lpgh02oy[style*="top: 56px;"]:style(position: static !important;)

! Floating Places map previously broken by  facebook.com,facebookcorewwwi.onion##.lpgh02oy:style(position: static !important;) - updated 2021-01-22
! https://www.facebook.comn/search/places/?q=sheryl%20sandberg
facebook.com,facebookcorewwwi.onion##.lpgh02oy .leaflet-container:upward(2):style(position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important;)

! Facebook Groups floating subheader elements (similar to Profile subheader but doesn't use the same DOM tree structure) - Added 2021-01-22
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(1) [role="tablist"]:upward(6):style(transform: translateY(0) !important;)
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(1) [role="tablist"]:upward(5):style(opacity: 1 !important; visibility: visible !important;)
facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div:nth-of-type(2) [aria-label="Invite"]:upward(4)

! old facebook design elements - sometimes rendered on error pages or somewhere else not updated to 2020 redesign.
facebook.com,facebookcorewwwi.onion###u_0_13:style(position: absolute !important;)
facebook.com,facebookcorewwwi.onion###fbbEmergencyBanner:style(position: static !important;)
facebook.com,facebookcorewwwi.onion###u_0_13 > div[style*="float: none; height: 40px;"]

yourduskquibbles commented 3 years ago

I think these filters will need some attention, my friend.

I think these should all be fixed with the following, can you update Web Annoyances Ultralist and then try with these additional filters?

! make main content center on page by setting padding
facebook.com,facebookcorewwwi.onion#@#div[role="main"][aria-label]:style(padding-left: 360px !important;)
facebook.com,facebookcorewwwi.onion##div[role="main"][aria-label]:not([aria-label="Search Results"]):style(padding-left: 360px !important;)

! make footer on homepage not part of infinite scroll causing it to never be displayed for more than it takes to load new infinite content
facebook.com,facebookcorewwwi.onion##footer[aria-label="Facebook"]:upward(1):style(position: absolute !important; top: calc(83vh) !important; left: unset !important; padding-top: 20px !important;)

! disable scrolling on profile pic expand
facebook.com,facebookcorewwwi.onion##.gitj76qy:style(max-height: calc(99vh - var(--header-height)) !important;)

yourduskquibbles commented 3 years ago

Updated list of Facebok filters in Web Annoyances Ultralist as of 2021-02-12

Last Update: https://github.com/yourduskquibbles/webannoyances/commit/1b4c98a02b4a8b83949aa2560ee8c94e696ecf42

! Facebook redesign floating filters
! Updated 2021-02-12

! https://github.com/yourduskquibbles/webannoyances/issues/234#issuecomment-764189519
! https://www.facebook.com
! main header & sub elements
!!! facebook.com,facebookcorewwwi.onion##div[role="banner"] > div:nth-of-type(-n+4):style(position: absolute !important;)

! [Added 2021-02-05] to ad_placeholders.txt sublist
! remove sponsored box on right sidebar of homepage
!!! facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] [role="complementary"] [data-pagelet="RightRail"] > div:not([data-visualcompletion="ignore-dynamic"]) span[aria-label="Advertiser link"]:upward(11)

! [Updated 2021-02-05] 
! Move contacts list (right sidebar) on homepage to top of page after removing sponsored box so aligned with feed and left sidebar
!!! facebook.com,facebookcorewwwi.onion##[role="complementary"]:style(position: relative !important; top: 0 !important; max-height: unset !important;)

! homepage & various other pages left sidebar
! Filter with extra div Needed for some pages e.g. https://www.facebook.com/fundraisers/
! make left sidebar not cut off at 1000px
!!! facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] div[role="navigation"] > div, [data-pagelet="page"] div[role="navigation"]:style(position: absolute !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! [Updated 2021-02-12]
! make main content center on page by setting padding
!!! facebook.com,facebookcorewwwi.onion##div[role="main"][aria-label]:not([aria-label="Search Results"]):style(padding-left: 360px !important;)

! [Added 2021-02-12]
! make footer on homepage not part of infinite scroll causing it to never be displayed for more than it takes to load new infinite content
!!! facebook.com,facebookcorewwwi.onion##footer[aria-label="Facebook"]:upward(1):style(position: absolute !important; top: calc(83vh) !important; left: unset !important; padding-top: 20px !important;)

! [Added 2021-02-12]
! disable scrolling on profile pic expand
!!! facebook.com,facebookcorewwwi.onion##.gitj76qy:style(max-height: calc(99vh - var(--header-height)) !important;)

! make homepage center on page by setting padding
!!! facebook.com,facebookcorewwwi.onion##.fjf4s8hc[role="main"]:style(margin: 0 0 0 360px !important;)

! settings heading in left sidebar on stories 
!!! facebook.com,facebookcorewwwi.onion##[role="navigation"] .e5ffyxfx:style(right: unset !important; left: 200px)

! left sidebars for Facebook Watch. Marketplace, Gaming and Groups
!!! facebook.com,facebookcorewwwi.onion##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)

! remove horizontal scroll bar caused by facebook.com,facebookcorewwwi.onion##[aria-label="Gaming"][role="navigation"] > div, [aria-label="List of Groups"][role="navigation"] > div, [aria-label="Marketplace sidebar"][role="navigation"] > div, [aria-label="Shortcuts within Facebook Watch"][role="navigation"] > div:style(position: static !important; max-height: unset !important; min-height: unset !important;)
!!! facebook.com,facebookcorewwwi.onion##html:style(overflow-x: hidden !important; height: unset !important;)

! search page sidebar
!!! facebook.com,facebookcorewwwi.onion##[data-pagelet="page"] div[aria-label="Result Filters"] > div:style(position: relative !important; top: 0 !important; max-height: 100% !important; height: 100% !important;)

! profile page scroll down subheader
!!! facebook.com,facebookcorewwwi.onion##[role="tablist"]:upward(4):style(transform: translateY(0) !important;)
!!! facebook.com,facebookcorewwwi.onion##[role="tablist"]:upward(3):style(opacity: 1 !important; visibility: visible !important;)
!!! facebook.com,facebookcorewwwi.onion##[role="tablist"] [aria-haspopup="menu"] div[style="background-color:var(--accent);"]

! user profile timeline bar in mid page - keep as displayed before scrolling down page
!!! facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"]:style(position: static !important;)
!!! facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"] .kr9hpln1.b5wmifdl:style(visibility: visible !important; opacity: 1 !important;)
!!! facebook.com,facebookcorewwwi.onion##div[role="main"] div.lpgh02oy[style="top: 60px;"] .i9k17dj3:style(transform: translateY(0) !important;)
! user profile timeline bar in mid page - Remove the mini picture  flashing subheader
! profile page scroll down subheader breakage on other facebook pages by overzealous filter - removed 2021-01-21
! ex. 1: https://github.com/yourduskquibbles/webannoyances/issues/234#issuecomment-764718910
! 2021-01-22 Updated filter below
! https://www.facebook.com/sheryl
!!! facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(2):has([data-visualcompletion="ignore-dynamic"][style="padding-left: 8px; padding-right: 8px;"])

! Left Sidebar & Middle subnav on profile pages - updated 2021-01-22
! https://www.facebook.com/sheryl
! facebook.com,facebookcorewwwi.onion##.lpgh02oy:style(position: static !important;) updated to more target filter below because breaks places search (https://www.facebook.com/search/places/?q=sheryl%20sandberg)
!!! facebook.com,facebookcorewwwi.onion##.lpgh02oy:has(div[data-pagelet*="ProfileTilesFeed"]):style(position: static !important;)
!!! facebook.com,facebookcorewwwi.onion##.lpgh02oy[style*="top: 56px;"]:style(position: static !important;)

! [ Updated 2021-02-21]
! Floating Places map previously broken by  facebook.com,facebookcorewwwi.onion##.lpgh02oy:style(position: static !important;)
! https://www.facebook.com/search/places/?q=sheryl%20sandberg
!!! facebook.com,facebookcorewwwi.onion##[aria-label="Search Results"] .lpgh02oy .leaflet-container:upward(2):style(position: sticky  !important; top: 0 !important; bottom: unset !important; left: unset !important;)

! Facebook Groups floating subheader elements (similar to Profile subheader but doesn't use the same DOM tree structure) - Added 2021-01-22
!!! facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(1) [role="tablist"]:upward(6):style(transform: translateY(0) !important;)
!!! facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div > div > div > div:nth-of-type(1) [role="tablist"]:upward(5):style(opacity: 1 !important; visibility: visible !important;)
!!! facebook.com,facebookcorewwwi.onion##[role="main"] div[style*="top: 56px;"] > div > div > div > div:nth-of-type(2) [aria-label="Invite"]:upward(4)

! old facebook design elements - sometimes rendered on error pages or somewhere else not updated to 2020 redesign.
!!! facebook.com,facebookcorewwwi.onion###u_0_13:style(position: absolute !important;)
!!! facebook.com,facebookcorewwwi.onion###fbbEmergencyBanner:style(position: static !important;)
!!! facebook.com,facebookcorewwwi.onion###u_0_13 > div[style*="float: none; height: 40px;"]

! End Facebook Filters as of 2021-02-12

yourduskquibbles commented 3 years ago

One more test filter if you'd like to test, this is for promoted posts in feed... may only work for English/US though. Not sure if I will deploy this either as Facebook likes to switch things up if they know the ads are getting hidden by lists.

! Sponsored in feed - Not added as of [2021-02-13]
facebook.com,facebookcorewwwi.onion##[data-pagelet*="FeedUnit"]:has([aria-label="Sponsored"][href])

Dyras commented 3 years ago

Not sure if this is the right place, but I'm experiencing problems using this filter while using Firefox w/ AdNauseam (Not uBlock) on Facebook Messenger. https://www.facebook.com/messages/t/

A large area is black if the Firefox window is small enough. Typically happens when I use Facebook Messenger on half the screen, and YouTube on the other half.

Picture: https://i.vgy.me/lCDI1u.png

krystian3w commented 3 years ago

Maybe glitches fixed in uBO 1.29.1+: https://github.com/dhowe/AdNauseam/releases = signed version by Moz://a is old.

RedDragonWebDesign commented 3 years ago

Two out of four of the ones I reported a couple of posts ago are fixed. Here are the two still not working for me.

107638987-2aa55480-6c25-11eb-8c24-8f3c67e041b9 107638994-2bd68180-6c25-11eb-900d-c708ba2a8365

Additionally, the sponsored post filter did not work. Might not be worth fixing that one. The number of nested spans in these sponsored posts is a bit ridiculous. I have the outerHTML for the FeedUnit if you need it though.

2021-02-16_183240

WorldIRC commented 3 years ago

Noticing that Facebook.com isn't loading groups properly when Web Annoyances Ultralist is enabled. Not sure which specific rule is causing the issue.

RedDragonWebDesign commented 3 years ago

Couple more to report.

On PC, viewing a group post and scrolling down causes the group name and icon to appear in a weird spot. Test page: https://www.facebook.com/groups/2716117551960335
On PC, on the home feed, if you narrow the viewport, there is too much padding on the left.

2021-02-25_033327 2021-02-25_033402

yourduskquibbles commented 3 years ago

I am going to unpublish from Web Annoyances Ultralist for now, I won't have time to fix for at least a week so don't want anyone to have degraded experience until I am able to properly test and validate updated filters.

RedDragonWebDesign commented 3 years ago

https://www.facebook.com/messages/t/ has a whitespace issue.

2021-03-11_180922