Update core.js limit localstorage writes to only essential ones #2180

raszpl · 2024-04-10T19:36:02Z

currently we are writing on every page load, and its my fault :(

ImprovedTube · 2024-04-11T08:25:22Z

hi! @raszpl this renews localStorage, if it was lost and makes the feature work again the next time. (So it need not be before improvedTube.init() either.

And instead of local storage, the lines after L172 could add a combined variable to chrome.local.storage, called HTMLMediaElementSettingsCodecFpsEtc
So that the feature (L72-L101) can receive that later from content scripts. chrome.storage.local.get('HTMLMediaElementSettingsCodecFpsEtc', function (result) { ...
Dont depend on LocalStorage to work in Incognito mode (Volume shortcut & normalization & Pixel positions: Improvedtube Icon & Custom Mini Player) #1408 (comment)

(Either way the feature can run async.)

btw, loading the storage object could be faster chrome.storage.local.get(null), before processing/setting the <html>-attributes one by one at

youtube/js&css/extension/core.js

Lines 304 to 325 in 87aa7e4

 extension.storage.load = function (callback) { 

 chrome.storage.local.get(function (items) { 

 for (var key in items) { 

 var value = items[key]; 

 extension.storage.data[key] = value; 

 document.documentElement.setAttribute('it-' + key.replace(/_/g, '-'), value); 

 } 

 extension.events.trigger('storage-loaded'); 

 extension.messages.send({ 

 action: 'storage-loaded', 

 storage: items 

 }); 

 if (callback) { 

 callback(extension.storage.data); 

 } 

 }); 

 };

raszpl · 2024-04-11T18:11:26Z

hi! @raszpl this renews localStorage, if it was lost and makes the feature work again the next time. (So it need not be before improvedTube.init() either.

I know, I wrote this code :P c725cfd
but I did it poorly, this patch makes it write less.

And instead of local storage, the lines after L172 add a combined variable to chrome.local.storage, called HTMLMediaElementSettingsCodecFpsEtc
So that the feature (L72-L101) can receive that from content scripts or run directly in a content script. chrome.storage.local.get('HTMLMediaElementSettingsCodecFpsEtc', function (result) { ...

are you commenting on some internal version or is this a wishlist? :)
cant use chrome.storage.local.get in content script injected into YT, its only available in private side of extension
cant override window.MediaSource.isTypeSupported from extension/core.js its a wrong execution context
we would have to inject javascript tag here to override MediaSource

btw, loading the storage object could be faster chrome.storage.local.get(null), before processing/setting the <html>-attributes one by one at

youtube/js&css/extension/core.js

Lines 304 to 325 in 87aa7e4

extension.storage.load = function (callback) {

chrome.storage.local.get(function (items) {

for (var key in items) {

var value = items[key];

extension.storage.data[key] = value;

document.documentElement.setAttribute('it-' + key.replace(/_/g, '-'), value);

}

extension.events.trigger('storage-loaded');

extension.messages.send({

action: 'storage-loaded',

storage: items

});

if (callback) {

callback(extension.storage.data);

}

});

};

I mean, sure

extension.storage.load = function (callback) {
	chrome.storage.local.get(function (items) {
		extension.storage.data = items;

		extension.events.trigger('storage-loaded');
		extension.messages.send({
			action: 'storage-loaded',
			storage: items
		});

		for (const key in items) {
			document.documentElement.setAttribute('it-' + key.replace(/_/g, '-'), items[key]);
		}

		if (callback) {
			callback(extension.storage.data);
		}
	});
};

do we really need to pollute html tag with whole config setAttribute('it-' + key.replace(/_/g, '-'), items[key])? Menu has more elegant version of this setting few from a list

youtube/menu/functions.js

Lines 14 to 39 in 65bfc33

 var attributes = { 

 theme: true, 

 improvedtube_home: true, 

 title_version: true, 

 it_general: true, 

 it_appearance: true, 

 it_themes: true, 

 it_player: true, 

 it_playlist: true, 

 it_channel: true, 

 it_shortcuts: true, 

 it_blocklist: true, 

 it_analyzer: true, 

 layer_animation_scale: false 

 }; 

 for (var attribute in attributes) { 

 var value = satus.storage.get(attribute); 

 if (attribute === 'improvedtube_home') { 

 attribute = 'home-style'; 

 } 

 if (satus.isset(value)) { 

 extension.skeleton.rendered.setAttribute(attribute.replace('it_', '').replace(/_/g, '-'), value); 

 }

ImprovedTube · 2024-04-11T20:52:43Z

I wrote this code :P

yes❤️. One day another reader might join us.

wishlist

missed the word "could"

I mean, sure
extension.storage.load = function
thanks! we can add another message/event then html-Attributes-Added. (As a comment, if nothing in ImprovedTube.init() web-accessible/init.js#L84-L113 doesnt depends on any CSS)

do we really need to pollute html tag with whole config

convenient/special, because it works before the DOM is loaded. Could start with the many appearance & cleaning features (compare UnHook for YouTube)

do we really need to pollute html tag with whole config

could of course pre-process well
(and #1685)

cant use chrome.storage.local.get in content script injected into YT, its only available in private side of extension
cant override window.MediaSource.isTypeSupported from extension/core.js its a wrong execution context
we would have to inject javascript tag here to override MediaSource

*Can use message for both, bi-directionally. So the feature runs async.
( if the speed is required for storage-loaded)

raszpl · 2024-04-21T03:08:40Z

do we really need to pollute html tag with whole config

convenient/special, because it works before the DOM is loaded.

but does anything use it? :) So I decided to check. There is this:

pathname

youtube/js&css/extension/www.youtube.com/general/general.js

Line 428 in 925baa8

if (extension.storage.get('track_watched_videos') === true && document.documentElement.getAttribute('it-pathname').indexOf('/watch') === 0) {

useless use, should be replaced with straight location.pathname in this spot. Sadly still used by CSS for shorts rules, so pathname stays
player-size

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

Line 815 in 925baa8

let isFTW = document.querySelector("html").getAttribute("it-player-size") === "fit_to_window"

toggle, and also used by CSS, stays

Thats all for js code, rest are pure CSS uses:

theme
player-crop-chapter-titles
ads
mini-player-cursor
player-fit-to-win-button
channel-hide-featured-content
schedule

Thats all extension ever uses, so we can go:

		let htmlAttributes = [
			"pathname",
			"player-size",
			"theme",
			"player-crop-chapter-titles",
			"ads",
			"mini-player-cursor",
			"player-fit-to-win-button",
			"channel-hide-featured-content",
			"schedule"
		];

		for (const key in items) {
			if (htmlAttributes.includes(key)) {
				document.documentElement.setAttribute('it-' + key.replace(/_/g, '-'), items[key]);
			}
		}

*Can use message for both, bi-directionally. So the feature runs async.

thats how it was done previously, messages were too slow

raszpl · 2024-04-21T03:29:03Z

correction, I forgot CSS is in multiple small files, there is more used by CSS. Whole list:
"activated",
"ads",
"always-show-progress-bar",
"bluelight",
"channel-compact-theme",
"channel-hide-featured-content",
"collapse-of-subscription-sections",
"columns",
"comments",
"comments-sidebar",
"comments-sidebar-left",
"comments-sidebar-simple",
"compactSpacing",
"description",
"embeddedHidePauseOverlay",
"embeddedHideShare",
"embeddedHideYoutubeLogo",
"header-hide-country-code",
"header-hide-right-buttons",
"header-improve-logo",
"header-position",
"header-transparent",
"hide-animated-thumbnails",
"hide-author-avatars",
"hide-clip-button",
"hide-comments-count",
"hide-date",
"hide-details",
"hide-dislike-button",
"hide-download-button",
"hide-footer",
"hide-gradient-bottom",
"hide-more-button",
"hide-playlist",
"hide-report-button",
"hide-save-button",
"hide-scroll-for-details",
"hide-share-button",
"hide-shorts-remixing",
"hide-sidebar",
"hide-thanks-button",
"hide-thumbnail-overlay",
"hide-video-title-fullScreen",
"hide-views-count",
"hide-voice-search-button",
"improvedtube-search",
"likes",
"livechat",
"mini-player-cursor",
"no-page-margin",
"pathnam",
"pathname",
"player-autoplay-button",
"player-color",
"player-crop-chapter-titles",
"player-fit-to-win-button",
"player-hide-annotations",
"player-hide-cards",
"player-hide-endscreen",
"player-hide-skip-overlay",
"player-miniplayer-button",
"player-next-button",
"player-play-button",
"player-previous-button",
"player-remote-button",
"player-screen-button",
"player-settings-button",
"player-show-cards-on-mouse-hover",
"player-size",
"player-size",
"player-subtitles-button",
"player-transparent-background",
"player-view-button",
"player-volume-button",
"red-dislike-button",
"related-videos",
"remove-black-bars",
"remove-history-shorts",
"remove-home-page-shorts",
"remove-related-search-results",
"remove-shorts-reel-search-results",
"remove-subscriptions-shorts",
"remove-trending-shorts",
"schedule",
"scroll-bar",
"scroll-to-top",
"search-focus",
"sidebar-left",
"squared-user-images",
"subscribe",
"theme",
"thumbnails-hide",
"thumbnails-right",
"transcript",
"youtube-home-page",
"youtubeDetailButtons"

raszpl · 2024-04-21T04:32:23Z

"no-page-margin", "pathnam", "pathname", "player-autoplay-button"

well, would you look at that, fished out a bug!

youtube/js&css/extension/www.youtube.com/general/general.css

Line 68 in 925baa8

 html[it-pathnam='/feed/history'][it-remove-history-shorts="true"] ytd-reel-shelf-renderer span#title:contains("Shorts"), 

fix: #2196
But pathname is not even a setting, its initialized in init.js

youtube/js&css/extension/init.js

Line 6 in 925baa8

document.documentElement.setAttribute('it-pathname', location.pathname);

so it will never be matched here when loading settings, can remove it from my list :) Wonder if any other items on a list are also like that.

With #2197 and my extension config during chrome.storage.local.get the only Attribute injected to HTML tag is theme, much less pollution and less blocking.

raszpl · 2024-04-21T07:37:36Z

ok, so I tried really hard to make injection from /extension/core work, but it looks like chrome.storage.local.get timing fluctuates, around 50% of the time it runs really fast, other times it returns good 800ms after DOMContentLoaded

		let MediaElementOverride = document.createElement('script');
		MediaElementOverride.type = "text/javascript";
		let codec = {block_vp9:items['block_vp9'], block_h264:items['block_h264'], block_av1:items['block_av1']},
			player_60fps = items['player_60fps'] ? true : false;
/* original:
	function overwrite(self, callback, mime) {
		let atlas = {block_vp9:'vp9|vp09', block_h264:'avc1', block_av1:'av01'},
			store = !ImprovedTube?.storage ? XXXX : ImprovedTube.storage,
			codec = Object.keys(atlas).reduce(function (all, key) {
				return store[key] ? ((all?all+'|':'') + atlas[key]) : all}, ''),
			player_60fps = !ImprovedTube?.storage ? YYYY : ImprovedTube.storage.player_60fps;

		if (codec) {
			var re = new RegExp(codec);
			// /webm|vp8|vp9|av01/
			if (re.test(mime)) return '';
		}
		if (player_60fps) {
			var match = /framerate=(\d+)/.exec(mime);
			if (match && match[1] > 30) return '';
		}
		return callback.call(self, mime);
	};

	if (window.MediaSource) {
		let isTypeSupported = window.MediaSource.isTypeSupported;
		window.MediaSource.isTypeSupported = function (mime) {
			return overwrite(this, isTypeSupported, mime);
		}
	}
	let canPlayType = HTMLMediaElement.prototype.canPlayType;
	HTMLMediaElement.prototype.canPlayType = function (mime) {
		return overwrite(this, canPlayType, mime);
	}
*/
		MediaElementOverride.innerHTML = "{console.log('injection'); function overwrite(self, callback, mime) {let atlas = {block_vp9:'vp9|vp09', block_h264:'avc1', block_av1:'av01'}, store = !ImprovedTube?.storage ? "+ JSON.stringify(codec) +" : ImprovedTube.storage, codec = Object.keys(atlas).reduce(function (all, key) { return store[key] ? ((all?all+'|':'') + atlas[key]) : all}, ''), player_60fps = !ImprovedTube?.storage ? "+ player_60fps +" : ImprovedTube.storage.player_60fps; if (codec) { var re = new RegExp(codec); if (re.test(mime)) return ''; } if (player_60fps) { var match = /framerate=(\d+)/.exec(mime); if (match && match[1] > 30) return ''; } return callback.call(self, mime); }; if (window.MediaSource) { let isTypeSupported = window.MediaSource.isTypeSupported; window.MediaSource.isTypeSupported = function (mime) { return overwrite(this, isTypeSupported, mime); } } let canPlayType = HTMLMediaElement.prototype.canPlayType; HTMLMediaElement.prototype.canPlayType = function (mime) {return overwrite(this, canPlayType, mime);} };";
		document.documentElement.appendChild(MediaElementOverride);

cant make it work reliably without localstorage :(

ImprovedTube · 2024-04-21T19:43:47Z

hi! @raszpl

thats how it was done previously, messages were too slow

wasn't it our storage-loaded that was slow?

fluctuates,

i think it rate limits us while testing "too quickly ( /also one trigger for #1803)

(
could be this alone first:

chrome.storage.local.get('HTMLMediaElementSettingsCodecFpsEtc', function (result) { ...

(if chrome.storage.local.get(null) or extension.storage.load = function (callback) { chrome.storage.local.get(function (items) { extension.storage.data = items; are any slower
)

Update core.js limit localstorage writes to only essential ones

8a70c17

currently we are writing on every page load, and its my fault :(

raszpl mentioned this pull request Apr 11, 2024

Update styles.css make desert theme search button icon visible #2172

Merged

ImprovedTube merged commit 9c4e5f6 into code-charity:master Apr 21, 2024

raszpl deleted the patch-6 branch April 23, 2024 00:53

ImprovedTube mentioned this pull request May 4, 2024

Update player.js slightly more readable autoplayDisable #2157

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update core.js limit localstorage writes to only essential ones #2180

Update core.js limit localstorage writes to only essential ones #2180

raszpl commented Apr 10, 2024

ImprovedTube commented Apr 11, 2024 •

edited

raszpl commented Apr 11, 2024

ImprovedTube commented Apr 11, 2024 •

edited

raszpl commented Apr 21, 2024

raszpl commented Apr 21, 2024 •

edited

raszpl commented Apr 21, 2024 •

edited

raszpl commented Apr 21, 2024

ImprovedTube commented Apr 21, 2024

Update core.js limit localstorage writes to only essential ones #2180

Update core.js limit localstorage writes to only essential ones #2180

Conversation

raszpl commented Apr 10, 2024

ImprovedTube commented Apr 11, 2024 • edited

raszpl commented Apr 11, 2024

ImprovedTube commented Apr 11, 2024 • edited

raszpl commented Apr 21, 2024

raszpl commented Apr 21, 2024 • edited

raszpl commented Apr 21, 2024 • edited

raszpl commented Apr 21, 2024

ImprovedTube commented Apr 21, 2024

ImprovedTube commented Apr 11, 2024 •

edited

ImprovedTube commented Apr 11, 2024 •

edited

raszpl commented Apr 21, 2024 •

edited

raszpl commented Apr 21, 2024 •

edited