Advanced JS Tweaks - Jonius7/SteamUI-OldGlory GitHub Wiki

These tweaks have not been fully implemented to be automated with js_tweaker and fixes.txt

Increasing HOME Grid scrolling performance

need to work on improving performance of the e.prototype.OnScroll function

and the ComputeLayout function

e.prototype.OnScroll = function(e) {
	var t, n;
	this.props.maxRows < 2 || (t = this.m_elGrid.current.getBoundingClientRect(),
	n = Math.abs(t.top - this.m_fLastScrollTop),
	this.props.childHeight * this.props.scaleGridItems / 8 < n && (this.m_fLastScrollTop = t.top,
	t.top < window.innerHeight && 0 < t.bottom && this.ComputeLayout()))
}
e.prototype.ComputeLayout = function() {
	var e = this.fScaledPaddedChildWidth,
		t = this.fScaledPaddedChildHeight,
		n = this.m_elGrid.current.getBoundingClientRect(),
		r = n.width - this.props.paddingLeft - this.props.paddingRight,
		i = Math.max(1, Math.min(this.props.childElements.length, Math.floor((r + this.props.gridColumnGap) / e))),
		o = Math.ceil(this.props.childElements.length / i),
		a = Math.max(0, 0 - n.top),
		s = Math.max(0, Math.min(this.props.childElements.length, Math.round(a / t * i))),
		c = Math.max(0, window.innerHeight - n.top),
		l = Math.max(0, Math.min(this.props.childElements.length, Math.round(c / t * i))),
		p = Math.max(0, s - i * this.props.renderOutsideRows),
		u = Math.min(this.props.childElements.length, l + i * this.props.renderOutsideRows - 1),
		d = Math.floor(p / i),
		m = Math.floor(u / i);
	d == this.state.iFirstRenderableRow && o == this.state.iRows && m == this.state.iLastRenderableRow && p == this.state.iFirstRenderableChild && u == this.state.iLastRenderableChild && i == this.state.iItemsPerRow || this.setState({
		iFirstRenderableRow: d,
		iRows: o,
		iLastRenderableRow: m,
		iFirstRenderableChild: p,
		iLastRenderableChild: u,
		iItemsPerRow: i
	});
	var h = void 0 !== this.props.maxRows ? Math.min(this.props.childElements.length, i * this.props.maxRows) : this.props.childElements.length;
	h != this.m_nItemsDisplayed && (this.m_nItemsDisplayed = h)
}
Snippet

Extra context menu items

There are 3 places to edit if you want to add extra context menu items

Examples here include original code and adding two items: Store Page, and Discussions

  1. Add React.createElement methods for new context menu items:

    return R.createElement(ia.c, null, !this.props.omitPrimaryAction && this.GetPrimaryActionMenuItem(n, c),
                       
R.createElement(ia.d, {
    onSelected: this.ViewStorePage
}, Object(xe.d)("#AppDetails_Links_Store")),
R.createElement(ia.d, {
    onSelected: this.ViewDiscussionsPage
}, Object(xe.d)("#AppDetails_Link_Discussions")),

0 < r.length && R.createElement(ia.d, { 
    onSelected: function() {
        return t.RemoveFromFavorites(r)
    }
...

  2. add prototype functions where ShowCDKeys is (example here is adding Store Page and Discussions Page Links)

}, e.prototype.ShowCDKeys = function() {
                    window.location.href = "steam://cdkeys/" + this.props.overview.appid
}, e.prototype.ViewStorePage = function() {
    window.location.href = "steam://store/" + this.props.overview.appid
}, e.prototype.ViewDiscussionsPage = function() {
    window.location.href = g.a.ResolveURL("GameHubDiscussions", this.props.overview.appid)

  1. Initialise these objects

    Object(j.c)([se.a], e.prototype, "ShowCDKeys", null), 
Object(j.c)([se.a], e.prototype, "ViewStorePage", null),
Object(j.c)([se.a], e.prototype, "ViewDiscussionsPage", null), 
Object(j.c)([se.a], e.prototype, "ShowControllerConfig", null),

How did I figure this sh** out?

I looked at how ShowCDKeys was coded and modelled it off that. For the link to the GameHubDiscussions I looked at how the Navigation bar links were created (see Change order of Navigation Bar Links for more details).

List of Links to recreate
Store Page steam://store/[appid]
News steam://appnews/[appid]
Community Hub steam://url/GameHub/[appid]
Guides steam://url/GameHubGuides/[appid]
Forum (Discussions) steam://url/GameHubDiscussions/[appid]
https://steamcommunity.com/app/[appid]/discussions/
Community Guides https://steamcommunity.com/app/[appid]/guides/
Downloadable Content (DLC) https://store.steampowered.com/dlc/[appid]/
Workshop steam://url/SteamWorkshopPage/[appid]
Screenshots steam://open/screenshots/[appid]
Write Review https://store.steampowered.com/recommended/recommendgame/[appid]
Manual https://steamcdn-a.akamaihd.net/steam/apps/[appid]/manuals/[filename]?t=[timestamp]
http://store.steampowered.com/manual/[appid]/ (external)

Change order of Navigation Bar Links

The Points Shop link on a Game Page's Navigation Bar has moved up to 3rd, while Discussions is now 5th. In some cases this may be undesired, and you want to reorder the links

return this.props.overview.BIsModOrShortcut() || (r = (n = !(t = Object(D.a)(E.b.LAUNCHER_TYPE)) && Gp.GetBadgeData(this.props.overview.appid)) && n.bHasBadgeData && 0 < (null === (e = n.rgCards) || void 0 === e ? void 0 : e.length), o = [{
    label: Object(xe.d)("#AppDetails_Links_Store"),
    url: g.a.BuildStoreAppURL(i, "primarylinks")
}], t || o.push({
    label: Object(xe.d)("#AppDetails_Links_Community"),
    link: "GameHub",
    appid: i
}), r && o.push({
    label: Object(xe.d)("#AppDetails_Links_PointsShop"),
    url: g.a.BuildAppPointsShopURL(i)
}), t || (o.push({
    label: Object(xe.d)("#AppDetails_Link_FindGroups"),
    url: g.a.BuildSteamURL("CommunityGroupSearch", this.props.overview.display_name)
}), o.push({
    label: Object(xe.d)("#AppDetails_Link_Discussions"),
    link: "GameHubDiscussions",
    appid: i
}), o.push({
    label: Object(xe.d)("#AppDetails_Link_Guides"),
    link: "GameHubGuides",
    appid: i
})), this.props.workshopVisible && o.push({
    label: Object(xe.d)("#AppDetails_Link_Workshop"),
    link: "SteamWorkshopPage",
    appid: i
}), this.props.marketPresence && o.push({
    label: Object(xe.d)("#AppDetails_Link_Market"),
    link: "CommunityMarketApp",
    appid: i
}), o.push({
    label: Object(xe.d)("#AppDetails_Link_Support"),
    link: "HelpAppPage",
    appid: i
})), this.props.showControllerConfig && o.push({
    label: Object(xe.d)("#AppDetails_Link_Controller"),
    url: "steam://currentcontrollerconfig/" + i
}), o

What you basically want to do is just change the order the links appear in the function, i.e. the o.push function calls.

##Collapse Game Page Sections

Stop reloading the Home page when going to Downloads and back to Library

testing in libraries.js, commenting out:

t[W]||c.Component.prototype.forceUpdate.call(t),

Effect: What loads?:

Loads: Main page, Recent Games, Play Next, What's New Shelf

Doesn't Load: All Games Shelf grid (however the sort dropdown does reload the grid), Individual game pages

Can still run games from the Left Sidebar via double click, or right click context menu.

Something about getting the Custom Logo Position

e.prototype.FetchCustomLogoPosition = function() {
	return Object(j.b)(this, void 0, void 0, function() {
		var t = this;
		return Object(j.e)(this, function(e) {
			return this.m_disposer && this.m_disposer(), this.m_disposer = Object(C.autorun)(function() {
				var e = Go.GetCustomLogoPosition(t.props.overview);
				Object(C.runInAction)(function() {
					e ? t.setState({
						customLogoPosition: e
					}) : t.setState({
						customLogoPosition: void 0
					})
				})
			}), [2]
		})
	})
}

I want ADD SHELF button to add Shelf to bottom, not top

This is the function in question. eSortBy: 1 = top shelf?

n.prototype.AddNewShowcase = function(e) {
    void 0 === e && (e = "");
    var t = Date.now()
    , n = {
        nShowcaseId: t,
        strCollectionId: e,
        eSortBy: 1,
        nLastChangedMS: Date.now()
    };
    this.m_mapShowcases.set(t, n),
        this.SaveShowcase(n)
}

List View Proof of Concept

Snippet

For that matter, is there any way to replace the tiny icons on the left list with the full size images we used to have?

Basically I want to get it back to the old list-view... but not the super small version it currently is. The one where each game is like... an inch-tall row with the last play-date, indicators for newness or whatever. Is any of this even remotely possible?

Unfortunately I haven't used any sort of CSS knowledge since about 2001... so to say it is out of date would be an understatement.

-- SotiCoto

To get something like the old list view with all the information would require some sort of JavaScript. As the JS is minified, I wouldn't have much idea what to edit since all the variable names are single letters. Otherwise, it should be fairly easy to do.

-- Jonius7

That would require tampering with Javascript and even though i can write it, its not something im willing to play with on steam in that regard. CSS is one thing as its mainly cosmetic, Javascript is a bit more than that and i really do not fancy getting into trouble over it.

Changing how the client functions by editing the javascript and helping others in the community of whom may not understand it enough to make sure they keep themselves safe is just not worth the risk.

-- The HopelessGamer

At this point I am still entertaining the idea of coding up a List View.

Removing superfluous functions

e.prototype.CalculateMaxHeight not insignificant load time with calls to this.m_contentRef.current.getClientRects() If function is made to return null, then the only thing that breaks is the Review box Cannot read property 'nBoxHeight' of null Is this good enough?

e.prototype.render function under var Fs = n("m0wJ"),

Starts with:

var e = this,
    t = this.props.overview,
    n = this.state,
    r = n.rgHeroImages,
    i = n.bHasHeroImage,
    o = n.rgLogoImages,
    a = n.logoPosition,
    s = n.rgHeaderBlurImages,
    c = n.customLogoPosition,
    l = !this.state.bLogoFailedToLoad && 0 < o.length,
    p = ua.rightPanelWidth / 3;

comment out this part:

D.createElement(Ds, {
    height: u,
    editMode: this.state.bEditMode,
    ref: this.m_refTopCapsule,
    bLowPerfMode: Lo.BLowPerfMode(),
    fnOnLoaded: this.props.fnOnLoaded,
    fnOnLogoLoaded: this.OnLogoLoaded,
    appid: this.props.overview.appid,
    hasHeroImage: i,
    rgHeaderImages: r,
    rgBlurImages: s,
    rgLogoImages: o,
    classNameNoLogo: !l && Gs.a.NoLogoImage,
    logoPosition: c || a,
    fnOnPositionChanged: this.OnLogoPositionChange
},

and you got yourself just loading the play button and nav bar

https://imgur.com/a/8e5Ruu9

ds = function(n) ...

​ inner game info container

something in here is loading the game header, etc

var e = this,
    t = this.props.overview,
    n = this.state,
    r = n.rgHeroImages,
    i = n.bHasHeroImage,
    o = n.rgLogoImages,
    a = n.logoPosition,
    s = n.rgHeaderBlurImages,
    c = n.customLogoPosition,
    l = !this.state.bLogoFailedToLoad && 0 < o.length,
    p = ua.rightPanelWidth / 3;
return R.createElement("div", {
    className: Object(Kn.a)(this.props.className, Ss.a.Container),
    onContextMenu: this.ShowContextMenu
}, R.createElement(ds, {
    height: p,
    editMode: this.state.bEditMode,
    ref: this.m_refTopCapsule,
    bLowPerfMode: Wi.BLowPerfMode(),
    fnOnLoaded: this.props.fnOnLoaded,
    fnOnLogoLoaded: this.OnLogoLoaded,
    appid: this.props.overview.appid,
    hasHeroImage: i,
    rgHeaderImages: r,
    rgBlurImages: s,
    rgLogoImages: o,
    classNameNoLogo: !l && Ss.a.NoLogoImage,
    logoPosition: c || a,
    fnOnPositionChanged: this.OnLogoPositionChange
})

                      );

Objective, move the image out of its div and into the parent div to make it sticky

Notes

Could the SteamClient.Apps.[....] functions instead be referring to functions in libraries.js?

But obviously we don't have those function names

First guess was the functions were from one of the .dlls

⚠️ **GitHub.com Fallback** ⚠️