Vimium: Vimium destroys some functionality of Angular application

[vbrandl]

The following Angular application doesn't work with vimium activated: https://keyserver.ntzwrk.org/preview

I don't know what exactly causes the problems but here are the steps to reproduce:
Problem 1: Header goes missing

1. Go to https://keyserver.ntzwrk.org/preview
2. Navigate to any other subpage, e.g. Submit and navigate back to the search page
3. The header above the search bar is missing

Problem 2: Statistics and graphs are not loading:

1. Go to https://keyserver.ntzwrk.org/preview
2. Navigate to the Stats or Graphs subpage
3. Statistics and graphs are not loading. When visiting https://keyserver.ntzwrk.org/preview/#/stats or https://keyserver.ntzwrk.org/preview/#/graphs directly, both work fine but when navigating there, they don't

Currently the source code is not available on GitHub but it should be in a few days.

[smblott-github]

Cannot reproduce Problem 1, but there's definitely something weird happening for Problem 2. The console shows various CSP errors, eg...

[vbrandl]

Strange. I just tried again using a standalone version of Firefox 57.0.1 with only vimium installed and I could reproduce the issue.
Also with vimium deactivated, the graphs load as intended despite the CPS error.

[JoshuaRichards]

Vimium seems to break angular change detection. I've found an example at https://jsfiddle.net/yurzui/1hk7knwq/

Disabling vimium and refreshing the page makes the button text change when clicked as expected

[vinaychandra]

A simpler example where Vimium is failing Angular applications is on Angular Material. Clicking on the side tab does not work as intended. Click does not navigate to the correct page. Disabling the addon restores the functionality immediately.

[aleph-naught2tog]

With Vimium activated, I can reproduce Issue 1 reliably on FF. However, disabling Vimium does not fix it in FF; I haven't tried removing it to see if it does.

In Chrome, I had no error on the site until installing Vimium, then the reflected-xss error appeared as well--but the header above the search bar stays regardless of that error and Vimium being enabled.

[rfvoltolini]

Just to add, I could reproduce it with FireFox 57.0.4 (64-bit) and with

• Vimium 1.62.5
• Vimium 1.62.6
• Vimium 1.62.8

But not with Vimium 1.62.2. So it probably narrows the problem to a set of commits.

As @JoshuaRichards commented it appears to break Angular change detection system. I've created a simple Plunker to test the problem:

1. Open the Plunker with Vimium disabled or uninstalled
2. Click the button and/or change the text input
3. The header "Hello Angular! v5.2.1" changes _automagically_
4. Check the console, it shows that the property name was changed and every time that getName() was invoked (as requested by the Angular change detection system)
5. Install Vimium 1.62.5 or above or enable the extension if already installed
6. At the Plunker hit Stop and Run to reload the application
7. Clicking the button or changing the input does not changes the header <h2>Hello {{getName()}}</h2>

[smblott-github]

Thanks for that, @rfvoltolini. In that case, #2871 is a likely culprit.

[mrmr1993]

My guess is #2871 is to blame: every call to addEventListener adds a DOM attribute to elements, which is likely to confuse AngularJS.

[rfvoltolini]

You're welcome @smblott-github , thanks all of you for providing such a wonderful extension.

@mrmr1993 that's very possible. I am not aware how Angular (talking about Angular, not AngularJS) manipulates the DOM and why _vimium-has-onclick-listener or any other attributes might be interfering with Angular. But it is probably done here

One thing I noticed is that when Vimium is enabled, the click event handler of buttons get changed

From:

function(event) {
  // https://github.com/angular/zone.js/issues/911, in IE, sometimes
  // event will be undefined, so we need to use window.event
  event = event || _global.event;
  if (!event) {
    return;
  }
  // event.target is needed for Samusung TV and SourceBuffer
  // || global is needed https://github.com/angular/zone.js/issues/190
  var target = this || event.target || _global;
  var tasks = target[zoneSymbolEventNames$1[event.type][FALSE_STR]];
  if (tasks) {
    // invoke all tasks which attached to current target with given event.type and capture = false
    // for performance concern, if task.length === 1, just invoke
    if (tasks.length === 1) {
      invokeTask(tasks[0], target, event);
    } else {
      // https://github.com/angular/zone.js/issues/836
      // copy the tasks array before invoke, to avoid
      // the callback will remove itself or other listener
      var copyTasks = tasks.slice();
      for (var i = 0; i < copyTasks.length; i++) {
        if (event && event[IMMEDIATE_PROPAGATION_SYMBOL] === true) {
          break;
        }
        invokeTask(copyTasks[i], target, event);
      }
    }
  }
}

To:

function(event) {
  var /** @type {?} */ allowDefaultBehavior = eventHandler(event);
  if (allowDefaultBehavior === false) {
    // TODO(tbosch): move preventDefault into event plugins...
    event.preventDefault();
    event.returnValue = false;
  }
}

I am sure that debugging Angular is not the intent here, but probably understanding it's mechanism would help finding a solution that not interferes with Angular or other javascript frameworks.

Sorry due to my lack of knowledge I can't help more in debugging this problem.

[smblott-github]

every call to addEventListener adds a DOM attribute to elements, which is likely to confuse AngularJS

That doesn't seem to be the problem. Removing this line doesn't fix things.

It looks like just replacing Element::addEventListener causes the issue.

[adrm]

Hi! I can reproduce this issue. Disabling Vimium makes every Angular app work again. I think it would be fair to add a really big and flashy note in the extension description telling that installing this extension will break every Angular app.

[rfvoltolini]

Tested and working perfectly with version 1.63. Thanks!