devtools/client/shared/sourceeditor

firefox-main/devtools/client/shared/sourceeditor

	Name	Description	Size	Coverage
	autocomplete.js	Prepares an editor instance for autocompletion.	10387	94 %
	codemirror			91 %
	codemirror6			100 %
	css-autocompleter.js	Here is what this file (+ css-parsing-utils.js) do. The main objective here is to provide as much suggestions to the user editing a stylesheet in Style Editor. The possible things that can be suggested are: - CSS property names - CSS property values - CSS Selectors - Some other known CSS keywords Gecko provides a list of both property names and their corresponding values. We take out a list of matching selectors using the Inspector actor's `getSuggestionsForQuery` method. Now the only thing is to parse the CSS being edited by the user, figure out what token or word is being written and last but the most difficult, what is being edited. The file 'css-parsing-utils' helps to convert the CSS into meaningful tokens, each having a certain type associated with it. These tokens help us to figure out the currently edited word and to write a CSS state machine to figure out what the user is currently editing (e.g. a selector or a property or a value, or even fine grained information like an id in the selector). The `resolveState` method iterated over the tokens spitted out by the tokenizer, using switch cases, follows a state machine logic and finally figures out these informations: - The state of the CSS at the cursor (one out of CSS_STATES) - The current token that is being edited `completing` - If the state is "selector", the selector state (one of SELECTOR_STATES) - If the state is "selector", the current selector till the cursor - If the state is "value", the corresponding property name In case of "value" and "property" states, we simply use the information provided by Gecko to filter out the possible suggestions. For "selector" state, we request the Inspector actor to query the page DOM and filter out the possible suggestions. For "media" and "keyframes" state, the only possible suggestions for now are "media" and "keyframes" respectively, although "media" can have suggestions like "max-width", "orientation" etc. Similarly "value" state can also have much better logical suggestions if we fine grain identify a sub state just like we do for the "selector" state.	46783	85 %
	editor-commands-controller.js	The source editor exposes XUL commands that can be used when embedded in a XUL document. This controller drives the availability and behavior of the commands. When the editor input field is focused, this controller will update the matching menu item entries found in application menus or context menus.	2382	50 %
	editor.js	A very thin wrapper around CodeMirror. Provides a number of helper methods to make our use of CodeMirror easier and another method, appendTo, to actually create and append the CodeMirror instance. Note that Editor doesn't expose CodeMirror instance to the outside world. Constructor accepts one argument, config. It is very similar to the CodeMirror configuration object so for most properties go to CodeMirror's documentation (see below). Other than that, it accepts one additional and optional property contextMenu. This property should be an element, or an ID of an element that we can use as a context menu. This object is also an event emitter. CodeMirror docs: http://codemirror.net/doc/manual.html	143837	89 %
	lezer-utils.js	Checks if a node has children with any of the node types specified @param {object} node @param {Set} types @returns	17247	97 %
	moz.build		628	-
	package-lock.json		116720	-
	package.json		879	-
	README	This is the CodeMirror editor packaged for the Mozilla Project. CodeMirror	13416	-
	rollup.config.mjs	eslint-disable import/no-unresolved	653	-
	scope-utils.js	Check if the position is within this function location @param {object} functionLocation @param {object} position @returns {boolean}	3374	93 %
<1%	test			-
	wasm.js	Creates wasm formatter function used to generate the hexadecimal number displayed in the line gutter @param {object} subject - An object which decribes the source, it is comprised of the sourceId @returns {Function}	4459	93 %
	webpack.config.js		2249	-

Revision control

Other Tools