Some devtools-related feedback after CSSConfEU

[Patrick Brosset]

Hi devtools,

I was at CSS Conf EU this week end (it was great!).
Out of the talks, here are the devtools-related things I noted:

- It looks like a staggering 66% of all front-enders use sass! So,
source-maps support isn't just a nice to have, it's a must.

- CSS blend modes were demo'd. This is typically the type of CSS features
we usually have tooltips for, so I've filed bug 1209057 for it.

- Talking about blend modes, I think there could be a use for them in our
highlighters' CSS code. We've had problems where we wanted highlighters in
the page to always be easily visible, but that's hard when the page's
background can be any color. Blend-modes could be used to our advantage for
this.

- One speaker mentioned how cool it was to use arrow up/down (with shift)
in the devtools rule-view to change a gradient's angle (to see the
gradient's direction change live). Whenever we come up with a gradient
visual editor, we should preserve the ability to change the angle easily.

- A useful animation timing-function is "steps" (step-end, step-start,
steps(n)). In opposition to things like linear, this jumps from step to
step.
We have a tooltip for cubic-bezier curves, but we have nothing for steps.
We should (because they're not so easy to get right). Filed bug 1209067.

- Talking about these tooltips, it occurred to me they might not be the
right UI elements to edit styles (filters, timing-functions, gradients,
colors, ...). They're a panel that floats on top and this might cause
problems:
- it may partly hide other important stuff (other css properties, or even
content)
- it requires to either know the key shortcut to dismiss, or to click
outside (but where?)
I don't know if people have ideas about this.
I think Brackets does something where it expands specific editor panels
within the code. Maybe something to explore.

- Our color picker doesn't show color names, maybe there should be a tab
that simply lists them.

- I've wanted to create a flexbox highlighter for a while, something that
would show users the flex main axis, the grow/shrink values, things like
this. This might be useful, but something as simple as highlighting the
flex items would already help a lot. That's because elements might not have
a background or a border, so you don't see whether an item has stretched or
not, and how far.
Also it occurred to me that the main problem people have when using flexbox
is knowing which properties exist and which ones do what. I, for one,
always end up using a cheatsheet, and everyone I've talked to seem to do
the same.
So, a useful tool would be something that shows you everything you can use
in CSS on the flex container or items to align, stretch, wrap things.

- Also related to flexbox, but other css properties do this: flex items
don't float, and if their flex property is set, then widget is overridden.
It'd be nice if the rule-view showed these properties as not being taken
into account, maybe crossed-out, just like we do for overridden properties.
Filed bug 1209075.

Patrick

[Joe Walker]

And similar from JSConf.EU...

So Panos did a great Valence talk, but I'm guessing that's not news here.

I missed the first day (I'm sure Panos can report the good parts) On the
second day, most of the better talks were fairly tangentially related to
JS. The best being @cczona's excellent talk on the perils of machine
learning [0].

The most relevant to our tools was Christoph Pojer's talk [1] on
refactoring JS, using jscodeshift [2] which was interesting as a method of
fixing the warts in our code. On a side note, I'd be interested with
experimenting with a code editor that can automatically generate refactor
scripts based on your manual changes. He finished his talk by running a
script on the material-ui library to convert many instances of
React.createClass to ES6 classes including inlining functions used in
mixins. So the finale was a huge pull request [3].

Joe.

[0]:
http://2015.jsconf.eu/speakers/carina-c-zona-consequences-of-an-insightful-algorithm.html
[1]:
http://2015.jsconf.eu/speakers/2015-09-16-christoph-pojer-evolving-complex-systems-Incrementally.html
[2]: https://github.com/facebook/jscodeshift
[3]: https://github.com/callemall/material-ui/pull/1734/files


On Mon, Sep 28, 2015 at 3:25 PM Patrick Brosset <pbro...@mozilla.com>
wrote:

> _______________________________________________
> dev-developer-tools mailing list
> dev-devel...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-developer-tools
>

[Panos Astithas]

I attended the first half of the talks on Friday, but although informative,
they weren't pertinent to our goals. The most common question I got after
my talk was "when are you going to support IE and Node?", which is
interesting, given that I only mentioned it in passing once and didn't put
any emphasis on it.

I ended up spending a lot of time in the Mozilla Lounge helping with the
Firefox OS workshop and demoing stuff. The most useful insight from that
experience was that connecting WebIDE over WiFi can be slow, particularly
with the TV, and we don't provide good enough feedback, so people generally
tended to just click on things to disconnect or reconnect, often
exacerbating the problem. Another problem is that WebIDE displays an error
if it times out sending a request (often seen when installing an app), but
if later the response returns, we don't clear the error, leaving the user
confused [1].

Part of the WiFi debugging issues with the TV were due to the multiple
subnets that people in the same wireless AP were on, which I think is a
fairly edgy case. The TV uses the manual remote connection runtime and
routing probably wasn't set up correctly by the DHCP server, so those who
ended up in a different subnet than the TV were out of luck. Using
multicast discovery and a PIN for pairing would have helped. I think we
have a bug for that, but I can't find it at the moment.

Debugging over WiFi was great, but I saw one occasion where the QR code was
very small on the user's laptop. Manually enlarging the window helped
however (or zooming in, I didn't see what he was doing) and he managed to
connect successfully without any help. Perhaps we should mention that in
the dialog's descriptive text [2].

I was amazed however with people who would only need a few minutes once set
up, to create usable apps on the TV from WebIDE. Someone created a
tic-tac-toe app in like 15 minutes, and he wasn't the only one!

Panos

[1]: Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1209413
[2]: Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1209417