How to display fontawesome icomoon and font icons on a Windows 10 with blocked untrusted fonts

Windows 10 has a mode to disable font-loading from external sources, such as emails when the font has to be fetched outside of the installed fonts. This feature is meant to prevent from attacks coming from untrusted fonts.

The icons in our UI are made with a font file. We used icomoon, but if Windows 10 is set up with the same set similar to projects like fontawesome. We use custom fonts with icomoon.

However, this brings problems with displaying our UI in Firefox and IE11.

How can we solve this problem? The Microsoft recommended way it is to either install the font in the system or whitelist the application that needs that font.

We thought of three ways, at least initially:

  • Install the font
  • Use an SVG file
  • Propose the customer to whitelist the browser to let them use our app. This is the last option as it would make the setting less secure.

Continue reading How to display fontawesome icomoon and font icons on a Windows 10 with blocked untrusted fonts

How we fixed dialogs from being read incorrectly in JAWS

In textbox.io dialogs we had a problem with the word count dialog. In particular what was happening is that JAWS would read the whole dialog and then start reading the rest of the document, like if the dialog was not blocking the UI.

The code looked like the following:


<div aria-describedby="ephox-aria_364273060451471304240619" aria-label="Word Count" aria-labelledby="ephox-aria_766513384441471304240617" class=
"ephox-polish-dialog ephox-polish-dialog-wordcount ephox-polish-dialog-narrow" role="dialog" tabindex="-1">
  <div class="ephox-polish-top">
    <span class="ephox-polish-dialog-title" id="ephox-aria_766513384441471304240617">Word Count</span><span aria-label="Cancel Dialog" class=
    "ephox-polish-dialog-close" role="button" tabindex="-1"></span>
  </div>
  <div class="ephox-polish-dialog-content" id="ephox-aria_364273060451471304240619">
    <table class="ephox-polish-tabular ephox-polish-wordcount-table">
      <thead>
        <tr>
          <th scope="col">Count&nbsp;</th>
          <th scope="col">Document&nbsp;</th>
          <th scope="col">Selection&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Words&nbsp;</td>
          <td class="ephox-polish-wordcount-document-words">402&nbsp;</td>
          <td class="ephox-polish-wordcount-selection-words">0&nbsp;</td>
        </tr>
        <tr>
          <td>Characters (no spaces)&nbsp;</td>
          <td class="ephox-polish-wordcount-document-charsnospaces">2486&nbsp;</td>
          <td class="ephox-polish-wordcount-selection-charsnospaces">0&nbsp;</td>
        </tr>
        <tr>
          <td>Characters&nbsp;</td>
          <td class="ephox-polish-wordcount-document-chars">2994&nbsp;</td>
          <td class="ephox-polish-wordcount-selection-chars">0&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="ephox-polish-dialog-controls"></div>
</div>

Also, in the JS we were focusing the table and adding a key handler for keyboard navigation. This would be picked by AInspector, the tool we use for testing if all the attributes are set normally. The reason why AInspector was complaining it is that the table has a role by default as a data-table and it doesn’t expect any key handler. We removed the key handler from the table and left only the one on the outer dialog, to keep actions such as ESC to close the dialog.

However at this point JAWS would not read the dialog fine anymore: the dialog would result in being read twice, and once the reading would be done it would start reading the rest of the document. In our case, it would start reading the editor toolbar.

In the past, we had a data-table with roles and attributes, e.g:


<table role="grid"><tr role="row"><td role="gridcell"></td></tr></table>

Which is incorrect since the table is already a grid by default. To be semantically correct we tried then to convert the table to a table made of divs, obtaining a table like:


  <div role="grid" class="ephox-polish-tabular-table ephox-polish-tabular ephox-polish-wordcount-table">
    <div class="ephox-polish-tabular-group">
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell" scope="col"> ${headerCounts}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" scope="col"> ${headerDocument}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" scope="col"> ${headerSelection}&nbsp;</span>
        </div>
    </div>
    <div class="ephox-polish-tabular-group">
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell">${wordCountLabel}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-document-words">${documentCountWords}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-selection-words">${selectionCountWords}&nbsp;</span>
        </div>
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell">${wordCountCharsNoSpacesLabel}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-document-charsnospaces">${documentCharactersNoSpaces}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-selection-charsnospaces">${selectionCharactersNoSpaces}&nbsp;</span>
        </div>
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell">${wordcountCharsLabel}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-document-chars">${documentCountCharsWithSpaces}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-selection-chars">${selectionCountCharsWithSpaces}&nbsp;</span>
        </div>
    </div>
</div>

And styled as:


.ephox-polish-tabular-table {
  display: table;
  width: auto;
}

.ephox-polish-editor-container .ephox-polish-tabular-row {
  display: table-row;
  width: auto;
}

.ephox-polish-tabular-heading-cell,
.ephox-polish-tabular-cell {
  display: table-cell;
}

This way we would obtain the behaviour we wanted, we could put a key handler on the table, but then, AInspector wouldn’t see the table as a data-table anymore, therefore cells with values of 0, which are simply fine in a regular table are not seen as “unique”, therefore we had to find a better way to deal with it.

Next step in the resolution of this problem was having the div structure being able to be focused, so we have:

  • Removed the key handler
  • Added a tabindex=”-1″
  • Focused the table

Result: nothing. JAWS would still read the whole table and then the content, so scrap that.

Next thing we tried has been to focus the “Cancel button”, to try stopping JAWS from reading the outer content while still reading the table contents.
Result: JAWS would just read the title of the dialog and announce the close button.

At this point since it is stopping at the cancel button, we might just add a button at the bottom of the dialog, such as an ‘OK’ button, which action would simply to close the dialog.
Result: JAWS would just read the button once again.

At this point we had an illumination:

  • Set a tabindex=”-1″ on a real data-table
  • Focus the table when the dialog opens without putting any keyhandler, while leaving the outer one for the dialog

The markup of the table would look like the following:


<table class="ephox-polish-tabular ephox-polish-wordcount-table" tabindex="-1">
    <thead>
        <tr>
            <th scope="col"> ${headerCounts}&nbsp;</th>
            <th scope="col"> ${headerDocument}&nbsp;</th>
            <th scope="col"> ${headerSelection}&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>${wordCountLabel}&nbsp;</td>
            <td class="ephox-polish-wordcount-document-words">${documentCountWords}&nbsp;</td>
            <td class="ephox-polish-wordcount-selection-words">${selectionCountWords}&nbsp;</td>
        </tr>
        <tr>
            <td>${wordCountCharsNoSpacesLabel}&nbsp;</td>
            <td class="ephox-polish-wordcount-document-charsnospaces">${documentCharactersNoSpaces}&nbsp;</td>
            <td class="ephox-polish-wordcount-selection-charsnospaces">${selectionCharactersNoSpaces}&nbsp;</td>
        </tr>
        <tr>
            <td>${wordcountCharsLabel}&nbsp;</td>
            <td class="ephox-polish-wordcount-document-chars">${documentCountCharsWithSpaces}&nbsp;</td>
            <td class="ephox-polish-wordcount-selection-chars">${selectionCountCharsWithSpaces}&nbsp;</td>
        </tr>
    </tbody>
</table>

And this has actually made AInspector happy, as we were using an actual data-table, without useless attributes. Also, JAWS started reading the table just fine stopping at the end of the dialog.

Hope this will be helpful for someone!

Finding the real position of an element with respect to the document

The first attempt when trying to get the position of an element with respect to the document has been to use the getBoundingClientRect method.

Element.getBoundingClientRect and Element.getClientRects

Continue reading Finding the real position of an element with respect to the document

Understanding MouseEvent properties clientX and pageX

I am working in a section of the application which is going to require the user to be able to do a number of different operations. What I need to use for this are different kinds of MouseEvent properties, however it is important understanding them to use them in the most effective way.
Continue reading Understanding MouseEvent properties clientX and pageX

How to take a video of an Android device from shell

If you develop for Android you might want to be able to capture your screen to show a bug or the differences between two things and ask for suggestions.
So to do so we need adb installed and configured.

First of all make sure that adb sees your device:


adb devices

Then you can launch the recording session:


adb shell screenrecord /sdcard/android-video-capture.mp4

adb shell screenrecord --help
Usage: screenrecord [options] 

Android screenrecord v1.2.  Records the device's display to a .mp4 file.

Options:
--size WIDTHxHEIGHT
    Set the video size, e.g. "1280x720".  Default is the device's main
    display resolution (if supported), 1280x720 if not.  For best results,
    use a size supported by the AVC encoder.
--bit-rate RATE
    Set the video bit rate, in bits per second.  Value may be specified as
    bits or megabits, e.g. '4000000' is equivalent to '4M'.  Default 4Mbps.
--bugreport
    Add additional information, such as a timestamp overlay, that is helpful
    in videos captured to illustrate bugs.
--time-limit TIME
    Set the maximum recording time, in seconds.  Default / maximum is 180.
--verbose
    Display interesting information on stdout.
--help
    Show this message.

Recording continues until Ctrl-C is hit or the time limit is reached.

Forcing Chrome to use the GPU to improve performances on redraw

In Chrome for Android I am working with large images. What we want it is the ability for the user to resize the image properly in a smooth way. For small images this works quite fine, however when it comes to large images, for example images captured from device’s camera, this operation is not really smooth.

To force Chrome to use the GPU, all we need is a CSS transform property applied to the image, for example:


transform: translate3d(0, 0, 0);

This will improve drastically the perceived smoothness of the image while working with it. Even if the CSS transform property it is not going to change anything on how the image is displayed or rendered, it will force the GPU to take care of the rendering, making the transition much smoother.

Converting a Maven Project to a Gradle one

Working with Android Studio means that we need to use gradle projects, however it might happen that some of our old projects were made in pure Java and with Maven, this is actually quite likely.
Converting a project from one format to another is though quite easy to be done through the command line and the built init plugin.
In particular this tool allows us to convert not just from Maven but also from grails, java and scala.
Anyway, to move from Maven to gradle we just need to:


cd project
gradle init --type pom

At this point we can import the project into Android Studio quite easily.

Java Design Patterns: Implementing a singleton for Selenium WebDriver

What is a Singleton? A singleton is a class which should only be initialized once, provide a way to allow multiple instances of that class to be used, and finally to be the central point of access for that class.

Typical use cases of a singleton are classes accessing to system resources. In my scenario I want for example to create a singleton for Selendroid, since I really want to create just one instance of Selendroid to run all my tests.

Continue reading Java Design Patterns: Implementing a singleton for Selenium WebDriver

Adding Maven to a project in IntelliJ

Previously I used the jar libraries for the Selenium/Selendroid project to work fine, however the method is not really ideal. Project dependencies should be imported automatically with a dependency sistem of some sort. Here I am going to add Maven to the project and manage the dependenices through it. Here I am going to add selenium-java and selendroid-standalone, but this is of course valid for any other library.
Continue reading Adding Maven to a project in IntelliJ

A simple test with Seledroid

So now that we know that Selenium is working as we expect (I am a newbie here), we can try adding Seledroid. If you haven’t used Selendroid before, I strongly recommend you to follow the initial setup guide, available here. Basically you will need to have JAVA_HOME and ANDROID_HOME variables correctly set up in your system.
Continue reading A simple test with Seledroid