← Back to branch summary

~ubuntu-branches/debian/squeeze/webdeveloper/squeeze

« back to all changes in this revision

Viewing changes to content_common/webdeveloper/sidebar/edit_css.js

  • Committer: Bazaar Package Importer
  • Author(s): Luca Falavigna
  • Date: 2008-07-02 21:29:04 UTC
  • mfrom: (1.2.2 upstream)
  • Revision ID: james.westby@ubuntu.com-20080702212904-r7jbs1fg960rxvjs
Tags: 1.1.6-3
http://bugs.debian.org/488161
* New Maintainer (Closes: #488161).
* debian/control:
  - Adjust Homepage field to link to real homepage.
* debian/copyright:
  - Upstream licensed under GPLv3, adjusting accordingly.

Show diffs side-by-side

added added

removed removed

Lines of Context:
content_common/webdeveloper/sidebar/edit_css.js
1
 
var webdeveloper_editCSSIntervalId      = null;
2
 
var webdeveloper_editCSSSelectedTab     = 0;
3
 
var webdeveloper_editCSSUpdateFrequency = 500;
4
 
 
5
 
// Applies the CSS
6
 
function webdeveloper_applyCSS()
7
 
{
8
 
    var contentDocument    = webdeveloper_getContentDocument();
9
 
    var headElementList    = contentDocument.getElementsByTagName("head");
10
 
    var styleElement       = null;
11
 
    var styleElementParent = contentDocument.documentElement;
12
 
    var styleText          = null;
13
 
    var textBox            = null;
14
 
    var textBoxes          = document.getElementById("webdeveloper-edit-css-tab-panels").getElementsByTagName("textbox");
15
 
    var textBoxesLength    = textBoxes.length;
16
 
 
17
 
    // If there is a head element
18
 
    if(headElementList.length > 0)
19
 
    {
20
 
        styleElementParent = headElementList[0];
21
 
    }
22
 
 
23
 
    // Loop through the text boxes
24
 
    for(var i = 0; i < textBoxesLength; i++)
25
 
    {
26
 
        styleElement = contentDocument.getElementById("webdeveloper-edit-css-style-" + i);
27
 
        textBox      = textBoxes[i];
28
 
        styleText    = textBox.value;
29
 
 
30
 
        // If the strip import preference is not set or is set to true
31
 
        if(!webdeveloper_isPreferenceSet("webdeveloper.edit.css.import.strip") || webdeveloper_getBooleanPreference("webdeveloper.edit.css.import.strip", true))
32
 
        {
33
 
            styleText = styleText.replace(new RegExp("@import.*?;", "gi"), "");
34
 
        }
35
 
 
36
 
        // If the style element does not exist
37
 
        if(!styleElement)
38
 
        {
39
 
            styleElement = contentDocument.createElement("style");
40
 
 
41
 
            styleElement.setAttribute("id", "webdeveloper-edit-css-style-" + i);
42
 
            styleElement.setAttribute("type", "text/css");
43
 
            styleElement.setAttribute("xml:base", textBox.getAttribute("webdeveloper-base"));
44
 
            styleElementParent.appendChild(styleElement);
45
 
        }
46
 
 
47
 
        // If the style text is not the same as the style element content
48
 
        if(styleText != styleElement.innerHTML)
49
 
        {
50
 
            webdeveloper_removeAllChildNodes(styleElement);
51
 
            styleElement.appendChild(contentDocument.createTextNode(styleText));
52
 
        }
53
 
    }
54
 
}
55
 
 
56
 
// Clear the CSS
57
 
function webdeveloper_clearCSS()
58
 
{
59
 
    webdeveloper_getSelectedPanel().firstChild.value = "";
60
 
}
61
 
 
62
 
// Reinitializes the sidebar when the page changes
63
 
function webdeveloper_editCSSContentPageLoad(event)
64
 
{
65
 
    var eventTarget    = event.target;
66
 
    var originalTarget = event.originalTarget;
67
 
 
68
 
    // If the page is the target and the URI matches
69
 
    if(originalTarget && eventTarget && eventTarget.contentDocument && eventTarget.hasAttribute && eventTarget.hasAttribute("id") && eventTarget.getAttribute("id").toLowerCase() == "content" && originalTarget.documentURI == eventTarget.contentDocument.documentURI)
70
 
    {
71
 
        // If the CSS stick preference is not set to true
72
 
        if(!webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true))
73
 
        {
74
 
            webdeveloper_resetCSS();
75
 
        }
76
 
    }
77
 
}
78
 
 
79
 
// Handles a browser tab being selected
80
 
function webdeveloper_editCSSMainTabSelect(event)
81
 
{
82
 
    var browser     = window.top.getBrowser();
83
 
    var selectedTab = browser.mTabBox.selectedIndex;
84
 
 
85
 
    // If the selected tab is different
86
 
    if(selectedTab != webdeveloper_editCSSSelectedTab)
87
 
    {
88
 
        var browsers      = browser.browsers;
89
 
        var browserLength = browsers.length;
90
 
 
91
 
        // If the previous selected tab equals the browser length
92
 
        if(webdeveloper_editCSSSelectedTab == browserLength)
93
 
        {
94
 
            webdeveloper_editCSSSelectedTab = browserLength - 1;
95
 
        }
96
 
 
97
 
        webdeveloper_resetDocument(browsers[webdeveloper_editCSSSelectedTab].contentDocument);
98
 
 
99
 
        webdeveloper_editCSSSelectedTab = selectedTab;
100
 
 
101
 
        // If the CSS stick preference is not set to true
102
 
        if(!webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true))
103
 
        {
104
 
            webdeveloper_resetCSS();
105
 
        }
106
 
    }
107
 
}
108
 
 
109
 
// Enables a style sheet
110
 
function webdeveloper_enableStyleSheet(styleSheet)
111
 
{
112
 
    // If the style sheet is a valid style sheet and is not an alternate style sheet
113
 
    if(webdeveloper_isValidStyleSheet(styleSheet) && !webdeveloper_isAlternateStyleSheet(styleSheet))
114
 
    {
115
 
        var cssRule        = null;
116
 
        var cssRules       = styleSheet.cssRules;
117
 
        var cssRulesLength = cssRules.length;
118
 
        var importRule     = Components.interfaces.nsIDOMCSSRule.IMPORT_RULE;
119
 
 
120
 
        // Loop through the the style sheet rules
121
 
        for(var i = 0; i < cssRulesLength; i++)
122
 
        {
123
 
            cssRule = cssRules[i];
124
 
 
125
 
            // If this is an import rule
126
 
            if(cssRule.type == importRule)
127
 
            {
128
 
                webdeveloper_enableStyleSheet(cssRule.styleSheet);
129
 
            }
130
 
        }
131
 
 
132
 
        styleSheet.disabled = false;
133
 
    }
134
 
}
135
 
 
136
 
// Returns the selected panel
137
 
function webdeveloper_getSelectedPanel()
138
 
{
139
 
    var selectedPanel = document.getElementById("webdeveloper-edit-css-tab-box").selectedPanel;
140
 
 
141
 
    // If the selected panel is not set
142
 
    if(!selectedPanel)
143
 
    {
144
 
        selectedPanel = document.getElementById("webdeveloper-edit-css-tab-panels").firstChild;
145
 
    }
146
 
 
147
 
    return selectedPanel;
148
 
}
149
 
 
150
 
// Returns the selected tab
151
 
function webdeveloper_getSelectedTab()
152
 
{
153
 
    var selectedTab = document.getElementById("webdeveloper-edit-css-tab-box").selectedTab;
154
 
 
155
 
    // If the selected tab is not set
156
 
    if(!selectedTab)
157
 
    {
158
 
        selectedTab = document.getElementById("webdeveloper-edit-css-tabs").firstChild;
159
 
    }
160
 
 
161
 
    return selectedTab;
162
 
}
163
 
 
164
 
// Initializes the edit CSS sidebar
165
 
function webdeveloper_initializeEditCSS()
166
 
{
167
 
    var browser    = window.top.getBrowser();
168
 
    var mainTabBox = browser.mTabBox;
169
 
 
170
 
    webdeveloper_editCSSSelectedTab     = mainTabBox.selectedIndex;
171
 
    webdeveloper_editCSSUpdateFrequency = webdeveloper_getIntegerPreference("webdeveloper.edit.update.frequency", true);
172
 
 
173
 
    mainTabBox.addEventListener("select", webdeveloper_editCSSMainTabSelect, true);
174
 
    window.top.addEventListener("load", webdeveloper_editCSSContentPageLoad, true);
175
 
 
176
 
    webdeveloper_updateStickCSS();
177
 
    webdeveloper_retrieveCSS();
178
 
 
179
 
    // If the update frequency is greater than 0
180
 
    if(webdeveloper_editCSSUpdateFrequency > 0)
181
 
    {
182
 
        webdeveloper_editCSSIntervalId = window.setInterval(webdeveloper_applyCSS, webdeveloper_editCSSUpdateFrequency);
183
 
    }
184
 
}
185
 
 
186
 
// Loads new CSS
187
 
function webdeveloper_loadCSS()
188
 
{
189
 
    var filePicker   = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker);
190
 
    var stringBundle = document.getElementById("webdeveloper-string-bundle");
191
 
 
192
 
    filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css");
193
 
    filePicker.init(window, stringBundle.getString("webdeveloper_loadStyleSheet"), filePicker.modeOpen);
194
 
 
195
 
    // If the user selected a style sheet
196
 
    if(filePicker.show() == filePicker.returnOK)
197
 
    {
198
 
        var inputStream      = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
199
 
        var scriptableStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
200
 
 
201
 
        inputStream.init(filePicker.file, 0x01, 00444, null);
202
 
        scriptableStream.init(inputStream);
203
 
 
204
 
        webdeveloper_getSelectedPanel().firstChild.value = scriptableStream.read(scriptableStream.available());
205
 
 
206
 
        scriptableStream.close();
207
 
        inputStream.close();
208
 
    }
209
 
}
210
 
 
211
 
// Resets the edited CSS
212
 
function webdeveloper_resetCSS()
213
 
{
214
 
    webdeveloper_removeAllChildNodes(document.getElementById("webdeveloper-edit-css-tab-panels"));
215
 
    webdeveloper_removeAllChildNodes(document.getElementById("webdeveloper-edit-css-tabs"));
216
 
    webdeveloper_resetDocument(webdeveloper_getContentDocument());
217
 
    webdeveloper_retrieveCSS();
218
 
}
219
 
 
220
 
// Resets the specified document
221
 
function webdeveloper_resetDocument(contentDocument)
222
 
{
223
 
    var styleElement     = null;
224
 
    var styleElements    = contentDocument.getElementsByTagName("style");
225
 
    var styleSheet       = null;
226
 
    var styleSheetList   = webdeveloper_getStyleSheetsForDocument(contentDocument, true, false);
227
 
    var styleSheetLength = styleSheetList.length;
228
 
 
229
 
    // Loop through the style elements
230
 
    for(var i = 0; i < styleElements.length; i++)
231
 
    {
232
 
        styleElement = styleElements[i];
233
 
 
234
 
        // If the style element has an id starting with webdeveloper-edit-css-style-
235
 
        if(styleElement.hasAttribute("id") && styleElement.getAttribute("id").indexOf("webdeveloper-edit-css-style-") == 0)
236
 
        {
237
 
            styleElement.parentNode.removeChild(styleElement);
238
 
            i--;
239
 
        }
240
 
    }
241
 
 
242
 
    // Loop through the style sheets
243
 
    for(i = 0; i < styleSheetLength; i++)
244
 
    {
245
 
        styleSheet = styleSheetList[i];
246
 
 
247
 
        // If the style sheet is a valid style sheet, is for the screen and is not an alternate style sheet
248
 
        if(webdeveloper_isValidStyleSheet(styleSheet) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !webdeveloper_isAlternateStyleSheet(styleSheet))
249
 
        {
250
 
           styleSheet.disabled = false;
251
 
        }
252
 
    }
253
 
 
254
 
}
255
 
 
256
 
// Retrieves the CSS from the current page
257
 
function webdeveloper_retrieveCSS()
258
 
{
259
 
    var contentDocument  = webdeveloper_getContentDocument();
260
 
    var documentURL      = contentDocument.documentURI;
261
 
    var inlineStylesText = "";
262
 
    var result           = null;
263
 
    var results          = new Array();
264
 
    var resultsLength    = null;
265
 
    var stringBundle     = document.getElementById("webdeveloper-string-bundle");
266
 
    var styleElement     = null;
267
 
    var styleSheet       = null;
268
 
    var styleSheetList   = webdeveloper_getStyleSheetsForDocument(contentDocument, true, false);
269
 
    var styleSheetLength = styleSheetList.length;
270
 
    var tab              = null;
271
 
    var tabPanel         = null;
272
 
    var tabs             = document.getElementById("webdeveloper-edit-css-tabs");
273
 
    var tabPanels        = document.getElementById("webdeveloper-edit-css-tab-panels");
274
 
    var textBox          = null;
275
 
    var textBoxStyle     = "";
276
 
    var url              = Components.classes["@mozilla.org/network/standard-url;1"].createInstance(Components.interfaces.nsIURL);
277
 
 
278
 
    url.spec = documentURL;
279
 
 
280
 
    // If the edit CSS background color preference is set
281
 
    if(webdeveloper_isPreferenceSet("webdeveloper.edit.color.background"))
282
 
    {
283
 
        textBoxStyle += "background-color: " + webdeveloper_getStringPreference("webdeveloper.edit.color.background", true) + " !important; ";
284
 
    }
285
 
 
286
 
    // If the edit CSS text color preference is set
287
 
    if(webdeveloper_isPreferenceSet("webdeveloper.edit.color.text"))
288
 
    {
289
 
        textBoxStyle += "color: " + webdeveloper_getStringPreference("webdeveloper.edit.color.text", true) + " !important; ";
290
 
    }
291
 
 
292
 
    // If the edit CSS font preference is set
293
 
    if(webdeveloper_isPreferenceSet("webdeveloper.edit.font.size"))
294
 
    {
295
 
        textBoxStyle += "font-size: " + webdeveloper_getIntegerPreference("webdeveloper.edit.font.size", true) + "px !important; ";
296
 
    }
297
 
 
298
 
    textBoxStyle = textBoxStyle.trim();
299
 
 
300
 
    // Loop through the style sheets
301
 
    for(var i = 0; i < styleSheetLength; i++)
302
 
    {
303
 
        styleSheet = styleSheetList[i];
304
 
 
305
 
        // If this is a valid style sheet, is for the screen, is not an alternate style sheet, is not disabled and is not an inline style sheet
306
 
        if(webdeveloper_isValidStyleSheet(styleSheet) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !webdeveloper_isAlternateStyleSheet(styleSheet) && !styleSheet.disabled && styleSheet.href != documentURL)
307
 
        {
308
 
            results = webdeveloper_retrieveStyleSheetDetails(styleSheet, textBoxStyle, results);
309
 
        }
310
 
    }
311
 
 
312
 
    styleSheetList   = contentDocument.getElementsByTagName("style");
313
 
    styleSheetLength = styleSheetList.length;
314
 
 
315
 
    // Loop through the inline style sheets
316
 
    for(i = 0; i < styleSheetLength; i++)
317
 
    {
318
 
        styleElement = styleSheetList[i];
319
 
        styleSheet   = styleElement.sheet;
320
 
 
321
 
        // If this is a valid style sheet, is for the screen and is not disabled
322
 
        if(webdeveloper_isValidStyleSheet(styleSheet) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !styleSheet.disabled)
323
 
        {
324
 
            inlineStylesText += styleElement.innerHTML.trim() + "\n\n";
325
 
 
326
 
            styleSheet.disabled = true;
327
 
        }
328
 
    }
329
 
 
330
 
    // If there are inline styles
331
 
    if(inlineStylesText != "")
332
 
    {
333
 
        tab      = document.createElement("tab");
334
 
        tabPanel = document.createElement("tabpanel");
335
 
        textBox  = document.createElement("textbox");
336
 
 
337
 
        tab.setAttribute("label", stringBundle.getString("webdeveloper_embeddedStyles"));
338
 
        textBox.setAttribute("flex", "1");
339
 
        textBox.setAttribute("multiline", "true");
340
 
        textBox.setAttribute("style", textBoxStyle);
341
 
        textBox.setAttribute("value", inlineStylesText);
342
 
        textBox.setAttribute("webdeveloper-base", url.directory);
343
 
 
344
 
        // If the edit CSS wrap preference is not set to true
345
 
        if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
346
 
        {
347
 
            textBox.setAttribute("wrap", "off");
348
 
        }
349
 
 
350
 
        tabPanel.appendChild(textBox);
351
 
 
352
 
        results.push(new Array(tab, tabPanel));
353
 
    }
354
 
 
355
 
    resultsLength = results.length;
356
 
 
357
 
    // Loop through the results
358
 
    for(i = 0; i < resultsLength; i++)
359
 
    {
360
 
        result = results[i];
361
 
 
362
 
        tabPanels.appendChild(result[1]);
363
 
        tabs.appendChild(result[0]);
364
 
    }
365
 
 
366
 
    // If there are no tabs
367
 
    if(tabs.childNodes.length == 0)
368
 
    {
369
 
        tab      = document.createElement("tab");
370
 
        tabPanel = document.createElement("tabpanel");
371
 
        textBox  = document.createElement("textbox");
372
 
 
373
 
        tab.setAttribute("label", stringBundle.getString("webdeveloper_editCSS"));
374
 
        textBox.setAttribute("flex", "1");
375
 
        textBox.setAttribute("multiline", "true");
376
 
        textBox.setAttribute("style", textBoxStyle);
377
 
        textBox.setAttribute("webdeveloper-base", url.directory);
378
 
 
379
 
        // If the edit CSS wrap preference is not set to true
380
 
        if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
381
 
        {
382
 
            textBox.setAttribute("wrap", "off");
383
 
        }
384
 
 
385
 
        tabPanel.appendChild(textBox);
386
 
        tabPanels.appendChild(tabPanel);
387
 
        tabs.appendChild(tab);
388
 
    }
389
 
 
390
 
    tabs.selectedIndex = 0;
391
 
 
392
 
    webdeveloper_applyCSS();
393
 
}
394
 
 
395
 
// Retrieves the style sheet details
396
 
function webdeveloper_retrieveStyleSheetDetails(styleSheet, textBoxStyle, results)
397
 
{
398
 
    var styleSheetHref = styleSheet.href;
399
 
    var position       = styleSheetHref.lastIndexOf("/");
400
 
    var stylesText     = webdeveloper_retrieveSource(styleSheetHref);
401
 
    var tab            = document.createElement("tab");
402
 
    var tabPanel       = document.createElement("tabpanel");
403
 
    var textBox        = document.createElement("textbox");
404
 
    var url            = Components.classes["@mozilla.org/network/standard-url;1"].createInstance(Components.interfaces.nsIURL);
405
 
 
406
 
    url.spec = styleSheetHref;
407
 
 
408
 
    tab.setAttribute("label", url.fileName);
409
 
    textBox.setAttribute("flex", "1");
410
 
    textBox.setAttribute("multiline", "true");
411
 
    textBox.setAttribute("style", textBoxStyle);
412
 
    textBox.setAttribute("value", stylesText);
413
 
    textBox.setAttribute("webdeveloper-base", url.directory);
414
 
 
415
 
    // If the edit CSS wrap preference is not set to true
416
 
    if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
417
 
    {
418
 
        textBox.setAttribute("wrap", "off");
419
 
    }
420
 
 
421
 
    tabPanel.appendChild(textBox);
422
 
 
423
 
    results.push(new Array(tab, tabPanel));
424
 
 
425
 
    styleSheet.disabled = true;
426
 
 
427
 
    return results;
428
 
}
429
 
 
430
 
// Saves the CSS
431
 
function webdeveloper_saveCSS()
432
 
{
433
 
    var filePicker   = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker);
434
 
    var result       = null;
435
 
    var stringBundle = document.getElementById("webdeveloper-string-bundle");
436
 
    var styleText    = webdeveloper_getSelectedPanel().firstChild.value;
437
 
 
438
 
    filePicker.defaultExtension = "css";
439
 
    filePicker.defaultString    = webdeveloper_getSelectedTab().getAttribute("label");
440
 
 
441
 
    filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css");
442
 
    filePicker.init(window, stringBundle.getString("webdeveloper_saveStyleSheet"), filePicker.modeSave);
443
 
 
444
 
    result = filePicker.show();
445
 
 
446
 
    // If the user selected a style sheet
447
 
    if(result == filePicker.returnOK || result == filePicker.returnReplace)
448
 
    {
449
 
        var file         = filePicker.file;
450
 
        var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
451
 
 
452
 
        // If the file does not exist
453
 
        if(!file.exists())
454
 
        {
455
 
            file.create(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 00644);
456
 
        }
457
 
 
458
 
        outputStream.init(file, 0x04 | 0x08 | 0x20, 00644, null);
459
 
 
460
 
        outputStream.write(styleText, styleText.length);
461
 
        outputStream.close();
462
 
    }
463
 
}
464
 
 
465
 
// Toggles sticking the CSS
466
 
function webdeveloper_toggleStickCSS()
467
 
{
468
 
    webdeveloper_setBooleanPreference("webdeveloper.edit.stick", !webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true));
469
 
 
470
 
    webdeveloper_updateStickCSS();
471
 
}
472
 
 
473
 
// Unloads edit CSS
474
 
function webdeveloper_unloadEditCSS()
475
 
{
476
 
    webdeveloper_resetDocument(webdeveloper_getContentDocument());
477
 
    window.clearInterval(webdeveloper_editCSSIntervalId);
478
 
 
479
 
    // Try to remove the event listener
480
 
    try
481
 
    {
482
 
        window.top.getBrowser().mTabBox.removeEventListener("select", webdeveloper_editCSSMainTabSelect, true);
483
 
    }
484
 
    catch(exception)
485
 
    {
486
 
        // Do nothing
487
 
    }
488
 
 
489
 
    // Try to remove the event listener
490
 
    try
491
 
    {
492
 
        window.top.removeEventListener("load", webdeveloper_editCSSContentPageLoad, true);
493
 
    }
494
 
    catch(exception)
495
 
    {
496
 
        // Do nothing
497
 
    }
498
 
}
499
 
 
500
 
// Updates the stick CSS button
501
 
function webdeveloper_updateStickCSS()
502
 
{
503
 
    var element      = document.getElementById("webdeveloper-stick-sidebar");
504
 
    var label        = null;
505
 
    var stick        = webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true);
506
 
    var stringBundle = document.getElementById("webdeveloper-string-bundle");
507
 
 
508
 
    // If the element exists
509
 
    if(element)
510
 
    {
511
 
        // If sticking the CSS
512
 
        if(stick)
513
 
        {
514
 
            label = stringBundle.getString("webdeveloper_unstick");
515
 
 
516
 
            element.setAttribute("class", "unstick webdeveloper-sidebar-button");
517
 
            element.setAttribute("tooltiptext", label);
518
 
        }
519
 
        else
520
 
        {
521
 
            label = stringBundle.getString("webdeveloper_stick");
522
 
 
523
 
            element.setAttribute("class", "webdeveloper-sidebar-button");
524
 
            element.setAttribute("tooltiptext", label);
525
 
        }
526
 
    }
527
 
}
 
 
b'\\ No newline at end of file'