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

Commit de234b3

Browse files
twisstwiss
committed
Show current style in style selectors
1 parent 9615306 commit de234b3

2 files changed

Lines changed: 40 additions & 11 deletions

File tree

‎index.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,7 @@ <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>
349+
<option value="" disabled selected data-l10n-id="font" style='font-family: initial;'></option>
350350
<option value='Verdana, Geneva, sans-serif' style='font-family: Verdana, Geneva, sans-serif;'>Verdana</option>
351351
<option value='Helvetica, Arial, sans-serif' style='font-family: Helvetica, Arial, sans-serif;'>Helvetica</option>
352352
<option value='Georgia, Utopia, Charter, serif' style='font-family: Georgia, Utopia, Charter, serif;'>Georgia</option>
@@ -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: 30 additions & 2 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
});
@@ -1143,6 +1155,9 @@ function updateToolbar() {
11431155

11441156
// Style
11451157
styleSelect.value = commandStates.formatBlock.value;
1158+
1159+
// Update select current styles
1160+
updateSelectStyles();
11461161
}, null, true);
11471162
editorMessageProxy.postMessage({
11481163
command: "query-command-states",
@@ -1152,6 +1167,19 @@ function updateToolbar() {
11521167
}
11531168
}
11541169

1170+
function updateSelectStyles() {
1171+
// Set selects current style
1172+
Array.prototype.forEach.call(toolbar.getElementsByTagName('select'), function(select) {
1173+
var width = select.style.width;
1174+
select.setAttribute('style',
1175+
select.selectedOptions[0] ?
1176+
(select.selectedOptions[0].getAttribute('style') || '').replace('text-decoration: underline;', '') : // Firefox doesn't support text-decoration: none; on options elements apparently
1177+
''
1178+
);
1179+
select.style.width = width;
1180+
});
1181+
}
1182+
11551183
/* Actions (had to do this because of CSP policies)
11561184
------------------------*/
11571185
document.addEventListener('click', function(event) {

0 commit comments

Comments
 (0)