Localization in custom about pages

[ricewind012]

Is there any way to get localization working ? since, you know, this:

<panel-item
	accesskey="O"
	@click=${this.actions.open}
>Open</panel-item>

looks uglier than this:

<panel-item
	accesskey="O"
	@click=${this.actions.open}
	data-l10n-id="menu-open"
></panel-item>

I have tried using the latter variant and put the following in the html of the about page:

<link
	rel="localization"
	href="chrome://userchrome/content/firefox-fm/fm.ftl"
/>

with the following contents in fm.ftl:

menu-open = Open

but was met with the following messages:

"firefox-fm" if curious: https://github.com/ricewind012/firefox-fm

[aminomancer]

Shouldn't the URL be chrome://userchrome/content/firefox-fm/src/page/fm.ftl?

[ricewind012]

no, it was in the "firefox-fm" folder, unless I have to put the ftl in the same folder as the html page ?

[aminomancer]

you gave me the link to the repo, I looked for the ftl file, it's in the same folder as the html page.

[aminomancer]

Btw, what do you mean by "looks uglier"? You mean the code looks worse? I guess if that's your preference. Fluent is asynchronous though. It entails a greater performance burden and there's a risk of FOUT (flash of uninserted text, text analogue of FOUC). So if you don't have actual translations, then I think raw strings are objectively better.

[ricewind012]

thanks, will try. if I decide to use react, do I have to bundle my own or is there a way to use the one used for the new tab page ?

[aminomancer]

yeah you should be able to use built-in

• resource://activity-stream/vendor/react.js
• resource://activity-stream/vendor/react-dom.js

[aminomancer]

also you can use the unminified dev version too

• resource://activity-stream/vendor/react-dev.js
• resource://activity-stream/vendor/react-dom-dev.js

but be aware these are all for an older version of react, 16.13.1. so if you need newer features you'll have to include your own react

[aminomancer]

very impressive work on the win 95 themes btw. you should do one for firefox!

[ricewind012]

very impressive work on the win 95 themes btw. you should do one for firefox!

thanks, but I use the GNOME desktop now and it already exists (but unmaintained): https://github.com/WinClassic/MSFX
the only thing I want to do later is style reusable components for the firefox gnome theme

[ricewind012]

I don't want to create another thread, so I'll ask here:

• is there any way to resolve chrome/resource uris to, say, npm packages ? so resource://activity-stream/vendor/react-dom.js will be react-dom, resource://gre/modules/Subprocess.sys.mjs will be somehow resolved to https://github.com/mozilla/gecko-dev/blob/9bfbb6693f2937285ef89752a0d8b0e1539f55b4/toolkit/modules/subprocess/Subprocess.sys.mjs or something like that, etc.
• for custom about pages, I have to look in the brower toolbox to look for any logs. But sometimes the errors don't appear at all (it'd be nice to filter them just for the about page) and I have to figure out wtf happened somehow. Is there any workaround for that or do I have to look elsewhere ? I can post an example where that happens

thanks :-)

[aminomancer]

it depends what you're trying to do. if your goal is to replace Subprocess.sys.mjs with your own file, that can't be done without building your own firefox (which is a legitimate option, it's really not that tedious with artifact builds), because resource:// URLs cannot be overridden. chrome:// URLs can be though, with a chrome manifest. many examples in this repo.

on the other hand, if your goal is just to simplify your own code by substituting a short token for a long URL, then you can do that by building with webpack. actually I'm sure you can do it with parcel too, which I prefer over webpack, but I haven't done it with parcel before. we do this with webpack in the fx source code. there are a couple ways to do it.

the way we do it is like this, you have your "externals" and target them from the module names to the global property names, you reference them like this, and you import them like this. the idea is that when you say import React from "react", instead of looking for "react" in the node_modules folder, webpack just translates it to this, which is a reference to a preexisting global object (which we imported into the global scope in aboutwelcome.html).

as for errors not appearing in the browser toolbox, I'm not sure what that issue is. I don't remember encountering any issues like that. are you using the multiprocess browser toolbox?

[ricewind012]

it depends what you're trying to do.

i wanted to get autocompletions/docs/etc. in vs code (for example with the same way by installing this https://searchfox.org/mozilla-central/source/tools/@types) without, say, duplicating or modifying any files, but, as i can see, i can't ? https://searchfox.org/mozilla-central/source/.eslintrc.js#123 or is that totally unrelated ?

you can do that by building with webpack

maybe there is some way i can do that with lit, do i still have to build it with webpack ? i.e. import everything to the global scope, but reference it as just "lit"

are you using the multiprocess browser toolbox?

actually, no, but i am now, thanks. my problem somehow already went away, though

[aminomancer]

oh, resolve chrome/resource uris in vs code? the file you linked is specifically for eslint purposes, but it's right that there's currently no way to do that. the path of a file can't be inferred from its chrome URL because the URL is given by a chrome manifest file, which can choose basically any arbitrary path.

you'd need to make a vscode LSP extension that's able to get the filename from the URL, and dynamically search for the corresponding file (or search for the chrome manifest that registers it, to locate the exact path, but that would be just as resource-intensive as searching for the file itself). I think this is a desired capability, but searching such a big repo is not a viable option for something that generally needs to work pretty fast.

I've heard there are some kind of plans to change how resource and chrome URLs work, or add a new type of URL or something that will be more deterministic. I don't know any of the specifics but I seem to remember hearing something about this. @Standard8 might know.

as for lit, I'm not sure as I don't use it. I think those are ES modules, and you can't really control the module resolution for them as there's no configuration like there is for webpack. the ability to import React from "react" in the code I mentioned depends on the fact that it's just source code. it will be compiled by webpack into a bundle that basically replaces these static import declarations with references to React on the window. and that's the file that is actually executed. otherwise, webpack can also build the module directly into the bundle, which would also work.

[Standard8]

I've heard there are some kind of plans to change how resource and chrome URLs work, or add a new type of URL or something that will be more deterministic. I don't know any of the specifics but I seem to remember hearing something about this. @Standard8 might know.

There's a proposal around replacing the chrome/resource URL system so that it is file-system based, I can't remember the exact details off-hand, but you'd end up with something deterministic like protocol://toolkit/modules/subprocess/Subprocess.sys.mjs which tools could then easily parse.

Last I heard the technical aspects were being discussed, but we haven't yet get work planned in for that.

We have talked about some sort of vscode LSP extension but using a static map, but tbh we'd rather put the effort into changing the URL system as that'd make it easier for everything.

[ricewind012]

thanks guys, i guess i can only keep my 9001 searchfox tabs

We have talked about some sort of vscode LSP extension but using a static map, but tbh we'd rather put the effort into changing the URL system as that'd make it easier for everything.

good luck on that, no editor support is awful but searchfox makes it pretty bearable, unlike github search

[ricewind012]

I also noticed every file in the array turns out to be the last one in a directory with this:

function newFile(path) {
  const file = Cc["@mozilla.org/file/local;1"].getService(Ci.nsIFile);
  file.initWithPath(path);

  return file;
}

(await IOUtils.getChildren('/'))
  .map(newFile)
  .map(e => e.path)

but not with this:

newFile = Components.Constructor(
  "@mozilla.org/file/local;1",
  "nsIFile",
  "initWithPath"
);

screenshot:

are they not the same thing ? i killed 3 days on this because firefox was acting weird when i used the first variant

[aminomancer]

 function newFile(path) {
-  const file = Cc["@mozilla.org/file/local;1"].getService(Ci.nsIFile);
+  const file = Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsIFile);
   file.initWithPath(path);
 
   return file;
 }

I think this is what you want (nsIFile is not a service)

[ricewind012]

thanks ! that works