We want to go back to ESLint's default complexity level so that newly introduced code is checked for complexity.
At the same time, to make that work, we're excluding all of the more complex functions for now.
We should fix them: make them less complex, and remove the eslint-disable comment.
See bug 1553449 for more information about this.
Differential Revision: https://phabricator.services.mozilla.com/D32139
--HG--
extra : moz-landing-system : lando
We want to go back to ESLint's default complexity level so that newly introduced code is checked for complexity.
At the same time, to make that work, we're excluding all of the more complex functions for now.
We should fix them: make them less complex, and remove the eslint-disable comment.
See bug 1553449 for more information about this.
Differential Revision: https://phabricator.services.mozilla.com/D32139
--HG--
extra : moz-landing-system : lando
Depends on D27693
Menu::popup and popupAtZoom are expecting a toolbox argument as last argument.
However, half of the callsites do not have access to the toolbox and just pass
a { doc } object. This is misleading when trying to work on menu.js because you
cannot rely on toolbox APIs.
Differential Revision: https://phabricator.services.mozilla.com/D28036
--HG--
extra : moz-landing-system : lando
Depends on D27693
Menu::popup and popupAtZoom are expecting a toolbox argument as last argument.
However, half of the callsites do not have access to the toolbox and just pass
a { doc } object. This is misleading when trying to work on menu.js because you
cannot rely on toolbox APIs.
Differential Revision: https://phabricator.services.mozilla.com/D28036
--HG--
extra : moz-landing-system : lando
Ensure the button to copy all changes remains in view even when the Changes panel is overflowing vertically.
Differential Revision: https://phabricator.services.mozilla.com/D28487
--HG--
extra : moz-landing-system : lando
Introduces tracking for newly created CSS rules in the PageStyleActor.
Adds a boolean flag, `isNew`, to the tracked rule in the Changes Redux store. Using this flag, render the new rule's selector in the React component as added (plus sign, green background). Ensure selector changes for thew new rule always overwrite the original selector (fix for Bug 1542288) instead of erroneously showing the original selector as removed.
Removes obsolete documentation for "changeType" from the tracked rule in the Changes Redux store. This was never used.
Differential Revision: https://phabricator.services.mozilla.com/D28215
--HG--
extra : moz-landing-system : lando
Track the number of times people use any of the export options from the Changes panel:
- Copy All Changes button
- Copy Rule button
- Copy Rule context menu option
- Copy Declaration context menu option
Differential Revision: https://phabricator.services.mozilla.com/D22090
--HG--
extra : moz-landing-system : lando
Adds a new option to the context menu which is visible only when it's invoked on a CSS declaration.
Builds a string with the property name and value and copies to the clipboard.
If the declaration is marked as removed, the string is wrapped in a comment block.
Differential Revision: https://phabricator.services.mozilla.com/D21526
--HG--
extra : moz-landing-system : lando
This patch adds a boolean option to skip the cached value of `StyeRuleActor.authoredText` and re-parse the stylesheet for its value.
When changing content of a descendant rule inside an ancestor like @media or @select, the cached `authoredText` value is outdated.
This yields incorrect data when requesting the complete rule authored text, hence the need for a cache-busting option.
In addition to this change, there is a slight refactor to include the generated unique selector for the mock-rule for element inline styles.
Differential Revision: https://phabricator.services.mozilla.com/D21033
--HG--
extra : moz-landing-system : lando
Depends on D21007
Adds a Copy All Changes button to the toolbar of the Changes panel.
When pressed, this builds a stylesheet out of the changes for all sources tracked (stylesheets, element styles, etc)
The output format is the same as the now defunct Bug 1524548 with the added code comment as separator between the sources.
Differential Revision: https://phabricator.services.mozilla.com/D21008
--HG--
extra : moz-landing-system : lando
Remove the Copy All and Copy All Changes context menu options form the Changes panel context menu. As decided by PM & UX, they will be replaced with a single Copy All Changes button in the toolbar (part 2 of this series).
Differential Revision: https://phabricator.services.mozilla.com/D21007
--HG--
extra : moz-landing-system : lando
Adds a button that shows up when hovering selectors in the Changes panel.
When clicked, it invokes the same Copy Rule behavior implemented for the context menu: copies the full content of the rule with changes applied.
The added/changed CSS class names use BEM notation. I intend to refactor the Changes panel stylesheet to BEM in a follow-up patch.
Differential Revision: https://phabricator.services.mozilla.com/D20808
--HG--
extra : moz-landing-system : lando
Depends on D20808
Adds a Copy All Changes button to the toolbar of the Changes panel.
When pressed, this builds a stylesheet out of the changes for all sources tracked (stylesheets, element styles, etc)
The output format is the same as the now defunct Bug 1524548 with the added code comment as separator between the sources.
Differential Revision: https://phabricator.services.mozilla.com/D21008
--HG--
extra : moz-landing-system : lando
Remove the Copy All and Copy All Changes context menu options form the Changes panel context menu. As decided by PM & UX, they will be replaced with a single Copy All Changes button in the toolbar (part 2 of this series).
Differential Revision: https://phabricator.services.mozilla.com/D21007
--HG--
extra : moz-landing-system : lando
Adds a button that shows up when hovering selectors in the Changes panel.
When clicked, it invokes the same Copy Rule behavior implemented for the context menu: copies the full content of the rule with changes applied.
The added/changed CSS class names use BEM notation. I intend to refactor the Changes panel stylesheet to BEM in a follow-up patch.
Differential Revision: https://phabricator.services.mozilla.com/D20808
--HG--
extra : moz-landing-system : lando
Depends on D20195
This series of patches depends on the patch from [Bug 1525238](https://bugzilla.mozilla.org/show_bug.cgi?id=1525238)
- adds method to identify a CSS Rule actor by id
- adds context menu option to the Changes panel to allow copying the rule's authored text to the clipboard
Differential Revision: https://phabricator.services.mozilla.com/D20196
--HG--
extra : moz-landing-system : lando
Updates the Redux selector that generates styleesheets with changes to account for the new array structure for the history of the CSS Rule selector. Also fixes the xpcshell mock to account for the same thing.
With this change, selector renames also get captured in the output stylesheet (they weren't in the previous implementation)
Differential Revision: https://phabricator.services.mozilla.com/D20148
--HG--
extra : moz-landing-system : lando
Depends on D19828
Updates the React component of the Changes panel to show the diff of
a rule's selector if it has changed.
The previous implementation assumed that a selector rename meant a whole
rule removal (with the old selector) followed by a whole rule addition
(with the new selector).
This new implementation tracks the changes to the selector atomically.
The main benefit is that if the selector is renamed, the diff in the
Changes panel shows only this action and not the unchanged declarations.
The test was re-enabled and adjusted to account for this difference in behaviour.
This refactor was required in order to be compatible with Bug 1525238
which lays the ground work for matching rules from the client with rules
from the server. This is necessary in order to have consistent behaviour
for export options, like Copy Rule, which need to match the rule on the
server even if its selector was changed.
Differential Revision: https://phabricator.services.mozilla.com/D19830
--HG--
extra : moz-landing-system : lando
Refactors the Redux state for the Changes panel so that rules have
a `selectors` array instead of just a single `selector` string.
The `selectors` array represents the **history** of selector text the
rule has over time, not the actual list of multiple selectors it has
(multiple selectors are collapsed into a single comma-separated string
regardless of how many they are).
When the server logs changes, the rule's selector text is checked
against the history of previously logged selectors.
If the incoming selector is different than the _first_ item in
the tracked rule's `selectors` array, it means the selector was renamed
so it is pushed onto the array (added to the history).
If it's the same, the whole array can be reduced to the original value
because it means that either:
- the selector didn't change between operations (ex: after declaration changes)
- the selector reverted back to its original name.
This `selectors` array is used in the React component in Part 2 of this
series to render any necessary diff view of the selector.
The old approach (whole rule removal + whole rule addition) is replaced
by this refactor. The introduction of the StyleRyleActor actor id from
the server as the rule id on the client in Bug 1525238 means that the
selector change can no longer behave like two distinct rules.
The actorID/rule id are preserved after selector renames. This necessary
for the some export options to work consistently (like Copy Rule with changes applied).
Differential Revision: https://phabricator.services.mozilla.com/D19828
--HG--
extra : moz-landing-system : lando
Replaces custom generated hashes with the actorIDs which are stable
during the editing session enough to use as unique identifiers.
For future restore / persistence, we still have the metadata about each
rule and stylesheet to attempt to identify them again.
Differential Revision: https://phabricator.services.mozilla.com/D18660
--HG--
extra : moz-landing-system : lando
Depends on D18706
Follow up for D18704. Adds xpcshell unit test to check that stylesheets are genereated in the expected formats for single or deeply nested CSS rules.
Differential Revision: https://phabricator.services.mozilla.com/D18860
--HG--
extra : moz-landing-system : lando
Depends on D18704
Adds a new option to the context menu to copy the changes for a rule as valid CSS text.
Removed properties are commented out. Added properties are used as-is. Style source information is listed as a code comment above the CSS rule.
Makes use of the new Redux selector introduced in Part 2 (see D18704) to build a stylesheet text with the changes per-rule. That will be reused for copying all changes per-stylesheet.
Moves the copy text selection handler out to the ChangesView to co-locate it with other (upcoming) copy actions.
Adds data-ruleid and data-sourceid to DOM elements to help match the target element to the rule/source in the Redux store.
Differential Revision: https://phabricator.services.mozilla.com/D18706
--HG--
extra : moz-landing-system : lando
Depends on D18703
Adds a new selector method to build the CSS text for a stylesheet with the aggregated changes for one or more rules.
Makes use of the filtering capabilities introduced in Part 1.
Differential Revision: https://phabricator.services.mozilla.com/D18704
--HG--
extra : moz-landing-system : lando
The diff for this change looks needlessly scary. The only material change is the introduction of the `filter` parameter to the `getChangesTree()` selector to restrict the output to a subtree that includes only the martching rules and sources provided in as arrays of ids in the `filters` argument.
The sources and rules are filtered, if any corresponding ids are provided, then the same logic to build the tree is used.
The meaningful blocks of code introduced are:
```
.filter(([sourceId, source]) => {
// Use only matching sources if an array to filter by was provided.
if (sourceIdsFilter.length) {
return sourceIdsFilter.includes(sourceId);
}
return true;
})
```
introduced right after `Object.entries(state)`
and
```
.filter(([ruleId, rule]) => {
// Use only matching rules if an array to filter by was provided.
if (rulesIdsFilter.length) {
return rulesIdsFilter.includes(ruleId);
}
return true;
})
```
introduced right after `Object.entries(rules)`.
Adding a newline confused the diff algorithm to consider that much bigger changes have occurred.
Introducing these filtering options lays the ground work for building subtrees of changes per-rule and per-stylesheet to be copied to the clipboard or saved as a file.
Differential Revision: https://phabricator.services.mozilla.com/D18703
--HG--
extra : moz-landing-system : lando
Replaces custom generated hashes with the actorIDs which are stable
during the editing session enough to use as unique identifiers.
For future restore / persistence, we still have the metadata about each
rule and stylesheet to attempt to identify them again.
Differential Revision: https://phabricator.services.mozilla.com/D18660
--HG--
extra : moz-landing-system : lando
Adds three new scalars for counting the numer of times:
- the default copy action is triggered, regardless of method
- the context menu is shown
- the copy option from the context menu is used
Differential Revision: https://phabricator.services.mozilla.com/D17667
--HG--
extra : moz-landing-system : lando
Depends on D17255
Replaces CSS pseudo-elements for added/removed line markers with text
elements that can be copied with the rest of the content.
Differential Revision: https://phabricator.services.mozilla.com/D17256
--HG--
extra : moz-landing-system : lando
Adds context menu with options to select all and copy text content from
the Changes panel.
Differential Revision: https://phabricator.services.mozilla.com/D17255
--HG--
extra : moz-landing-system : lando
Depends on D17255
Replaces CSS pseudo-elements for added/removed line markers with text
elements that can be copied with the rest of the content.
Differential Revision: https://phabricator.services.mozilla.com/D17256
--HG--
extra : moz-landing-system : lando
Adds context menu with options to select all and copy text content from
the Changes panel.
Differential Revision: https://phabricator.services.mozilla.com/D17255
--HG--
extra : moz-landing-system : lando
This patch introduces a Redux selector for the Changes slice. A selector here is a fancy word for a method that returns a subset from the state without having to expose the state's structure to the consumer. It is also useful for returning a derived version of the state which we're using here.
The tracked changed CSS rules in the Redux state are not stored in a nested structure. A shallow structure is easier to query and to work with in our use case. But the Changes panel needs to display CSS rules in a hierarchical structure (ex: a style rule which is a child of a @media rule). To do this, the React component used to build up the nested structure as it consumed the changes from the Redux state. To prevent rendering duplicates of rules (once as part of an ancestor's children and once as a standalone rule), the React component kept a reference of rules it had previously rendered. This had a flaw because it didn't account for the rule's stylesheet. The problem was that rules with identical selectors from different stylesheets would not all be rendered because they would be accidentally marked as previously rendered.
This is too much knowledge of the business logic for the React component anyway.
The Redux state should present itself in a way that's simple for the React component to consume. Hence the introduction of the `getChangesTree()` selector in this patch. This method allows us to present a comfortable structure to React while keeping the Redux structure comfortable for us to work with. This separation enables increased flexibility to restructure the Redux state without impacting the React components.
More about Redux selectors here: https://redux.js.org/recipes/computing-derived-data
Differential Revision: https://phabricator.services.mozilla.com/D16068
--HG--
rename : devtools/client/inspector/changes/moz.build => devtools/client/inspector/changes/selectors/moz.build
extra : moz-landing-system : lando
When a declaration is disabled, it is tracked as removed in the Changes panel.
When deleting a disabled declaration, we take care not track it as removed again.
Includes stricter checks when matching previously tracked added and removed declarations.
Differential Revision: https://phabricator.services.mozilla.com/D13616
--HG--
extra : moz-landing-system : lando
Depends on D12588
Support indefinite nesting by declaring the --diff-level CSS custom property as an inline style on the element at its level of nesting.
This custom property will be used in the stylesheet to compute the appropriate padding-left to create the indentation necessary.
A minumum offset is used, --diff-level-min-offset, to account for the first level (zero-indexed) and to allow additional padding on added/removed lines to clear the +/- icons.
Differential Revision: https://phabricator.services.mozilla.com/D12590
--HG--
extra : moz-landing-system : lando
ChangesView was challenging because the async call was in the constructor. I moved it out of the
constructor to the init method, and do a check to see if its been initialized in the destroy method.
Depends on D11886
Differential Revision: https://phabricator.services.mozilla.com/D11887
--HG--
extra : moz-landing-system : lando
Patrick Brosset
Mihai Alexandru Michis
Julian Descottes
Andreea Pavel
Razvan Caliman
arthur.iakab
Rainier G
Brindusan Cristian
Sebastian Hengst
Csoregi Natalia
Florens Verschelde
yulia
Ciure Andrei