Skip to content
This repository was archived by the owner on Oct 2, 2018. It is now read-only.

Commit 35d89e9

Browse files
ferndotferndot
committed
Merge pull request #343 from twiss/format-selects
Format Selects Minor Improvements
2 parents caceb3b + de234b3 commit 35d89e9

2 files changed

Lines changed: 47 additions & 18 deletions

File tree

‎index.html‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -346,12 +346,12 @@ <h1 id="fileName" class="no-zen"><span id="currentFileLocation" style="display:n
346346
</li>
347347
<li>
348348
<select data-change="font" id="font-select" data-l10n-title="font">
349-
<option value="" disabled selected data-l10n-id="font"></option>
350-
<option value="Verdana,Geneva,sans-serif" style="font-family: Verdana,Geneva,sans-serif;">Verdana/Geneva</option>
351-
<option value="Helvetica,Arial,sans-serif" style="font-family: Helvetica,Arial,sans-serif;">Helvetica/Arial</option>
352-
<option value="Georgia,Utopia,Charter,serif" style="font-family: Georgia,Utopia,Charter,serif;">Georgia/Utopia/Charter</option>
353-
<option value="'Times New Roman',Times,serif" style="font-family: 'Times New Roman',Times,serif;">Times New Roman/Times</option>
354-
<option value="'Courier New',Courier,monospace" style="font-family: 'Courier New',Courier,monospace;">Courier New/Courier</option>
349+
<option value="" disabled selected data-l10n-id="font" style='font-family: initial;'></option>
350+
<option value='Verdana, Geneva, sans-serif' style='font-family: Verdana, Geneva, sans-serif;'>Verdana</option>
351+
<option value='Helvetica, Arial, sans-serif' style='font-family: Helvetica, Arial, sans-serif;'>Helvetica</option>
352+
<option value='Georgia, Utopia, Charter, serif' style='font-family: Georgia, Utopia, Charter, serif;'>Georgia</option>
353+
<option value='"Times New Roman", Times, serif' style='font-family: "Times New Roman", Times, serif;'>Times New Roman</option>
354+
<option value='"Courier New", Courier, monospace' style='font-family: "Courier New", Courier, monospace;'>Courier New</option>
355355
</select>
356356
</li>
357357
<li>
@@ -368,15 +368,16 @@ <h1 id="fileName" class="no-zen"><span id="currentFileLocation" style="display:n
368368
</li>
369369
<li>
370370
<select data-change="style" id="style-select" data-l10n-title="formatting">
371-
<option value="" disabled selected data-l10n-id="format-block"></option>
372-
<option value="p" data-l10n-id="paragraph"></option>
371+
<option value="" disabled selected data-l10n-id="format-block" style="font-size: 1.8rem; font-weight: initial; color: initial;"></option>
372+
<option value="p" data-l10n-id="paragraph" style="font-size: 1.8rem; font-weight: initial; color: initial;"></option>
373373
<!-- The following default style is duplicated in io.js and contentscript.js -->
374-
<option value="h1" data-l10n-id="heading-n" data-l10n-args='{ "n": 1 }' style="font-size: 1.5em; font-weight: bold;"></option>
375-
<option value="h2" data-l10n-id="heading-n" data-l10n-args='{ "n": 2 }' style="font-size: 1.17em; font-weight: bold;"></option>
376-
<option value="h3" data-l10n-id="heading-n" data-l10n-args='{ "n": 3 }' style="font-weight: bold;"></option>
377-
<option value="h4" data-l10n-id="heading-n" data-l10n-args='{ "n": 4 }' style="text-decoration: underline;"></option>
378-
<option value="h5" data-l10n-id="heading-n" data-l10n-args='{ "n": 5 }' style="font-weight: bold; color: #555;"></option>
379-
<option value="h6" data-l10n-id="heading-n" data-l10n-args='{ "n": 6 }' style="text-decoration: underline; color: #444;"></option>
374+
<!-- `font-size`s are multiplied by 1.8rem -->
375+
<option value="h1" data-l10n-id="heading-n" data-l10n-args='{ "n": 1 }' style="font-size: 2.7rem; font-weight: bold; color: initial;"></option>
376+
<option value="h2" data-l10n-id="heading-n" data-l10n-args='{ "n": 2 }' style="font-size: 2.106rem; font-weight: bold; color: initial;"></option>
377+
<option value="h3" data-l10n-id="heading-n" data-l10n-args='{ "n": 3 }' style="font-size: 1.8rem; font-weight: bold; color: initial;"></option>
378+
<option value="h4" data-l10n-id="heading-n" data-l10n-args='{ "n": 4 }' style="font-size: 1.8rem; font-weight: initial; color: initial; text-decoration: underline;"></option>
379+
<option value="h5" data-l10n-id="heading-n" data-l10n-args='{ "n": 5 }' style="font-size: 1.8rem; font-weight: bold; color: #555;"></option>
380+
<option value="h6" data-l10n-id="heading-n" data-l10n-args='{ "n": 6 }' style="font-size: 1.8rem; font-weight: initial; color: #444; text-decoration: underline;"></option>
380381
</select>
381382
</li>
382383
<li><button class="icon-minus" data-click="formatDoc" data-click-action="insertHorizontalRule" data-l10n-title="horizontal-rule"></button></li>

‎scripts/firetext.js‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,15 @@ firetext.init = function () {
101101
if (bugsenseInitialized) {
102102
Bugsense.addExtraData('app_locale', navigator.mozL10n.language.code);
103103
}
104+
105+
// Freeze style selectors width, for Chrome
106+
Array.prototype.forEach.call(toolbar.getElementsByTagName('select'), function(select) {
107+
var style = select.getAttribute('style') || '';
108+
select.setAttribute('style', '');
109+
var width = select.clientWidth;
110+
select.setAttribute('style', style);
111+
select.style.width = width + 'px';
112+
});
104113
});
105114
};
106115

@@ -291,10 +300,13 @@ function initListeners() {
291300
);
292301
Array.prototype.forEach.call(toolbar.getElementsByTagName('select'), function(select) {
293302
select.addEventListener(
294-
// This doesn't catch the case where the user selects the
295-
// same option, but we don't have anything better.
296303
'change', function change() {
304+
// This doesn't catch the case where the user selects the
305+
// same option, but we don't have anything better.
297306
editor.contentWindow.focus();
307+
308+
// Also, update select styles.
309+
updateSelectStyles();
298310
}
299311
);
300312
});
@@ -1111,8 +1123,8 @@ function updateToolbar() {
11111123
bold.classList.remove('active');
11121124
}
11131125

1114-
// Font (TBD: show actual font)
1115-
fontSelect.value = '';
1126+
// Font
1127+
fontSelect.value = commandStates.fontName.value.replace(/'/g, '"').replace(/,\s*/g, ', ');
11161128

11171129
// Font size
11181130
fontSizeSelect.value = commandStates.fontSize.value;
@@ -1151,6 +1163,9 @@ function updateToolbar() {
11511163

11521164
// Style
11531165
styleSelect.value = commandStates.formatBlock.value;
1166+
1167+
// Update select current styles
1168+
updateSelectStyles();
11541169
}, null, true);
11551170
editorMessageProxy.postMessage({
11561171
command: "query-command-states",
@@ -1160,6 +1175,19 @@ function updateToolbar() {
11601175
}
11611176
}
11621177

1178+
function updateSelectStyles() {
1179+
// Set selects current style
1180+
Array.prototype.forEach.call(toolbar.getElementsByTagName('select'), function(select) {
1181+
var width = select.style.width;
1182+
select.setAttribute('style',
1183+
select.selectedOptions[0] ?
1184+
(select.selectedOptions[0].getAttribute('style') || '').replace('text-decoration: underline;', '') : // Firefox doesn't support text-decoration: none; on options elements apparently
1185+
''
1186+
);
1187+
select.style.width = width;
1188+
});
1189+
}
1190+
11631191
/* Actions (had to do this because of CSP policies)
11641192
------------------------*/
11651193
document.addEventListener('click', function(event) {

0 commit comments

Comments
 (0)