Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
matthiaszarzecki opened this issue Jan 30, 2020 · 10 comments · Fixed by #2870
Labels
in editor Relates to code editing or language features is bug
Milestone

Comments

@matthiaszarzecki
Copy link

matthiaszarzecki commented Jan 30, 2020

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:
Screenshot 2020-01-30 at 13 32 39

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! :)

@DanTup DanTup added in editor Relates to code editing or language features is bug labels Jan 30, 2020
@DanTup DanTup added this to the v3.9.0 milestone Jan 30, 2020
@DanTup DanTup modified the milestones: v3.9.0, On Deck Mar 11, 2020
@DanTup DanTup modified the milestones: On Deck, Backlog Jul 2, 2020
@DanTup
Copy link
Member

DanTup commented Aug 25, 2020

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

Screenshot 2020-08-25 at 14 33 59

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 added the awaiting info Requires more information from the customer to progress label Aug 25, 2020
@matthiaszarzecki
Copy link
Author

matthiaszarzecki commented Sep 8, 2020

@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
Screenshot 2020-09-08 at 15 08 32

Synthwave 84, Fira Code Font, With Custom CSS
Screenshot 2020-09-08 at 15 08 56

Synthwave 84, Default Font, With Custom CSS
Screenshot 2020-09-08 at 15 10 36
Screenshot 2020-09-08 at 15 10 45

Default Theme, Fira Code Font, No Custom CSS
Screenshot 2020-09-08 at 15 12 16

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.

@matthiaszarzecki matthiaszarzecki changed the title Indicator Lines get Tilted when using /**/ type comments Indicator Lines get Tilted when using /**/ type comments when using SynthWave84 Theme and Fira Code Font Sep 8, 2020
@DanTup
Copy link
Member

DanTup commented Sep 9, 2020

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

Screenshot 2020-09-09 at 11 59 15

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!

@matthiaszarzecki
Copy link
Author

matthiaszarzecki commented Sep 28, 2020

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
Screenshot 2020-09-28 at 15 45 29

  • Installing & Enabling Synthwave 84

Now we get the tilted lines again.
Screenshot 2020-09-28 at 15 46 09

New discovery: Tilted lines turn into regular lines when selected
Screenshot 2020-09-28 at 15 55 26

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

@DanTup
Copy link
Member

DanTup commented Sep 29, 2020

Screenshot 2020-09-29 at 10 02 59

Still not seeing it 🤷‍♂️

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

Screenshot 2020-09-29 at 10 05 38

Screenshot 2020-09-29 at 10 06 36

@matthiaszarzecki
Copy link
Author

matthiaszarzecki commented Oct 6, 2020

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.
Screenshot 2020-10-06 at 23 38 37
Screenshot 2020-10-06 at 23 39 04

Do you have any other ideas? :D

@DanTup
Copy link
Member

DanTup commented Oct 7, 2020

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?

@matthiaszarzecki
Copy link
Author

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'",
}

Screenshot 2020-10-11 at 23 42 56

Still get tilted lines :(

@DanTup
Copy link
Member

DanTup commented Oct 12, 2020

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!

@DanTup DanTup removed the awaiting info Requires more information from the customer to progress label Oct 12, 2020
@DanTup DanTup modified the milestones: On Deck, v3.16.0 Oct 12, 2020
@matthiaszarzecki
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in editor Relates to code editing or language features is bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants