Closed Bug 1404801 Opened 2 years ago Closed 2 years ago

React-ify animation list

Categories

(DevTools :: Inspector: Animations, enhancement, P3)

enhancement

Tracking

(firefox58 fixed)

RESOLVED FIXED
Firefox 58
Tracking Status
firefox58 --- fixed

People

(Reporter: daisuke, Assigned: daisuke)

References

(Blocks 1 open bug)

Details

Attachments

(6 files)

In this bug, do React-ify animation list. 
It does not include animation visualization, such as summary graph display.
Severity: normal → enhancement
Priority: -- → P3
Assignee: nobody → dakatsuka
Comment on attachment 8915449 [details]
Bug 1404801 - Part 1: Implement basic flow for animation list.

https://reviewboard.mozilla.org/r/186642/#review191716

::: devtools/client/inspector/animation/animation.js:24
(Diff revision 1)
> -
>    init() {
> -    this.provider = createElement(App);
> +    const target = this.inspector.target;
> +    this.animationsFront = new AnimationsFront(target.client, target.form);
> +
> +    this.onNewNodeFront = this.onNewNodeFront.bind(this);

Move this after line 15 before this.init()

::: devtools/client/inspector/animation/animation.js:27
(Diff revision 1)
> +    this.animationsFront = new AnimationsFront(target.client, target.form);
> +
> +    this.onNewNodeFront = this.onNewNodeFront.bind(this);
> +
> +    const provider = createElement(Provider, {
> +      store: this.inspector.store

You need to provide an id and key or else you get prop errors in the console.

http://searchfox.org/mozilla-central/source/devtools/client/inspector/layout/layout.js#97-98

::: devtools/client/inspector/animation/animation.js:56
(Diff revision 1)
> +    this.update();
> +  },
> +
> +  async update() {
> +    const selection = this.inspector.selection;
> +    this.animations =

s/this.animations/const animations

I don't think we need to store this locally since we already dispatch and update our store with this list of animations
Attachment #8915449 - Flags: review?(gl) → review+
Comment on attachment 8915450 [details]
Bug 1404801 - Part 2: Implement DOM for animation list.

https://reviewboard.mozilla.org/r/186644/#review191722

::: devtools/client/inspector/animation/components/Animation.js:1
(Diff revision 1)
> +/* This Source Code Form is subject to the terms of the Mozilla Public

This component can use a better file and display name such as AnimationListItem or AnimationItem

::: devtools/client/inspector/animation/components/Animations.js:1
(Diff revision 1)
> +/* This Source Code Form is subject to the terms of the Mozilla Public

Component can also use a better file and display name such as AnimationList
Attachment #8915450 - Flags: review?(gl) → review+
Comment on attachment 8915451 [details]
Bug 1404801 - Part 3: Avoid applying old animationinspector.css in inspector.xhtml.

https://reviewboard.mozilla.org/r/186646/#review191724

::: commit-message-d2e49:1
(Diff revision 1)
> +Bug 1404801 - Part 3: Avoid to apply old animationinspector.css in inspector.xhtml. r?gl

s/Aviod to apply/Avoid applying
Attachment #8915451 - Flags: review?(gl) → review+
Comment on attachment 8915451 [details]
Bug 1404801 - Part 3: Avoid applying old animationinspector.css in inspector.xhtml.

https://reviewboard.mozilla.org/r/186646/#review191728

::: devtools/client/themes/animationinspector.css
(Diff revision 1)
>    display: flex;
>  }
>  
>  /* The main animations container */
>  
> -#sidebar-panel-animationinspector {

This can probably be moved into inspector.css
Comment on attachment 8915452 [details]
Bug 1404801 - Part 4: Apply styles for animation list.

https://reviewboard.mozilla.org/r/186648/#review191726

::: devtools/client/themes/animation.css:8
(Diff revision 1)
> + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
> +
> +/* Animation-inspector specific theme variables */
> +
> +.theme-dark {
> +  --even-animation-background-color: rgba(255,255,255,0.03);

s/even-animation/animation-even

Prefix the variable with tool name first.

::: devtools/client/themes/animation.css:8
(Diff revision 1)
> + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
> +
> +/* Animation-inspector specific theme variables */
> +
> +.theme-dark {
> +  --even-animation-background-color: rgba(255,255,255,0.03);

We need to probably rethink the background colors in the future and make sure they are matching our new photon styles. I won't block this for now since this is still very much a WIP, but I will keep thinking about this. I am sure you can even find styles to reuse from looking at https://docs.google.com/document/d/1AJ7oHC7akXJiliheHjhFc4fTonaN31Eo_P2M8gssL8s/edit.

Also, see variables.css as there might be already appropriately defined variable colors to use. If you do use a new variable color, reflag me for review or create a new patch for that.

::: devtools/client/themes/animation.css:11
(Diff revision 1)
> +
> +.theme-dark {
> +  --even-animation-background-color: rgba(255,255,255,0.03);
> +}
> +
> +.theme-light {

.theme-light and .theme-firebug are actually equivalent. :root will capture both of these themes and when one of these themes aren't defined.

You can simply do 

:root {
  --even-animation-background-color: rgba(128,128,128,0.03)
}

follow by

:root.theme-dark {
 ....
}

::: devtools/client/themes/animation.css:22
(Diff revision 1)
> +}
> +
> +/* Root element of animation inspector */
> +#animation-container {
> +  /* How high should animation displayed in the list */
> +  --animation-height: 30px;

This can probably go into :root, but I am not sure you need a variable for this. Can you not just set this in .animation?
Attachment #8915452 - Flags: review?(gl) → review+
Comment on attachment 8915449 [details]
Bug 1404801 - Part 1: Implement basic flow for animation list.

https://reviewboard.mozilla.org/r/186642/#review191716

> s/this.animations/const animations
> 
> I don't think we need to store this locally since we already dispatch and update our store with this list of animations

Thank you Gabriel,

Yeah, I wanted to use this property for test (patch 6).
However, I didn't know that we can send/receive any arguments to EventEmitter.
Will replace to that way instead.
Comment on attachment 8915452 [details]
Bug 1404801 - Part 4: Apply styles for animation list.

https://reviewboard.mozilla.org/r/186648/#review191726

> We need to probably rethink the background colors in the future and make sure they are matching our new photon styles. I won't block this for now since this is still very much a WIP, but I will keep thinking about this. I am sure you can even find styles to reuse from looking at https://docs.google.com/document/d/1AJ7oHC7akXJiliheHjhFc4fTonaN31Eo_P2M8gssL8s/edit.
> 
> Also, see variables.css as there might be already appropriately defined variable colors to use. If you do use a new variable color, reflag me for review or create a new patch for that.

Thanks!
In this time, will use --table-zebra-background color which network monitor is using.
Blocks: 1406285
Blocks: 1406287
Comment on attachment 8915453 [details]
Bug 1404801 - Part 5: Show error message in case of no animations.

https://reviewboard.mozilla.org/r/186650/#review193440

::: devtools/client/inspector/animation/animation.js:47
(Diff revision 2)
>      this.stopListeners();
>  
>      this.inspector = null;
>    },
>  
>    startListeners() {

We should do something similar to the Grid Inspector where we only start the listeners when the panel is selected. See grid-inspector.js#onSidebarSelect. This can be in a separate part.

I would like to see a similar style as seen in the grid-inspector.js where we would have a functions such as isPanelVisible and onSidebarSelect.

::: devtools/client/inspector/animation/animation.js:75
(Diff revision 2)
>        : [];
>  
> -    this.inspector.store.dispatch(updateAnimations(animations));
> +    this.dispatch(updateAnimations(animations));
> +  },
> +
> +  onElementPickerStarted() {

I would like to reformat the ordering of the functions.

We tend to have a lot of event handlers that start with onX such as onElementPickerStarted, onNewNodeFront, etc. I would like to group them together and order them alphabetically. I find it easiest to place them at the bottom of the object prototype. See box-model.js as an example.

::: devtools/client/inspector/animation/components/App.js:31
(Diff revision 2)
>    render() {
> -    const { animations } = this.props;
> +    const { animations, toggleElementPicker } = this.props;
>  
>      return dom.div(
>        { id: "animation-container" },
> -      AnimationList({ animations })
> +      animations.length === 0

We can probably just simplify this by doing it the opposite order:

animations.length ?
  AnimationList({})
  :
  NoAnimationPanel
Attachment #8915453 - Flags: review?(gl) → review+
Comment on attachment 8915453 [details]
Bug 1404801 - Part 5: Show error message in case of no animations.

https://reviewboard.mozilla.org/r/186650/#review193446

::: devtools/client/inspector/animation/components/NoAnimationsPanel.js:32
(Diff revision 2)
> +  render() {
> +    const { elementPicker, toggleElementPicker } = this.props;
> +
> +    return dom.div(
> +      { className: "error-message devtools-sidepanel-no-result" },
> +      [ dom.p({ className: "error-type" }, L10N.getStr("panel.invalidElementSelected")),

We need to prefix all these classes with animation-error-type, etc. 

Since this is no longer in an iframe and will be in the inspector.xhtml. It is possible that we have clashes with class names from other panels otherwise.

This should also follow the styles of all the other no result messages in all the other inspector sidebar panels, and only use the class name: "devtools-sidepanel-no-result".

See http://searchfox.org/mozilla-central/source/devtools/client/inspector/grids/components/Grid.js#91

::: devtools/client/inspector/animation/components/NoAnimationsPanel.js:33
(Diff revision 2)
> +    const { elementPicker, toggleElementPicker } = this.props;
> +
> +    return dom.div(
> +      { className: "error-message devtools-sidepanel-no-result" },
> +      [ dom.p({ className: "error-type" }, L10N.getStr("panel.invalidElementSelected")),
> +        dom.p({ className: "error-hint" }, L10N.getStr("panel.selectElement")),

Since we aren't styling error-hint / error-type. I don't think we need to add these classes.

Ideally, we are really just checking that a message was displayed in the unit test.

Also, I feel like the 2 strings could probably be merge into one unless they are shown in different occassions.
Comment on attachment 8915453 [details]
Bug 1404801 - Part 5: Show error message in case of no animations.

https://reviewboard.mozilla.org/r/186650/#review193450

::: devtools/client/themes/animation.css:38
(Diff revision 2)
>    background-color: var(--animation-even-background-color);
>  }
> +
> +/* Settings for no animations message */
> +.error-message {
> +  flex: 1;

I feel like this is really meant for the ".animation-container" styling.
Comment on attachment 8915454 [details]
Bug 1404801 - Part 6: Add mochitests.

https://reviewboard.mozilla.org/r/186652/#review193442

::: devtools/client/inspector/animation/test/browser_animation_animation_list_exists.js:3
(Diff revision 2)
> +/* Any copyright is dedicated to the Public Domain.
> +   http://creativecommons.org/publicdomain/zero/1.0/ */
> +"use strict";

New line before "use strict";

::: devtools/client/inspector/animation/test/browser_animation_animation_list_exists.js:19
(Diff revision 2)
> +  ok(panel.querySelector(".animation-list"),
> +     "The animation-list is in the DOM");
> +  is(panel.querySelectorAll(".animation-list .animation-item").length, animations.length,
> +     "The number of animations displayed matches the number of animations");
> +
> +  const animationItemEls = panel.querySelectorAll(".animation-list .animation-item");

Add an info() stating what you are testing in this section of the unit test - Checking the background color fo the animation list items.

I am not quite sure we even need to test this since this would be guaranteed in the CSS we have rewritten for zebra styling.

::: devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js:18
(Diff revision 2)
> +
> +  info("Select node .still and check that the panel is empty");
> +  const stillNode = await getNodeFront(".still", inspector);
> +  await selectNodeAndWaitForAnimations(stillNode, inspector);
> +
> +  ok(panel.querySelector(".error-type"),

Add an info() stating what we are checking.

::: devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js:32
(Diff revision 2)
> +
> +  info("Select the comment text node and check that the panel is empty");
> +  const commentNode = await inspector.walker.previousSibling(stillNode);
> +  await selectNodeAndWaitForAnimations(commentNode, inspector);
> +
> +  ok(panel.querySelector(".error-type"),

Same as above.

::: devtools/client/inspector/animation/test/head.js:79
(Diff revision 2)
> + * @param {String} url The url to be loaded in the new tab
> + * @return a promise that resolves to the tab object when the url is loaded
> + */
> +const _addTab = addTab;
> +addTab = function (url) {
> +  return enableAnimationFeatures().then(() => _addTab(url)).then(tab => {

I think this can be rewritten without using .then() with async await. It would make the code cleaner.

::: devtools/client/inspector/animation/test/head.js:92
(Diff revision 2)
> +};
> +
> +/*
> + * Set the inspector's current selection to a node or to the first match of the
> + * given css selector and wait for the animations to be displayed
> + * @param {String|NodeFront}

Add a new line to separate the JSDoc comment and @param.

::: devtools/client/inspector/animation/test/head.js:101
(Diff revision 2)
> + * loaded in the toolbox
> + * @param {String} reason
> + *        Defaults to "test" which instructs the inspector not
> + *        to highlight the node upon selection
> + * @return {Promise} Resolves when the inspector is updated with the new node
> +   and animations of its subtree are properly displayed.

I think this is missing a "*" at the front.
Attachment #8915454 - Flags: review?(gl) → review+
Comment on attachment 8915453 [details]
Bug 1404801 - Part 5: Show error message in case of no animations.

https://reviewboard.mozilla.org/r/186650/#review193446

> Since we aren't styling error-hint / error-type. I don't think we need to add these classes.
> 
> Ideally, we are really just checking that a message was displayed in the unit test.
> 
> Also, I feel like the 2 strings could probably be merge into one unless they are shown in different occassions.

Thanks Gabriel!

Do you mean that we should merge the strings of animationinspector.properties?
e.g.
panel.noAnimation = No animations were found for the current element.\nPick another element from the page.

If so, can we add another properties file for new animation inspector? Since this modifying effects old one and localization.
(In reply to Daisuke Akatsuka (:daisuke) from comment #26)
> Comment on attachment 8915453 [details]
> Bug 1404801 - Part 5: Show error message in case of no animations.
> 
> https://reviewboard.mozilla.org/r/186650/#review193446
> 
> > Since we aren't styling error-hint / error-type. I don't think we need to add these classes.
> > 
> > Ideally, we are really just checking that a message was displayed in the unit test.
> > 
> > Also, I feel like the 2 strings could probably be merge into one unless they are shown in different occassions.
> 
> Thanks Gabriel!
> 
> Do you mean that we should merge the strings of
> animationinspector.properties?
> e.g.
> panel.noAnimation = No animations were found for the current element.\nPick
> another element from the page.
> 
> If so, can we add another properties file for new animation inspector? Since
> this modifying effects old one and localization.

Ya I think we should merge the strings to panel.noAnimation. I don't think we need another file for the new animation inspector. since panel.noAnimation is still a new string.
Ok! Thank you very much.
Comment on attachment 8915454 [details]
Bug 1404801 - Part 6: Add mochitests.

https://reviewboard.mozilla.org/r/186652/#review194374

::: devtools/client/inspector/animation/animation.js:74
(Diff revision 2)
>        ? await this.animationsFront.getAnimationPlayersForNode(selection.nodeFront)
>        : [];
>  
>      this.dispatch(updateAnimations(animations));
> +
> +    this.inspector.emit("animationinspector-updated", animations);

There's an update mechanism in the inspector already. It works like this:

When you start updating a sub-panel inside the inspector, you do this:

`let done = this.inspector.updating("my-sub-panel");`

And when you are done, you do this:

`done();`

This is how the inspector knows when all of its parts are ready. The rules view does it, the computed view too, etc.
The old animationinspector does it too in animation-controller.js

We need to make sure the new animationinspector is plugged in to this mechanism as well.
If you do this, then the added value is that, in head.js, you can just wait for the inspector to be ready after opening. It will only be ready when the done() has been called.
Also, when you select a node in the inspector, the inspector-updated event will be sent only after the animationinspector has called done() too. So you don't have to wait for another new event.
You can see the logic for this in the `updating` function in devtools/client/inspector/inspector.js

::: devtools/client/inspector/animation/test/browser_animation_animation_list_exists.js:21
(Diff revision 2)
> +  is(panel.querySelectorAll(".animation-list .animation-item").length, animations.length,
> +     "The number of animations displayed matches the number of animations");
> +
> +  const animationItemEls = panel.querySelectorAll(".animation-list .animation-item");
> +  const evenColor =
> +    panel.ownerDocument.defaultView.getComputedStyle(animationItemEls[0]).backgroundColor;

`panel.ownerGlobal` is shorter, and I think ESLint actually warns you about using this shorter form.

::: devtools/client/inspector/animation/test/browser_animation_animation_list_exists.js:23
(Diff revision 2)
> +
> +  const animationItemEls = panel.querySelectorAll(".animation-list .animation-item");
> +  const evenColor =
> +    panel.ownerDocument.defaultView.getComputedStyle(animationItemEls[0]).backgroundColor;
> +  const oddColor =
> +    panel.ownerDocument.defaultView.getComputedStyle(animationItemEls[1]).backgroundColor;

same here (and later in the test)

::: devtools/client/inspector/animation/test/browser_animation_animation_list_exists.js:27
(Diff revision 2)
> +  animationItemEls.forEach((animationItemEl, i) => {
> +    const expectedBackgroundColor = i % 2 === 0 ? evenColor : oddColor;
> +    const backgroundColor =
> +      panel.ownerDocument.defaultView.getComputedStyle(animationItemEl).backgroundColor;
> +    is(backgroundColor, expectedBackgroundColor,
> +       "The background-color shoud be changed to alternate");
> +  });

You are essentially testing that `.animation-item:nth-child(2n+1)` works here. Not sure this is really needed in fact. If we had some JS logic to paint the background, then I'd agree that a test for it was useful, but I don't think it is useful to test that :nth-child CSS selectors work.

::: devtools/client/inspector/animation/test/browser_animation_animation_list_exists.js:41
(Diff revision 2)
> +  // TODO: We need to add following tests after implement since this test has same role
> +  // of animationinspector/test/browser_animation_timeline_ui.js
> +  // * header existance.
> +  // * name label in animation element existance.
> +  // * target node in animation element existance.
> +  // * summary graph in animation element existance.

Sorry I did not look at the other commits, so I don't know. But is this TODO here because these things can't be tested yet because they haven't been implemented yet?
If you have already converted these features to React, then it would be better to complete this test rather than adding a TODO for it.
Attachment #8915454 - Flags: review?(pbrosset)
Comment on attachment 8915454 [details]
Bug 1404801 - Part 6: Add mochitests.

https://reviewboard.mozilla.org/r/186652/#review194374

> Sorry I did not look at the other commits, so I don't know. But is this TODO here because these things can't be tested yet because they haven't been implemented yet?
> If you have already converted these features to React, then it would be better to complete this test rather than adding a TODO for it.

Hi Patrick,
Yeah, I left this todo since I have not implemented these features.
Or, should we remove?
(In reply to Gabriel [:gl] (ΦωΦ) from comment #22)
> Comment on attachment 8915453 [details]
> Bug 1404801 - Part 5: Show error message in case of no animations.
> 
> https://reviewboard.mozilla.org/r/186650/#review193440
> 
> ::: devtools/client/inspector/animation/animation.js:47
> (Diff revision 2)
> >      this.stopListeners();
> >  
> >      this.inspector = null;
> >    },
> >  
> >    startListeners() {
> 
> We should do something similar to the Grid Inspector where we only start the
> listeners when the panel is selected. See grid-inspector.js#onSidebarSelect.
> This can be in a separate part.
> 
> I would like to see a similar style as seen in the grid-inspector.js where
> we would have a functions such as isPanelVisible and onSidebarSelect.
> 

Hi Gabriel,
Could you review patch 5 again? I added a new logic which updates the UI when new animation differ from previous one.
Also, I did not introduce the reflowTracker. Since we can detect animation change event from AnimationsFront.
Flags: needinfo?(gl)
(In reply to Daisuke Akatsuka (:daisuke) from comment #30)
> Comment on attachment 8915454 [details]
> Bug 1404801 - Part 6: Add mochitests.
> 
> https://reviewboard.mozilla.org/r/186652/#review194374
> 
> > Sorry I did not look at the other commits, so I don't know. But is this TODO here because these things can't be tested yet because they haven't been implemented yet?
> > If you have already converted these features to React, then it would be better to complete this test rather than adding a TODO for it.
> 
> Hi Patrick,
> Yeah, I left this todo since I have not implemented these features.
> Or, should we remove?
No that's ok to leave them here. Thanks!
Comment on attachment 8915454 [details]
Bug 1404801 - Part 6: Add mochitests.

https://reviewboard.mozilla.org/r/186652/#review194812
Attachment #8915454 - Flags: review?(pbrosset) → review+
Comment on attachment 8915453 [details]
Bug 1404801 - Part 5: Show error message in case of no animations.

https://reviewboard.mozilla.org/r/186650/#review194920

::: devtools/client/inspector/animation/animation.js:56
(Diff revisions 2 - 3)
> +
> +    this.inspector = null;
>    },
>  
> -  onNewNodeFront() {
> -    this.update();
> +  dispatch(action) {
> +    this.inspector.store.dispatch(action);

I am slightly hesistant of having a method like this. Since we can easily just call this.inspector.store.dispatch(action) every place we need to dispatch. We typically shorten this by storing this.store.

We typically only call this on any kind of updates, but we also usually need to have a check in the update function to make sure the inspector hasn't been destroyed. Having a dispatch function might make people forget about this pattern.

::: devtools/client/inspector/animation/components/NoAnimationPanel.js:33
(Diff revision 3)
> +    const { elementPicker, toggleElementPicker } = this.props;
> +
> +    return dom.div(
> +      { className: "animation-error-message devtools-sidepanel-no-result" },
> +      [ dom.p(null, L10N.getStr("panel.noAnimation")),
> +        dom.button({ className: "animation-element-picker devtools-button"

If this is gonna happen, I think we should follow similar indentations like in layout/grid components where the props are all indented on a new line.

::: devtools/client/inspector/animation/utils/utils.js:9
(Diff revision 3)
> +
> +"use strict";
> +
> +/**
> + * Check the equality timing effects from given animations.
> + * @param {Array} animations.

Add a new line to separate the comment and @param

::: devtools/client/inspector/animation/utils/utils.js:11
(Diff revision 3)
> +
> +/**
> + * Check the equality timing effects from given animations.
> + * @param {Array} animations.
> + * @param {Array} same to avobe.
> + * @return {boolean} true: same timing effects

s/boolean/Boolean

::: devtools/client/inspector/animation/utils/utils.js:26
(Diff revision 3)
> +    }
> +  }
> +  return true;
> +}
> +
> +module.exports.isAllTimingEffectEqual = isAllTimingEffectEqual;

I prefer to have all exports at the bottom of the file.

::: devtools/client/inspector/animation/utils/utils.js:32
(Diff revision 3)
> +
> +/**
> + * Check the equality given states as effect timing.
> + * @param {Object} state of animation.
> + * @param {Object} same to avobe.
> + * @return {boolean} true: same effect timing

s/boolean/Boolean
I'll land this patches after we fixed bug 1400115.
Flags: needinfo?(gl)
These patches assume that we can use es6 classes for React.
Pushed by dakatsuka@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/623f9e2bd316
Part 1: Implement basic flow for animation list. r=gl
https://hg.mozilla.org/integration/autoland/rev/d0e460f14cae
Part 2: Implement DOM for animation list. r=gl
https://hg.mozilla.org/integration/autoland/rev/c53b1e78bd88
Part 3: Avoid applying old animationinspector.css in inspector.xhtml. r=gl
https://hg.mozilla.org/integration/autoland/rev/8fc606ab71ed
Part 4: Apply styles for animation list. r=gl
https://hg.mozilla.org/integration/autoland/rev/79a0e0e9ebcd
Part 5: Show error message in case of no animations. r=gl
https://hg.mozilla.org/integration/autoland/rev/4fb672bad577
Part 6: Add mochitests. r=gl,pbro
Comment on attachment 8915453 [details]
Bug 1404801 - Part 5: Show error message in case of no animations.

https://reviewboard.mozilla.org/r/186650/#review199218

::: devtools/client/locales/en-US/animationinspector.properties:24
(Diff revision 8)
>  # LOCALIZATION NOTE (panel.selectElement): This is the label shown in the panel
>  # when an invalid node is currently selected in the inspector, to invite the
>  # user to select a new node by clicking on the element-picker icon.
>  panel.selectElement=Pick another element from the page.
>  
> +# LOCALIZATION NOTE (panel.invalidElementSelected):

The localization note was copied but the reference not updated.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.