UI Mocks support feature

[evilaliv3]

While working with many projects a typical user requirement has been to be able to mock some UI elements to:

• change or remove a text
• fully change the UI

This requirements has been generally solved by the injection of custom CSS or Javascript where each globaleaks user solved it in its way and approach.

The most structured projects like the Bustia Etica of Barcelona (https://bustiaetica.barcelona.cat/, https://github.com/AjuntamentdeBarcelona/bustia-etica-bcn) properly addressed the issue with an advanced implementation that by using https://github.com/naugtur/insertionQuery make it possible to attach a mock to an HTML selector.

This ticket is to keep track of changes to make it possible for the user to easily define UI mocks to be applied on HTML selector.

[evilaliv3]

I've prototyped a component to support this requirement by means of the standard MutationObserver

The component make it possible to assign an HTML mock to an HTML selector.

The implementation make it possible to define the mock as a function and in this situation the function is always re-evaluated as the element changes. This second option make it possible to implement dynamic mocks.

Example of simple mock for single-language platforms:

GLClient.UIMocks.add('HeaderBox', '<div>Here comes the Mock!</div>');

Example of mock for multi-language platforms:

var multilangMock = function() {
  if (GLClient.language == 'it') {
    '<div>Ecco qua il Mock!</div>';
  } else {
    '<div>Here comes the Mock!</div>';
  }
}

GLClient.UIMocks.add('HeaderBox', multilangMock);

[evilaliv3]

@jbitlloch what do you think of this patch? would this satisfy all your needs in a more safe manner?

\cc @NSkelsey

[evilaliv3]

Moving forward this implementation based on MutationObserver i've now implemented it all just using Angular $routeChangeSuccess that is called at the end of the page load.

GL.mockEngine.addMock('*', '#HeaderBox', 'Welcome to GlobaLeaks!');

GL.mockEngine.addMock('*', '#HeaderBox', function(scope){ return 'Welcome to GlobaLeaks!'; });

GL.mockEngine.addCallback(
  '/#/submission',
  function(scope){alert("This function will be called as the url will change in /#/submission");}
);

The new mockEngine passes the angular $rootScope at each callback macking it possible for the mock to know the full state of the application and implement choices based on on it (e.g. implementing different mocks for different languages)