WPE 2.38 - Extra scripts not visible for some apps

[feba-biju-infosys]

WPE 2.38 - User script is not visible in web inspector On WPE2.38 user scripts are not visible in web inspector and user stylesheets are. This behaviour is opposite of what we had on 2.22 (user scripts were visible, user stylesheets not)

With reference to the above issue, reproduced this issue on set top box and checked with some apps. Among them, for CNN I was able to see the extra scripts folder on wpe 2.38 but for HBO max extra scripts folder is not visible on wpe 2.38. Checked with raspberry pi image with wpe 2.38 enabled as well, I could see that for both raspberry pi image and the set top box image the behavior is same i.e for CNN the extra scripts are visible and for HBO max the extra scripts are not visible.

Tested a dunfell rpi 15 dec build image which has 2.38 webkit. Adding the image version details : root@raspberrypi4-64-rdk-android-hybrid:~# cat /version.txt imagename:rdk-generic-hybrid-wpe-image_TDK_nightly-20231215-dunfell_20231215020403 BRANCH=nightly-20231215-dunfell YOCTO_VERSION=dunfell VERSION=nightly-20231215-dunfell.12.15.23 SPIN=0 BUILD_TIME="2023-12-15 02:04:03" WPE_WEBKIT_VERSION=2.38.1+gitAUTOINC+39d3d180b2-r17 Generated on Fri Dec 15 02:04:03 UTC 2023 JENKINS_JOB=0 JENKINS_BUILD_NUMBER=0

Steps done for launching web inspector :

1. Boot up rpi and wait for UI to be launched
2. Give :9998 on the browser to launch controller UI
3. Enable the webKitBrowser plugin on controller UI
4. Paste the app URL on the bar and click set then inspect
5. web inspector will be launched OR Type :9224 on browsers's address bar, web inspector will be launched (this works only when the url is set on controller UI).

Observations with this rpi image :

CNN -> Extra scripts is visible HBO max -> Extra scripts not visible

web inspector of CNN with wpe 2.38 image :

web inspector of HBO max with wpe 2.38 image :

[pgorszkowski-igalia]

@feba-biju-infosys : can you provide links to CNN and HBO max applications?

[feba-biju-infosys]

Hi Przemyslaw Gorszkowski

Adding the url links of CNN and HBO max

CNN -> https://widgets.metrological.com/lightning/rdk/d431ce8577be56e82630650bf701c57d#app:com.metrological.app.CNN

HBO MAX-> https://ziggo-partner.play.codex-int.hbo.com/

[pgorszkowski-igalia]

@feba-biju-infosys : why do you expect ExtraScripts in HBO max application? CNN is a part of lightning framework (which generates some additional scripts), while HBO max is some external/native application. I found in the code of lightning that they do something like you can do in console and generate such js files and see them in ExtraScripts folders:

function anonymous(
) {
//@ sourceURL=StateMachineRouter.js
var i = this._stateIndex;
if (i < 3) return ; else
return this["$Popup._handleBack"](...arguments);
}

[feba-biju-infosys]

sure..will check

[pgorszkowski-igalia]

One more thing: in current implementation of the WebKitImplementation.cpp it is possible to add only User Scripts (with webkit_user_content_manager_add_script): https://github.com/WebPlatformForEmbedded/ThunderNanoServicesRDK/blob/rdkservices/WebKitBrowser/WebKitImplementation.cpp#L3305

[pgorszkowski-igalia]

I have just tested adding my custom UserScript in WPE 2.38 on RPi with WPEFramework and it is visible in ExtraScripts folder of the web inspector: my custom UserScript.js

//@ sourceURL=userScript.js
var pgpg="pgpg";
function pgpgFunction()
{
    pgpg="pgpgFunction";
}

The most important thing is //@ sourceURL=userScript.js and at least one function definition that is needed to be added that user script to ExtraScripts folder of web inspector.

@feba-biju-infosys please let me know if you still have problems with UserScripts in ExtraScripts folder.

[amol-virnodkar-infosys]

Actually we observed below issue. WPE 2.38 - User script is not visible in web inspector On WPE2.38 user scripts are not visible in web inspector and user stylesheets are. This behaviour is opposite of what we had on 2.22 (user scripts were visible, user stylesheets not)

For eg. if ITVx application (https://app.10ft.itv.com/3.229.0/virginmedia/homepage) is launched, in case of WPE 2.38, there is Extra Style Sheets visible in the Resources/Sources tab of the Web Inspector. But Extra Style Sheets not visible with WPE 2.22. Please find below images with WPE 2.22 and WPE 2.38. Could you please let us know if there is any change in Web Inspector as we observe different behaviour in WPE 2.22 and WPE 2.38.

WPE 2.22

WPE 2.38

[pgorszkowski-igalia]

I will describe in more details what is listed in "Extra Scripts/StyleSheets" folders. In case of application which you provided: CNN, HBO, ITV that "Extra..." folders contain files for which source files/source map files was not available on server (the response from the server is 403 for them).

What is "source file/source map file": here is the nice description: https://web.dev/articles/source-maps, and here https://developer.chrome.com/blog/sourcemaps#the-anatomy-of-a-source-map. Shortly: site provider can minify/uglify the provided content to increase its performance, but then it becomes very difficult to read and debug. To make it possible to debug/read the original source, the optimized content contains information about where to look for the original source(s) - it is done via sourceURL(direct link to original source) or sourceMappingURL(link to map file which can contain link(s) to one or many original sources) .

So if sourceURL or sourceMapURL exist and original sources exist, then everything is listed as subitems of the optimized file name:

If the source map file(index.js.map in below example) does not exist, then the optimized file(index.js in the below example) is visible in "Extra..." folder: Error about missing index.js.map file:

[amol-virnodkar-infosys]

As discussed, in our WebKitImplementation.cpp, methods - webkit_user_script_new and webkit_user_style_sheet_new are used.

The code for WebKitImplementation.cpp is present in the repo - https://github.com/LibertyGlobal/rdkservices/blob/lgi-thunder4.2-20230922/WebKitBrowser/WebKitImplementation.cpp. Both WPE 2.38 and WPE 2.22 uses the branches lgi-thunder4.2-20230922 and lgi-main-20220329 respectively of this repo - https://github.com/LibertyGlobal/rdkservices/.

[amol-virnodkar-infosys]

Additional screenshots showing the Extra Style Sheets and error message in WPE 2.38

[modeveci]

@pgorszkowski-igalia based on feedback, we can lower the priority of this ticket:

"

Oscar Uitenbroek on 02/Apr/24 11:45 AM --
After discussing with multiple teams, lowering the priority of this ticket. The issue is related to a debug tool, not the browser itself. And it's a difference in expectation, as the tools are working but some users are expecting a different behaviour. "

[pgorszkowski-igalia]

There is a merged (2.38 and 2.42) change which solves the problem with missing user scripts and user style sheets in web inspector. @amol-virnodkar-infosys please check it: https://github.com/WebPlatformForEmbedded/WPEWebKit/pull/1311

[amol-virnodkar-infosys]

Tested iTVx application with code changes from https://github.com/WebPlatformForEmbedded/WPEWebKit/pull/1311 in WPE 2.38. Now the user scripts/style sheets without the URI are visible in the web inspector as below

[amol-virnodkar-infosys]

In WPE 2.22, we can observe that Extra Style Sheets are not visible whereas it is visible in the web inspector of WPE 2.38. The reason for Extra Style Sheets not visible in WPE 2.22 is that there is function to load user scripts in WPE 2.38: https://github.com/LibertyGlobal/rdkservices/blob/lgi-changes-from-lgi-main-20220329/WebKitBrowser/WebKitImplementation.cpp#L3117 but there is no function to load user style sheets in WPE 2.22. Missing of that function which handles the style sheets causes that none of the user style sheets will be loaded in WPE 2.22 web inspector.