Share, Clip, Thanks and Save buttons unaffected when selecting Icon Only

[NoaSkyrider]

As I said, the Share, Clip, Thanks and Save buttons are unaffected when selecting Icon Only. The Download, Like and Dislike buttons etc. are affect as normal.

With Icon Only disabled:

With Icon Only enabled:

I do use a few other extensions for YouTube, including Enhancer for YouTuber and Tweaks for YouTube, but disabling them has no effect.

Having this feature work would be preferable.

[ADTmux]

Hey, I would like to work on this.

[ImprovedTube]

Hi & thanks! @NoaSkyrider @ADTmux

youtube/js&css/extension/www.youtube.com/appearance/details/details.css

Lines 9 to 90 in 04a604b

	YouTube's Detail Buttons
	--------------------------------------------------------------*/
	html[it-youtubeDetailButtons='hide_labels'] #subscribe-button .cbox,
	html[it-youtubeDetailButtons='hide_labels'] #menu ytd-button-renderer div:nth-child(2) {visibility:hidden}
	html[it-youtubeDetailButtons='half_transparent'] #subscribe-button button,
	html[it-youtubeDetailButtons='half_transparent'] #menu button {opacity:0.5;}
	html[it-youtubeDetailButtons='transparent_background'] #subscribe-button button,
	html[it-youtubeDetailButtons='transparent_background'] #menu button {background-color:rgba(0, 0, 0, 0.2) !important;}
	html[it-youtubeDetailButtons='transparent_background'] #subscribe-button button {color:#111 !important;}
	/*------SHOW my DISLIKE in RED------*/
	html[it-red-dislike-button='true'] #top-level-buttons-computed #segmented-dislike-button ytd-toggle-button-renderer *[aria-pressed='true'] yt-icon {color: #f02200 !important;}
	/*------SUBSCRIBE BUTTON------*/
	html[it-subscribe='grey'] #subscribe-button button {background-color: #DDD !important; color:#111 !important;}
	html[it-subscribe='transparent'] #subscribe-button button {background-color:rgba(0, 0, 0, 0.4) !important; color:#111 !important;}
	/* DISPLAY: NONE: */
	html[it-subscribe='remove_label'] #subscribe-button button .yt-spec-button-shape-next__button-text-content,
	html[it-subscribe='hidden'] #subscribe-button,
	html[it-youtubeDetailButtons='remove_labels'] #menu ytd-button-renderer div:nth-child(2),
	html[it-youtubeDetailButtons='remove_labels'] #menu ytd-button-renderer .cbox,
	html[it-youtubeDetailButtons='remove_labels'] #subscribe-button .cbox,
	html[it-youtubeDetailButtons='remove'] #menu button,
	html[it-youtubeDetailButtons='remove'] #subscribe-button button,
	html[it-youtubeDetailButtons='remove_icons'] #menu button div:first-child,
	/*------HIDE LIKE BUTTON------*/
	html[it-likes='hidden'] like-button-view-model,
	html[it-likes='icons_only'] like-button-view-model .yt-spec-button-shape-next__button-text-content,
	/*------HIDE DISLIKE BUTTON------*/
	html[it-hide-dislike-button='hidden'] dislike-button-view-model,
	html[it-hide-dislike-button='icons_only'] dislike-button-view-model .yt-spec-button-shape-next__button-text-content,
	/*previous:*/
	html[it-likes='hidden'] #top-level-buttons-computed #segmented-like-button ytd-toggle-button-renderer,
	html[it-likes='icons_only'] #top-level-buttons-computed #segmented-like-button ytd-toggle-button-renderer div.cbox,
	html[it-likes='icons_only'] #top-level-buttons-computed #segmented-like-button ytd-toggle-button-renderer yt-animated-rolling-number,
	html[it-likes='icons_only'] #top-level-buttons-computed #segmented-like-button ytd-toggle-button-renderer .yt-spec-button-shape-next__button-text-content,
	html[it-hide-dislike-button='hidden'] #top-level-buttons-computed #segmented-dislike-button ytd-toggle-button-renderer,
	html[it-hide-dislike-button='icons_only'] #top-level-buttons-computed #segmented-dislike-button ytd-toggle-button-renderer div.cbox,
	html[it-hide-dislike-button='icons_only'] #top-level-buttons-computed #segmented-dislike-button ytd-toggle-button-renderer yt-animated-rolling-number,
	html[it-hide-dislike-button='icons_only'] #top-level-buttons-computed #segmented-dislike-button ytd-toggle-button-renderer .yt-spec-button-shape-next__button-text-content,
	/*------# HIDE SHARE BUTTON------*/
	html[it-hide-share-button='hidden'] #menu button:has(svg path[d^="M15 5.63 20.66"]),
	html[it-hide-share-button='hidden'] #flexible-item-buttons button:has(svg path[d^="M15 5.63 20.66"]),
	html[it-hide-share-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M15 5.63 20.66"]) div:nth-child(2),
	html[it-hide-share-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M15 5.63 20.66"]) .cbox,
	/*------# HIDE DOWNLOAD BUTTON------*/
	html[it-hide-download-button='hidden'] #menu button:has(svg path[d^="M17 18v1H6v-1h11"]),
	html[it-hide-download-button='hidden'] #flexible-item-buttons button:has(svg path[d^="M17 18v1H6v-1h11"]),
	html[it-hide-download-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M17 18v1H6v-1h11"]) div:nth-child(2),
	html[it-hide-download-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M17 18v1H6v-1h11"]) .cbox,
	/*------# HIDE THANKS BUTTON------*/
	html[it-hide-thanks-button='hidden'] #menu button:has(svg path[d^="M11 17h2v-1h1c.55 0"]),
	html[it-hide-thanks-button='hidden'] #flexible-item-buttons button:has(svg path[d^="M11 17h2v-1h1c.55 0"]),
	html[it-hide-thanks-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M11 17h2v-1h1c.55 0"]) div:nth-child(2),
	html[it-hide-thanks-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M11 17h2v-1h1c.55 0"]) .cbox,
	/*------# HIDE CLIP BUTTON------*/
	html[it-hide-clip-button='hidden'] #menu button:has(svg path[d^="M8 7c0 .55-.45 1-1"]),
	html[it-hide-clip-button='hidden'] #flexible-item-buttons button:has(svg path[d^="M8 7c0 .55-.45 1-1"]),
	html[it-hide-clip-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M8 7c0 .55-.45 1-1"]) div:nth-child(2),
	html[it-hide-clip-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M8 7c0 .55-.45 1-1"]) .cbox,
	/*------# HIDE SAVE BUTTON------*/
	html[it-hide-save-button='hidden'] #menu button:has(svg path[d^="M22 13h-4v4h-2v-4h"]),
	html[it-hide-save-button='hidden'] #flexible-item-buttons button:has(svg path[d^="M22 13h-4v4h-2v-4h"]),
	html[it-hide-save-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M22 13h-4v4h-2v-4h"]) div:nth-child(2),
	html[it-hide-save-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M22 13h-4v4h-2v-4h"]) .cbox,
	/*------HIDE REPORT BUTTON------*/
	html[it-hide-report-button='true'] #top-level-buttons-computed ytd-button-renderer#Report-button,
	html[it-hide-report-button='true'] #menu button:has(svg path[d^="m13.18 4 .24 1.2.16.8H19v7h-5.18l-.24-1.2-.16-.8H6V4h7.18M14"]),
	html[it-hide-report-button='true'] #flexible-item-buttons button:has(svg path[d^="m13.18 4 .24 1.2.16.8H19v7h-5.18l-.24-1.2-.16-.8H6V4h7.18M14"]),
	/*------HIDE MORE BUTTON------*/
	html[it-hide-more-button='true'] #menu yt-button-shape#button-shape,
	html[it-hide-more-button='true'] #menu button:has(svg path[d^="M7.5,12c0,0.83-0.67,1.5-1.5"]),
	html[it-hide-more-button='true'] #flexible-item-buttons button:has(svg path[d^="M7.5,12c0,0.83-0.67,1.5-1.5"]),
	/*------# HIDE THANKS BUTTON------*/
	html[it-hide-thanks-button='hidden'] #flexible-item-buttons ytd-button-renderer#Thanks-button,
	html[it-hide-thanks-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Thanks-button div.cbox,
	/*------# HIDE CLIP BUTTON------*/
	html[it-hide-clip-button='hidden'] #flexible-item-buttons ytd-button-renderer#Clip-button,
	html[it-hide-clip-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Clip-button div.cbox,
	/*------# HIDE SAVE BUTTON------*/
	html[it-hide-save-button='hidden'] #flexible-item-buttons ytd-button-renderer#Save-button,
	html[it-hide-save-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Save-button div.cbox
	/*=================================*/
	{display: none;}

optional JS:

youtube/js&css/web-accessible/www.youtube.com/appearance.js

Lines 425 to 437 in 04a604b

	HIDE DETAIL BUTTON
	------------------------------------------------------------------------------*/
	ImprovedTube.hideDetailButton = function (el) {
	if (el.length === 4) {
	el[3].setAttribute("id", "Save-button");
	el[2].setAttribute("id", "Clip-button");
	el[1].setAttribute("id", "Thanks-button");
	}
	else if (el.length === 3) {
	el[2].setAttribute("id", "Save-button");
	el[1].setAttribute("id", "Clip-button");
	}
	};

called at page-load or by our mutation observer:

youtube/js&css/web-accessible/functions.js

Lines 135 to 138 in 04a604b

	} else if (name === 'YTD-MENU-RENDERER' && node.classList.contains('ytd-video-primary-info-renderer')) {
	if (document.documentElement.dataset.pageType === 'video') {
	this.hideDetailButton(node.querySelector('#flexible-item-buttons').children);
	}

[ImprovedTube]

Fix:

• details.css:
• search&replace-all:
  • ytd-button-renderer with button
  • .cbox with .yt-spec-button-shape-next__button-text-content

---

Consider commenting out: functions.js#L135-L138 (,which enables appearance.js#L425-L437(, which enabled details.css/#L80-L88)) (since we have many users, so the electrons add up a bit) as this is just a backup solution by now (thanks again @dodieboy!), while the icon's SVG pathes might stay similar enough (and ultimately we could automatically keep a list of the SVG pathes up to date, as an online file and include that in the extension without waiting for approval as for JS updates)

[ADTmux]

Hey @ImprovedTube , I'm curious to know why that works.

[ImprovedTube]

hi! @ADTmux
Youtube changed the old element name and class. Since we use the :has selector (not the most efficient), it doesn't matter if the new replacement is exactly a parent or a grand-parent of the identifying SVG.

---

and to make more sure, if the old CSS still works or still possibly is required for some setups from youtube, we can set some youtube config manually in the browser console:

yt.config_.EXPERIMENT_FLAGS.web_segmented_like_dislike_button = false; 
yt.config_.EXPERIMENT_FLAGS.web_update_flexible_buttons_after_renderidom = false; 
yt.config_.EXPERIMENT_FLAGS.web_button_rework  = false; 
yt.config_.EXPERIMENT_FLAGS.web_button_rework_with_live  = false; 
yt.config_.EXPERIMENT_FLAGS.web_modern_buttons = false; 
yt.config_.EXPERIMENT_FLAGS.web_modern_buttons_bl_survey = false; 
yt.config_.EXPERIMENT_FLAGS.web_modern_buttons_bl_survey = web_modern_chips;

---

btw, there are 850+ such values, which will help with several feature requests or bug reports
#1549 (comment)

so we should make UI and documentation for them:
#2116 (comment)
https://docs.google.com/spreadsheets/d/1GidvMduxTl6jXpDCKj-sOPg8KSqDfCYO2OlCdBADaSI/edit#gid=0

[NoaSkyrider]

I'm afraid I don't know what I'm supposed to access to apply this fix. Apologies, I'm new to this.

[ImprovedTube]

and to make more sure, if the old CSS still works or still possibly is required for some setups from youtube, we can set some youtube config manually in the browser console:

Fix will be published
And you can try the following quickly so we can make sure, if youtube still gives the old buttons @NoaSkyrider

ublock:
chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/dashboard.html#1p-filters.html

www.youtube.com##+js(set, yt.config_.EXPERIMENT_FLAGS.web_update_flexible_buttons_after_renderidom, false)
www.youtube.com##+js(set, yt.config_.EXPERIMENT_FLAGS.web_button_rework, false)
www.youtube.com##+js(set, yt.config_.EXPERIMENT_FLAGS.web_button_rework_with_live, false)
www.youtube.com##+js(set, yt.config_.EXPERIMENT_FLAGS.web_modern_buttons, false)
www.youtube.com##+js(set, yt.config_.EXPERIMENT_FLAGS.web_modern_buttons_bl_survey, false)
www.youtube.com##+js(set, yt.config_.EXPERIMENT_FLAGS.web_modern_buttons_bl_survey, web_modern_chips)

[NoaSkyrider]

Unfortunately, it did nothing other than make the text in the Download button full caps, leaving the other icons unaffected, and persists even on hidden.
Icons Only:

Hidden: