Indicator Lines get Tilted when using /**/ type comments when using SynthWave84 Theme and Fira Code Font

@DanTup

I added /* */ comments to a code-block to temporarily disable an element, and it resulted in the indicator-lines ALSO being tilted, on the Dart-VSCode-Plugin release v3.8, and VSCode 1.41.1.

Screenshot:

I am using the SynthWave84 theme, with custom css enabled in VSCode (necessary to get the theme running), using Fira Code as Font set to size 15.

And then had a short conversation on twitter with @DanTup about it ;) https://twitter.com/DanTup/status/1222532898294763522

It happened on this code-block:

Widget _buildPanel() {
  return ExpansionPanelList(
    expansionCallback: (int index, bool isExpanded) {
      setState(
        () {
          _data[index].isExpanded = !isExpanded;
        },
      );
    },
    children: _data.map<ExpansionPanel>(
      (Item item) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            /*return ListTile(
              title: Text(item.headerValue),
            );*/
            return Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text("asdsa"),
                ],
              ),
            );
          },
          body: ListTile(
            title: Text(item.expandedValue),
            subtitle: Text('To delete this panel, tap the trash can icon'),
            trailing: Icon(Icons.delete),
            onTap: () {
              setState(
                () {
                  _data.removeWhere((currentItem) => item == currentItem);
                },
              );
            },
          ),
          isExpanded: item.isExpanded,
        );
      },
    ).toList(),
  );
}

Would love if you could take a look at this! :)

I'm unable to reproduce this using the SynthWave84 theme:

So I think this might be being caused by your custom CSS. If you can reproduce it without custom CSS, please let me know which theme and how to repro and I'll take a look. If it only happens with your custom CSS, I think you'd need to fix it there.

@DanTup

@DanTup Thanks for looking into this! I did some further experimentation enabling other extensions and elements piece by piece. Apparently this happens when using both SynthWave '84 as theme AND Fira Code as font on my Mac (main dev environment, don't think I mentioned it before). It doesn't matter in that case if custom CSS is enabled.

Synthwave 84, Fira Code Font, No Custom CSS

Synthwave 84, Fira Code Font, With Custom CSS

Synthwave 84, Default Font, With Custom CSS

Default Theme, Fira Code Font, No Custom CSS

Seeing as this is a weird conflict between 2 niche (?) settings/extensions I'd be totally fine with not putting energy and seeing this as weird edge-case, but that's up to you :)

Also updating the title of this ticket to better reflect the nature of the bug.

Hmm, I'm still not seeing this using Fira Code and SynthWave '84 theme (also on macOS) :(

I've included a => in the screenshot so you can see it's using Fira Code+ligatures, and you can tell them theme from the colours.

Does it happen all the time? Can you provide a full file (copy/pasted, so I can copy it) that shows the issue (and ensure if you close/re-open the file it remains like that). Thanks!

Thanks for trying it out again! :)

Ok, new attempt. Doing a completely fresh VSCode install (using these instructions to remove all traces and previous settings https://stackoverflow.com/questions/42603103/how-to-completely-uninstall-vscode-on-mac )

Fresh install of VSCode, all default settings, newest version
Fresh reinstall of Fira Code, using the ttf files
Getting the Dart and Flutter plugin (newest versions)
Enabling Fira Code

Everything fine until here

Installing & Enabling Synthwave 84

Now we get the tilted lines again.

New discovery: Tilted lines turn into regular lines when selected

settings:

{
    "dart.previewFlutterUiGuides": true,
    "workbench.colorTheme": "SynthWave '84",
    "editor.fontLigatures": true,
    "editor.fontFamily": "'Fira Code'",
}

FontLigatures are on for Fira Code, but the tilted lines also appear without it being enabled.

Here is the content from one file as an example for you to try to reproduce, in lines 54 & 55 (which I have closed and re-opened to check if it still appears). It doesn't matter if the file compiles or not.

import 'package:flutter/material.dart';
import 'package:coldmaker/screensize_reducers.dart';

void main() => runApp(MyApp());

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
        Container(
          color: Colors.blue[200],
          height: screenHeight(context,
              dividedBy: 2),
        ),
        Container(
            color: Colors.yellow[200],
            height: screenHeight(context,
                dividedBy: 3))
      ]),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /*Text(
              'You have pushed the button this many times:',
            ),*/
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

I'm out of ideas. What else could we be looking at here? System Language Settings? Default Keyboard? ;P

Still not seeing it 🤷‍♂️

Do you have all of the parts of the Fira Code font installed and are you on the latest version?

Yup, Fira Code is the newest. Old ones uninstalled, fresh download (via download-link & zip, not command-line), used the ttf's, looks the same as on your side.

Do you have any other ideas? :D

Do you have any other ideas? :D

Hmmm, no :-)

Do you have access to any other machine to test there to maybe help identify if it's just you, or just me?

If not, could you try with VS Code Insiders to see which behaviour that has? Or launching VS Code with a temporary --user-data-dir (to clear all settings/extensions) and see if you can repro there to eliminate any other settings/extensions interfering?

Good ideas!

The previous reports were run on my Work-mac (16 inch 2019), now I tried it on my private one (13 inch 2019).

Then I started code with the --user-data-dir command, removed all plugins (except synthwave and dart) and set the settings to the minimally necessary settings again

{
    "dart.previewFlutterUiGuides": true,
    "workbench.colorTheme": "SynthWave '84",
    "editor.fontLigatures": true,
    "editor.fontFamily": "'Fira Code'",
}

Still get tilted lines :(

@BootBlock

Very strange. I still can't reproduce - however @BootBlock is able to (on Windows!). He's going to take a look if he can fix. Thanks!

Sweet, glad to hear I am not the only one! :D

Stop Flutter UI guidelines being tilted for certain fonts

Navigation Menu

Repository navigation

Indicator Lines get Tilted when using /**/ type comments when using SynthWave84 Theme and Fira Code Font #2239

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Indicator Lines get Tilted when using /**/ type comments when using SynthWave84 Theme and Fira Code Font #2239

Description

Activity

DanTup commented on Aug 25, 2020

matthiaszarzecki commented on Sep 8, 2020

DanTup commented on Sep 9, 2020

matthiaszarzecki commented on Sep 28, 2020

DanTup commented on Sep 29, 2020

matthiaszarzecki commented on Oct 6, 2020

DanTup commented on Oct 7, 2020

matthiaszarzecki commented on Oct 11, 2020

DanTup commented on Oct 12, 2020

matthiaszarzecki commented on Oct 12, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions