1530275 - Replace `defer` usage with `async/await` in devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js

Status: RESOLVED FIXED

(DevTools :: Shared Components, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

defer is used in devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js#52-61, but we should use new Promise instead.

Here's the current code:

  const def = defer();
  // Wait for the tooltip to be shown before calling instanciating the widget
  // as it expect its DOM elements to be visible.
  this.tooltip.once("shown", () => {
    const widget = new CubicBezierWidget(container, bezier);
    def.resolve(widget);
  });
  return def.promise;

What we want to have instead is transform the function to an async one, and in the code await on the tooltip:

  // Wait for the tooltip to be shown before calling instanciating the widget
  // as it expect its DOM elements to be visible.
  await this.tooltip.once("shown");
  return new CubicBezierWidget(container, bezier);

Comment 1

[asish7295]

Hi,i am an outreachy applicant and am looking to make my contribution.could you assign it to me so that i can start working on it. Thanks

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Hello again asish.
I just assigned you another bug, so maybe we should wait until you are done with it? (also we may want to keep this one for the first bug of another person maybe)

Comment 3

[Paarmita Bhargava]

Hey,
I am also an outreachy applicant and would like to take this up as my first contribution?
Can you please assign it to me?

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Hello paarmita1998, thanks for wanting to help us!

I assigned the bug to you, so you can start working on it 🙂
You can read http://docs.firefox-dev.tools/getting-started/ to setup the work environment. Make sure to use Artifact Builds when asked to as it's much faster.
Feel free to ask any question, either here or on our Slack.

Comment 5

[Erik Carrillo [:E_Carr]]

(In reply to Nicolas Chevobbe from comment #0)

defer is used in devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js#52-61, but we should use new Promise instead.

Here's the current code:

  const def = defer();
  // Wait for the tooltip to be shown before calling instanciating the widget
  // as it expect its DOM elements to be visible.
  this.tooltip.once("shown", () => {
    const widget = new CubicBezierWidget(container, bezier);
    def.resolve(widget);
  });
  return def.promise;

What we want to have instead is transform the function to an async one, and in the code await on the tooltip:

  // Wait for the tooltip to be shown before calling instanciating the widget
  // as it expect its DOM elements to be visible.
  await this.tooltip.once("shown");
  return new CubicBezierWidget(container, bezier);

Hello, I would like to ask if I can be assigned to this bug if no one is currently working on it. Thanks.

Comment 6

[Paarmita Bhargava]

Hey Erik, I am working on it.

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Erik, make sure to check the bug status when commenting :)

Comment 8

[Paarmita Bhargava]

Hey Nicolas, Can you please review the patch- https://phabricator.services.mozilla.com/D21406

Comment 9

[Paarmita Bhargava]

Attachment: Bug 1530275 - Replace defer usage with async/await in SwatchCubicBezierTooltip.js; r=nchevobbe.

Comment 10

[Nicolas Chevobbe [:nchevobbe]]

Attachment: image.png

I realize I didn't wrote a proper explanation on how to show the widget, to ensure the changes don't break anything.

So, to show the widget, you should:

1. In the URL bar, paste data:text/html,<meta charset=utf8><style>h1 { color: red; transition: color 0.3s ease-in; } h1:hover {color: yellow;}</style><h1>Hello</h1> . That will open a simple page with an animation on hover.
2. Right click on "Hello", and select "Inspect the element" to open the inspector.
3. In the Inspector rule view, in the transition line, you should see an icon before "ease-in", click on it
4. This should open the widget, and it should look like what's in the attachment.

Make sure you can reproduce all these steps before submitting a new patch :)

Comment 11

[Paarmita Bhargava]

Okay, will do it! Thanks.

Comment 12

[Paarmita Bhargava]

Hey I followed the above steps and made the new patch
Can you please review- https://phabricator.services.mozilla.com/D21591

Comment 13

[Paarmita Bhargava]

Attachment: Bug 1530275- Replace defer usage with async/await in SwatchCubicBezierTooltip.js; r=nchevobbe

Comment 14

[Paarmita Bhargava]

Attachment: Bug 1530275- Replace defer usage with async/await in SwatchCubicBezierTooltip.js; r=nchevobbe

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ccb0b59aa78e
Replace defer usage with async/await in SwatchCubicBezierTooltip.js; r=nchevobbe

Comment 16

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/ccb0b59aa78e