Need advice for Javascript environment to use


PowerGod

Hardcore Member
Joined
Jun 20, 2011
Messages
3,862
I'm not so used with javascript, and the times I needed to modify some scripts, those were really simple and small...

but now I want to hack the GOG Galaxy 2.0 interface, and there is for example this "client.js" that is a more than 3 MB one liner script, and this makes it really difficult to read, and also I wonder why it was made like this... I suppose that is the programming environment that does this.

After having "beautified" the javascript code, there are still things like this, and I understand this is a single string, but WTF:
Code:
module.exports = '<flat-button\n    galaxy-click\n    js-galaxy-menu-trigger="gameViewMoreButtonMenu"\n    selenium-id="gameViewMoreMenuButton"\n    button-role="tertiary"\n    button-padding="small"\n>\n    <galaxy-icon\n        i-gameViewMoreButton-triggerIcon\n        name="sliders-thick"\n    ></galaxy-icon>\n</flat-button>\n\n<galaxy-basic-menu\n    i-gameViewMoreButtonDropdown\n    i-menuWrapper="bottom"\n    menu-id="\'gameViewMoreButtonMenu\'"\n    selenium-id="gameViewMoreMenu"\n>\n    <menu\n        i-menu\n        galaxy-menu-root-menu\n    >\n        <div i-menu-triangleContainer>\n            <div i-menu-triangle></div>\n        </div>\n\n        <div ng-if="$ctrl.isPlayTasksNestedMenuVisible">\n            <play-tasks-nested-menu\n                is-play-disabled="$ctrl.isPlayTasksNestedMenuDisabled"\n                feature-settings-piece="$ctrl.featureSettingsPiece"\n                on-launch-play-task="$ctrl.launchPlayTask(playTask)"\n            ></play-tasks-nested-menu>\n            <hr i-menu-hr>\n        </div>\n\n        <galaxy-menu-button\n            ng-if="$ctrl.currentPlatform == $ctrl.gamingPlatforms.GOG"\n            is-disabled="!$ctrl.isChangelogAvailable"\n            on-click="$ctrl.openGameChangelog()"\n            selenium-id="gameViewMoreMenuGameChangelogButton"\n            slug="[[ (\'galaxy2.0_gameView.game_view__more_button__view_notes\' | translate) + \' \' + $ctrl.currentVersionOrBuildId ]]"\n        ></galaxy-menu-button>\n\n        <galaxy-menu-button\n            on-click="$ctrl.openGameEditWindow()"\n            is-disabled="!$ctrl.isGrkOwnedOrSubscribed"\n            selenium-id="gameViewMoreMenuEditButton"\n            slug="galaxy2.0_gameView.game_view__more_button__edit_game_info"\n        ></galaxy-menu-button>\n\n        <game-manage-nested-menu grk="$ctrl.grk"></game-manage-nested-menu>\n\n        <div ng-if="$ctrl.currentPlatform === $ctrl.gamingPlatforms.GENERIC">\n            <hr i-menu-hr>\n\n            <galaxy-menu-button\n                on-click="$ctrl.removeFromLibrary()"\n                is-disabled="$ctrl.isRemoveFromLibraryDisabled"\n                slug="galaxy2.0_gameView.game_view__remove_from_library"\n                selenium-id="gameViewMoreMenuRemoveButton"\n            ></galaxy-menu-button>\n\n            <galaxy-menu-button\n                on-click="$ctrl.removeExecutables()"\n                is-disabled="$ctrl.isUnlinkExecutableDisabled"\n                slug="[[ $ctrl.playTasks.length > 1 ? \'galaxy2.0_gameView.game_view__unlink_all_executables\' : \'galaxy2.0_gameView.game_view__unlink_executable\' ]]"\n            ></galaxy-menu-button>\n        </div>\n\n        <div ng-if="$ctrl.currentPlatform === $ctrl.gamingPlatforms.GOG">\n            <galaxy-menu-button\n                on-click="$ctrl.checkForUpdates()"\n                is-disabled="!$ctrl.isGameInstalled"\n                slug="galaxy2.0_gameView.game_view__more_button__check_updates"\n            ></galaxy-menu-button>\n        </div>\n\n        \x3c!-- SUPPORT & STORE LINKS SECTION --\x3e\n\n        <div ng-if="$ctrl.currentPlatform === $ctrl.gamingPlatforms.GOG">\n            <hr i-menu-hr>\n            <galaxy-menu-button\n                on-click="$ctrl.openSupport()"\n                ng-disabled="!$ctrl.supportLink"\n                slug="app_settings__support"\n                selenium-id="gameViewMoreMenuSupportButton"\n            ></galaxy-menu-button>\n\n            <galaxy-menu-button\n                on-click="$ctrl.openProductCard()"\n                ng-disabled="!$ctrl.productPageLink"\n                slug="galaxy2.0_gameView.game_view__more_button__view_in_store"\n                selenium-id="gameViewMoreMenuProductCardButton"\n            ></galaxy-menu-button>\n        </div>\n\n        <div ng-if="$ctrl.currentPlatform === $ctrl.gamingPlatforms.GENERIC && $ctrl.productPageLink">\n            <hr i-menu-hr>\n\n            <galaxy-menu-button\n                on-click="$ctrl.openProductCard()"\n                ng-disabled="!$ctrl.productPageLink"\n                slug="galaxy2.0_gameView.game_view__more_button__view_in_store"\n                selenium-id="gameViewMoreMenuProductCardButton"\n            ></galaxy-menu-button>\n        </div>\n\n        \x3c!-- SUPPORT & STORE LINKS SECTION END --\x3e\n\n        \x3c!-- Not bound to anything yet, so commented out\n\n        <galaxy-menu-button\n            ng-disabled="true"\n            ng-if="$ctrl.currentPlatform !== $ctrl.gamingPlatforms.GENERIC"\n            slug="galaxy2.0_gameView.game_view__more_button__patch_notes"\n        ></galaxy-menu-button> --\x3e\n    </menu>\n</galaxy-basic-menu>\n'

Is there some kind of programming environment that can manage javascript and these html strings in some kind of easier way ?
Or I just have to copy the code elsewhere to modify it in a human readable way and put it back again every time after I'm done ?
 

ElPoco

Very Active Member
Joined
Feb 16, 2012
Messages
929
Age
36
Location
Paris, France
It can also be written in some framework (even sometimes in a different language) that will generate .js files that are quite different from what the original code.
 

PowerGod

Hardcore Member
Joined
Jun 20, 2011
Messages
3,862
Well, then seems like I'll have to do first some VIM functions to manage those strings, so to put them back after my changes.
 

HelenF

Very Active Member
Joined
Jun 22, 2013
Messages
525
Location
UK
If you clean it up into readable code that also works, you don't necessarily have to put it back afterwards.

If it's using ES6+, looks like you can do multi-line strings with backticks. Otherwise the options are a little messier.
 
Top