From 99d8f431d5c7b393dcf8cbe6382beec13c29f781 Mon Sep 17 00:00:00 2001
From: Deathamns <deathamns@gmail.com>
Date: Sat, 25 Oct 2014 09:50:37 +0200
Subject: [PATCH] input[type="file"].click() didn't work in Safari

Click couldn't be initiated with JavaScript in Safari if the input was
hidden with display: none. Using visibility: hidden or opacity: 0 solves
the problem.

Alternative solution would be to hide (opacity: 0) the input and slide it
(position: absolute; top: 0; left: 0; width: 100%; height: 100%) over the
button, which would work in all browsers, and wouldn't require JavaScript.
---
 src/1p-filters.html |  2 +-
 src/about.html      |  2 +-
 src/css/common.css  | 16 +++++++++++-----
 src/whitelist.html  |  2 +-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/1p-filters.html b/src/1p-filters.html
index 7c959d02b..1705b5f5d 100644
--- a/src/1p-filters.html
+++ b/src/1p-filters.html
@@ -13,7 +13,7 @@
 <div>
     <p data-i18n="1pFormatHint"></p>
     <p><button id="importUserFiltersFromFile" data-i18n="1pImport"></button> &emsp; <button id="exportUserFiltersToFile" data-i18n="1pExport"></button></p>
-    <input id="importFilePicker" type="file" accept="text/plain" style="display:none;">
+    <input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput">
     <textarea class="userFilters" id="userFilters" dir="auto" spellcheck="false"></textarea>
     <p><button id="userFiltersApply" disabled="true" data-i18n="1pApplyChanges"></button></p>
 </div>
diff --git a/src/about.html b/src/about.html
index 20a47c172..e7507c0c7 100644
--- a/src/about.html
+++ b/src/about.html
@@ -26,7 +26,7 @@
 <div style="margin:1em 0 0 0;">
 <p><button type="button" id="export" data-i18n="aboutBackupDataButton"></button>
   <button type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
-  <input id="restoreFilePicker" type="file" accept="text/plain" style="display:none;">
+  <input id="restoreFilePicker" type="file" accept="text/plain" class="hiddenFileInput">
 <p>
 <p><button type="button" id="reset" data-i18n="aboutResetDataButton"></button>
 </div>
diff --git a/src/css/common.css b/src/css/common.css
index 3509396cc..ba52e1f0c 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -1,9 +1,9 @@
 @font-face {
-  font-family: 'FontAwesome';
-  src: url('fonts/fontawesome-webfont.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
+    font-family: 'FontAwesome';
+    src: url('fonts/fontawesome-webfont.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    }
 .fa {
     font-family: FontAwesome;
     font-style: normal;
@@ -64,3 +64,9 @@ body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
      85% { opacity: 0; }
     100% { opacity: 1; }
     }
+
+.hiddenFileInput {
+    visibility: hidden;
+    width: 0;
+    height: 0;
+    }
diff --git a/src/whitelist.html b/src/whitelist.html
index 3980cbcb9..c1a0b0a85 100644
--- a/src/whitelist.html
+++ b/src/whitelist.html
@@ -13,7 +13,7 @@
 <div>
     <p data-i18n="whitelistPrompt"></p>
     <p><button id="importWhitelistFromFile" data-i18n="whitelistImport"></button> &emsp; <button id="exportWhitelistToFile" data-i18n="whitelistExport"></button></p>
-    <input id="importFilePicker" type="file" accept="text/plain" style="display:none;">
+    <input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput">
     <textarea id="whitelist" dir="auto" spellcheck="false"></textarea>
     <p><button id="whitelistApply" type="button" disabled="true" data-i18n="whitelistApply"></button></p>
 </div>