Brave-browser: DevTools Lost Syntax Highlighting for JavaScript

[qingxiang-jia]

Description

The dev tool ("Sources" tab) lost syntax highlighting for JavaScript.

Steps to Reproduce

1. Open any website with JavaScript.
2. Ctrl+Shift+I to open dev tools.
3. Go to "Sources" tab and Ctrl+P to open any .js file.

Actual result:

No highlighting for JavaScript.

Expected result:

Has highlighting for JavaScript just like Chrome or Firefox.

Reproduces how often:

Always happens after 12:00PM (PST) today (12/12/2019).

Brave version (brave://version info)

Brave | 1.1.20 Chromium: 79.0.3945.74 (Official Build) (64-bit)
-- | --
Revision | 99b6d241cf84f7fa7434ae8a59f9e74eb1464280-refs/branch-heads/3945@{#888}
OS | Windows 10 OS Version 1803 (Build 17134.1130)

Version/Channel Information:

• Can you reproduce this issue with the current release? Yes
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the dev channel? Didn't try.
• Can you reproduce this issue with the nightly channel? Didn't try.

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? No.
• Does the issue resolve itself when disabling Brave Rewards? No.
• Is the issue reproducible on the latest version of Chrome? No.

Miscellaneous Information:

[bsclifton]

Thanks for the report, @qingxiang-jia 😄 I'm going to close this as a duplicate report of https://github.com/brave/brave-browser/issues/5618

This issue is fixed in Developer and Nightly versions of the product (NOTE: you have to enable remote debugging under brave://settings/privacy). I created a pull request just right now to uplift this to our Beta branch (1.2, shipping January 6th) since there have been a recent bump in requests:
https://github.com/brave/brave-core/pull/4228

[qingxiang-jia]

Hi @bsclifton , in fact, this issue is not solved in the latest Developer edition. I will check if it's fixed in the nightly. Note that this is not exactly the same as the linked bug because this one deals with JavaScript, the other one deals with TypeScript.

Brave | 1.3.64 Chromium: 79.0.3945.79 (Official Build) dev (64-bit)
-- | --
Revision | 29f75ce3f42b007bd80361b0dfcfee3a13ff90b8-refs/branch-heads/3945@{#916}
OS | Windows 10 OS Version 1803 (Build 17134.1130)

[qingxiang-jia]

Hi @bsclifton , I just checked the latest nightly build, this bug is not fixed. I think we should reopen this issue.

Brave | 1.4.21 Chromium: 79.0.3945.74 (Official Build) nightly (64-bit)
-- | --
Revision | 99b6d241cf84f7fa7434ae8a59f9e74eb1464280-refs/branch-heads/3945@{#888}
OS | Windows 10 OS Version 1803 (Build 17134.1130)

[bsclifton]

@qingxiang-jia did you go to brave://settings/privacy and enable Remote Debugging?

[qingxiang-jia]

Hi @bsclifton , thanks for pointing out that. Yes, I indeed forgot to turn on remove debugging. After that, the syntax highlighting works as expected.

[bsclifton]

@qingxiang-jia perfect! Thanks for confirming 😄 It's definitely not an obvious thing to do

cc: @rebron in case we could provide an easier way to enable remote debugging (ex: show it in dev tools)

[czzplnm]

So the default behavior of Brave will have code highlighting disabled, and we will have to turn on Remote Debugging now? :(

[qingxiang-jia]

So the default behavior of Brave will have code highlighting disabled, and we will have to turn on Remote Debugging now? :(

I have the same feeling. Also, after some googling I am not sure what "remote debugging" really is. Chromium doesn't seem to have it.

[czzplnm]

So the default behavior of Brave will have code highlighting disabled, and we will have to turn on Remote Debugging now? :(

I have the same feeling. Also, after some googling I am not sure what "remote debugging" really is. Chromium doesn't seem to have it.

I thought that was for debugging android web apps. I use chrome to debug my android app that has a webview.

[qingxiang-jia]

So the default behavior of Brave will have code highlighting disabled, and we will have to turn on Remote Debugging now? :(

I have the same feeling. Also, after some googling I am not sure what "remote debugging" really is. Chromium doesn't seem to have it.

I thought that was for debugging android web apps. I use chrome to debug my android app that has a webview.

OK. Thanks! I didn't find it in Chrome's setting. Maybe I went to a wrong place. Good to know!

[bsclifton]

Chrome doesn't offer this setting because it because it's enabled by default (it's a setting we created at Brave). Here's the raw Chromium source, so you can see what's happening:
https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/devtools_ui_data_source.cc?l=135-150&rcl=50e069330205da34c2ff8a234e155a92e128834b

Basically, if remote debugging (in Brave) is disabled, it won't allow execution of StartRemoteDataRequest.

Here's the Chromium annotation for this call, which describes the call that StartRemoteDataRequest is making:

net::NetworkTrafficAnnotationTag traffic_annotation =
  net::DefineNetworkTrafficAnnotation("devtools_hard_coded_data_source",
                                      R"(
    semantics {
      sender: "Developer Tools Remote Data Request From Google"
      description:
        "This service fetches Chromium DevTools front-end files from the "
        "cloud for the remote debugging scenario."
      trigger:
        "When user attaches to mobile phone for debugging."
      data: "None"
      destination: GOOGLE_OWNED_SERVICE
    }
    policy {
      cookies_allowed: YES
      cookies_store: "user"
      setting: "This feature cannot be disabled by settings."
      chrome_policy {
        DeveloperToolsAvailability {
          policy_options {mode: MANDATORY}
          DeveloperToolsAvailability: 2
        }
      }
    })");

Even if you're debugging local files, it's going to make a call to fetch "Chromium DevTools front-end files from the cloud" and will send cookies, which has privacy violating implications (which is why it's disabled).

We can definitely look at making this safer- for example adding a proxy in-between, which strips out user identifying information. Hope this makes sense; I know it's an inconvenience ☹️

cc: @jumde @diracdeltas @fmarier

[bsclifton]

We could always consider adding a checkbox in the Sources tab of the dev tools, something like Allow calls to Google for fetching front-end files (or something better named):

[qingxiang-jia]

Thank you for the detailed explanation. I never realized we are sending cookie by using the dev tools until your comment! Now I understand the privacy implication I think it's great that we have the option to switch off it and I feel more important to keep using Brave. Yes, I think adding something in the red square would be a good idea.

[czzplnm]

Chrome doesn't offer this setting because it because it's enabled by default (it's a setting we created at Brave). Here's the raw Chromium source, so you can see what's happening:
https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/devtools_ui_data_source.cc?l=135-150&rcl=50e069330205da34c2ff8a234e155a92e128834b

Basically, if remote debugging (in Brave) is disabled, it won't allow execution of StartRemoteDataRequest.

Here's the Chromium annotation for this call, which describes the call that StartRemoteDataRequest is making:

net::NetworkTrafficAnnotationTag traffic_annotation =
  net::DefineNetworkTrafficAnnotation("devtools_hard_coded_data_source",
                                      R"(
    semantics {
      sender: "Developer Tools Remote Data Request From Google"
      description:
        "This service fetches Chromium DevTools front-end files from the "
        "cloud for the remote debugging scenario."
      trigger:
        "When user attaches to mobile phone for debugging."
      data: "None"
      destination: GOOGLE_OWNED_SERVICE
    }
    policy {
      cookies_allowed: YES
      cookies_store: "user"
      setting: "This feature cannot be disabled by settings."
      chrome_policy {
        DeveloperToolsAvailability {
          policy_options {mode: MANDATORY}
          DeveloperToolsAvailability: 2
        }
      }
    })");

Even if you're debugging local files, it's going to make a call to fetch "Chromium DevTools front-end files from the cloud" and will send cookies, which has privacy violating implications (which is why it's disabled).

We can definitely look at making this safer- for example adding a proxy in-between, which strips out user identifying information. Hope this makes sense; I know it's an inconvenience ☹️

cc: @jumde @diracdeltas @fmarier

Thanks for the detailed explanation

[bsclifton]

Issue created to proxy these calls and enable the setting by default:
https://github.com/brave/brave-browser/issues/7645