MozillaZine

A million little questions

Discuss application theming and theme development.
mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted June 17th, 2014, 2:44 am

Here's what I ended up with after adding XP support. I could do more for personas, but maybe later; this is probably what I'll go out with for Fx29.

Code: Select all
/* ***** BEGIN LICENSE BLOCK *****
 * TODO Needs license.
 * ***** END LICENSE BLOCK ***** */

/* This file contains code specific to the Windows version of Firefox >>> 29.0 <<< and up. */

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/*
 -------------------------------------------------------------
 Table of Contents for This File
 -------------------------------------------------------------

  * Main Window Background
    :: Main Window Background When NOT Using Aero Glass
    :: Main Window Background When USING Aero Glass
    .. When not showing system titlebar
  * Titlebar
    :: Main Window Titlebar When USING Windows Classic
    :: Main Window Titlebar When USING Any XP Default Theme, Royale or Zune
    :: Main Window Titlebar When USING Vista Basic
    :: Main Window Titlebar When USING Aero Glass
    :: Main Window Titlebar Both With and Without Aero Glass
    :: Main Window Titlebar When Showing Tabsintitlebar
    :: Main Window Titlebar Placeholders (for Spacing)
    :: Main Window Titlebar Buttonbox
    :: Main Window Titlebar Buttonbox When USING Aero Glass
    :: Main Window Titlebar Caption Buttons
    :: Main Window Titlebar Caption Buttons When USING Aero Glass
    :: Main Window Toolbar Drag Bindings When USING Aero Glass
    :: Main Window Toolbar Drag Bindings When USING Vista Basic Only
  * Toolbox
    :: Toolbox When USING Aero Glass
  * Menubar
    :: Menubar in Windows Other Than Active
    :: Menubar with Titlebar Hidden
  * Tabs Toolbar
  * Appcontent Glass Exclusion Area
    :: Glass Exclusion Area When USING Aero Glass
  * Private Browsing Indicator
  * Customization Mode

 -------------------------------------------------------------
 */


/* ----------------------------------------------------- *
 * TOC             Main Window Background                *
 * ----------------------------------------------------- *
 */

/* TOC ::::: Main Window Background When NOT Using Aero Glass ::::: */

/* Background is applied in default toolkit styling for window;
 * special handling not required.
 */

/* TOC ::::: Main Window Background When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  #main-window[windowtype="navigator:browser"] {
    /* Note: this -moz-appearance does not preclude using a window background color/image. */
    -moz-appearance: -moz-win-borderless-glass;
  }

  #main-window[windowtype="navigator:browser"][inFullscreen="true"] {
    -moz-appearance: none;
  }

  /* TOC ..... When not showing system titlebar  ..... */

  #main-window[windowtype="navigator:browser"][tabsintitlebar]:not([inFullscreen]) {
    background: none;
  }

  #main-window[windowtype="navigator:browser"][tabsintitlebar] > #tab-view-deck > #browser-panel > #navigator-toolbox {
    background: url("chrome://global/skin/default-window-gradient-bg.png") repeat-x 0px -30px #181818;
  }

}

/* ----------------------------------------------------- *
 * TOC                   Titlebar                        *
 * ----------------------------------------------------- *
 */

/* TOC ::::: Main Window Titlebar When USING Windows Classic ::::: */

@media (-moz-windows-classic) {

  #main-window[sizemode="maximized"][tabsintitlebar] #titlebar {
    /* We don't want -moz-appearance: -moz-window-titlebar-maximized on Windows Classic
     * because that uses system colors for the background.
     */
    -moz-appearance: none;
    /* The top position of the window is -4px when maximized on Vista Basic.
     * -moz-appearance -moz-window-titlebar-maximized positions and/or sizes the
     * titlebar; because we're removing -moz-appearance, we have to take responsibility
     * for the top margin.  This 4px probably corresponds to system border width;
     * if true, this would become incorrect if custom desktop settings for border width are used.
     */
    margin-top: 4px;
  }

}

/* TOC ::::: Main Window Titlebar When USING Any XP Default Theme, Royale or Zune ::::: */

@media (-moz-windows-theme:luna-blue),
       (-moz-windows-theme:luna-olive),
       (-moz-windows-theme:luna-silver),
       (-moz-windows-theme:royale),
       (-moz-windows-theme:zune) {

  #main-window[sizemode="maximized"][tabsintitlebar] #titlebar {
    /* We don't want -moz-appearance: -moz-window-titlebar-maximized on XP
     * because that uses system colors for the background.
     */
    -moz-appearance: none;
    /* The top position of the window is -4px when maximized with all XP default themes and Zune.
     * -moz-appearance -moz-window-titlebar-maximized positions and/or sizes the
     * titlebar; because we're removing -moz-appearance, we have to take responsibility
     * for the top margin.  This 4px probably corresponds to system border width;
     * if true, this would become incorrect if custom desktop settings for border width are used.
     */
    margin-top: 4px;
  }

}

/* TOC ::::: Main Window Titlebar When USING Vista Basic ::::: */

@media not all and (-moz-windows-compositor) {
  @media (-moz-windows-default-theme) and (-moz-windows-theme:aero) {

    #main-window[sizemode="maximized"][tabsintitlebar] #titlebar {
      /* We don't want -moz-appearance: -moz-window-titlebar-maximized on Vista Basic
       * because that uses system colors for the background.
       */
      -moz-appearance: none;
      /* The top position of the window is -8px when maximized on Vista Basic.
       * -moz-appearance -moz-window-titlebar-maximized positions and/or sizes the
       * titlebar; because we're removing -moz-appearance, we have to take responsibility
       * for the top margin.  This 8px probably corresponds to system border width;
       * if true, this would become incorrect if custom desktop settings for border width are used.
       */
      margin-top: 8px;
    }

  }
}

/* TOC ::::: Main Window Titlebar When USING Aero Glass ::::: */

/* Nothing to do here because -moz-appearance: -moz-window-titlebar-maximized on Glass
 * results in a transparent titlebar, so the window background shows through from behind,
 * as desired.
 */

/* TOC ::::: Main Window Titlebar Both With and Without Aero Glass ::::: */

#main-window[sizemode="normal"] > #titlebar {
  -moz-appearance: -moz-window-titlebar;
}

#main-window[sizemode="maximized"] > #titlebar {
  -moz-appearance: -moz-window-titlebar-maximized;
}

/* TOC ::::: Main Window Titlebar When Showing Tabsintitlebar ::::: */

/* For Fx29, tabsintitlebar means that the system titlebar is hidden. */

/* Undo the efforts of TabsInTitlebar._update() in setting bottom margins on
 * #titlebar and #titlebar-content to place the menubar (if visible) and
 * Tabs Toolbar in the titlebar.  That JS function has a problem when using
 * ALT to reveal the auto-hidden menubar with less-tall tabs like in NNL,
 * such that, on re-hiding the menubar, the margin-bottom on #titlebar-content
 * is not cleared, leaving the titlebar too tall with extra space above the
 * Tabs Toolbar (where the temporarily-revealed menubar was).
 *
 * To counteract this, we simply do away with overlapping into the titlebar
 * when the menubar is set to autohide by using CSS to remove the
 * margin-bottoms which JS is setting.  The result is that the titlebar has a
 * constant non-zero height whether the menubar is temporarily shown or hidden,
 * which height is such that the caption buttons remain uncovered and alone in
 * the titlebar, and that other browser chrome, ie the toolbox and its contents,
 * begin below the titlebar, with the top edge of the toolbox starting just below
 * the bottom of the titlebar.  The downside is that there's unused vertical
 * space in the titlebar.
 *
 * This is an issue only when all of the following are true:
 *
 *   1) the titlebar is hidden and
 *   2) the menubar is set to autohide and
 *   3) window sizemode is normal or maximized, but not fullscreen and
 *   4) calculated Tabs Toolbar height, including margins, is less that #titlebar-content height.
 *
 * There's no way for CSS touching #titlebar to know menubar state,
 * since the [autohide] attribute is set on only #toolbar-menubar itself,
 * and that's not a parent of #titlebar.  Therefore, we apply this whether
 * the menubar is autohiding or not.  (We could check the attribute [autohide]
 * in Companion JS, but Companion doesn't do that yet and this works, so we'll
 * just keep it simple.)
 *
 * NOTE WELL: For now, we only do this when [sizemode="normal"] and not when maximized,
 * for the following reasons:
 *
 *   - we've never seen the problem when maximized
 *     - although one person demonstrated this with Stylish and the default theme
 *   - most default titlebar geometries use small-ish buttons when maximized
 *     - meaning the geometry math works out in our favor in not triggering the problem there
 *   - not sure how prevalent the problem is
 *   - actually want people to see and complain about the problem, as a way of gathering data from the field
 *   - this way we keep tabs all the way up in the titlebar when maximized
 *   - most users will be fine, and those who aren't can report it
 *   - and we can consider fixing that in Companion later, based on how it goes
 *
 * The exact values used for our margin-bottoms don't matter, as long as the magnitude
 * is the same for both #titlebar and #titlebar-content, and as long as the
 * margin-bottom on #titlebar is the negative of the margin-bottom on
 * #titlebar-content and #titlebar-content's margin-bottom is non-negative.
 * In other words, you could use any non-negative margin on the #titlebar-content
 * (e.g., 0px, 14px, 47px, 120px) also long as you also set the corresponding
 * negative value on #titlebar (e.g., 0px, -14px, -47px, -120px).
 *
 * TODO VERIFY THIS Also, !important must be used to override the explicit style set by JS.
 *
 * Similarly, that function's JS sets padding-bottom on #toolbar-menubar, which we also
 * don't want and so remove whenever zeroing the titlebar margins.
 *
 * Note that we could resolve this issue for most default-desktop-setting cases
 * by increasing the min-height of the Tabs Toolbar enough to avoid the problem, but
 * that height would have to be ridiculously large to solve it for the broad range
 * of cases, such as when non-default desktop settings like wider borders or alternate
 * desktop themes are used.
 */

#main-window[tabsintitlebar][sizemode="normal"] > #titlebar {
/* #main-window[tabsintitlebar][sizemode="maximized"] > #titlebar, */
  margin-bottom: 0 !important; /* Use !important to override value set by JS. */
}

#main-window[tabsintitlebar][sizemode="normal"] > #titlebar > #titlebar-content {
/* #main-window[tabsintitlebar][sizemode="maximized"] > #titlebar > #titlebar-content, */
  margin-bottom: 0 !important; /* Use !important to override value set by JS. */
}

/* TOC ::::: Main Window Titlebar Placeholders (for Spacing) ::::: */

/* The placeholders are hidden if any of the following are true:
 *
 *   Hidden because showing native system titlebar
 *   Hidden because we're not drawing in the titlebar (whether native shown or not)
 *   Hidden because placeholder-containing toolbar not the first visible toolbar after titlebar
 *   Hidden because placeholder-containing toolbar is hidden
 *
 * Note we'll have to modify this when Companion lets users overlap toolbars and the titlebar.
 *
 * Doing the logical inversion, that means they're visible only when all of
 * the following are true:
 *
 *   NOT showing native system titlebar
 *   AND we ARE drawing in the titlebar
 *   AND placeholder-containing toolbar IS the first visible toolbar after titlebar
 *   AND placeholder-containing toolbar IS shown
 *
 * These are selected as follows:
 *
 *   NOT showing native system titlebar
 *
 *     #main-window[tabsintitlebar]
 *
 *   AND we ARE drawing in the titlebar
 *
 *     #main-window[sizemode="maximized"][tabsintitlebar]
 *
 *   AND placeholder-containing toolbar IS the first visible toolbar after titlebar
 *   AND placeholder-containing toolbar IS shown
 *
 *     #toolbar-menubar:not([autohide="true"]),
 *     #toolbar-menubar[autohide="true"]:not([inactive]),
 *     #toolbar-menubar[autohide="true"] + #TabsToolbar
 *
 *   Note that we fudge a little and let the placeholder in the Tabs Toolbar remain shown
 *   when the autohidden menubar is temporarily shown.
 */

.titlebar-placeholder {
  display: none;
}

#main-window[sizemode="maximized"][tabsintitlebar] #toolbar-menubar:not([autohide="true"]) .titlebar-placeholder,
#main-window[sizemode="maximized"][tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive]) .titlebar-placeholder,
#main-window[sizemode="maximized"][tabsintitlebar] #toolbar-menubar[autohide="true"] + #TabsToolbar  .titlebar-placeholder {
  display: -moz-box;
}

/* Space between window caption buttons and whatever is on their left (tabs, menu-after-pressing-alt, toolbarbutton).
 * Here we use the larger value that the def theme uses for aero-capable desktops, added to make it easier to
 * drag and/or aero-snap the toolbar.  Unlike the def theme, we use it for all MSWindows cases because
 * it's a pain to write a selector to avoid XP and because it's a good idea to provide a drag target in the
 * crowded Tabs Toolbar for the tabsintitlebar case.  See bug 624129.
 */
#main-window[sizemode="normal"] .titlebar-placeholder[type="caption-buttons"] {
  margin-left: 22px;
}

#main-window[sizemode="maximized"] .titlebar-placeholder[type="caption-buttons"] {
  margin-left: 10px;
}

/* TOC ::::: Main Window Titlebar Buttonbox ::::: */

/* On MSWindows, the box containing the window caption (control) buttons.  Fx4 applies these
 * -moz-appearance values in all Fx4 MSWindows cases (glass, non-glass, classic, w7/vista/xp)
 * so we do too, although it's not clear exactly what this does.
 * Note: as of Fx29, these -moz-appearance values are applied in content/browser.css.
 * We could remove them here, but our code is already working so we're leaving it as is.
 */

#titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box;
  z-index: 1;
}

#main-window[sizemode="maximized"] #titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box-maximized;
}

/* TOC ::::: Main Window Titlebar Buttonbox When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  /* When maximized and using glass, the end margin is needed to align the button box
   * (which Fx4+ uses to position the transparent region) with the caption button images drawn by
   * MSWindows and which show through from behind #main-window.
   */

  #main-window[sizemode="maximized"] #titlebar-buttonbox {
    -moz-margin-end: 3px;
  }

}

/* TOC ::::: Main Window Titlebar Caption Buttons ::::: */

/* On MSWindows, the window caption (control) buttons.  Fx4 applies these -moz-appearance values
 * in all Fx4 MSWindows cases (glass, non-glass, classic, w7/vista/xp) so we do too,
 * although it's not exactly clear what they do in non-glass cases.
 */

#titlebar-min {
  -moz-appearance: -moz-window-button-minimize;
}

#titlebar-max {
  -moz-appearance: -moz-window-button-maximize;
}

#main-window[sizemode="maximized"]  #titlebar-max {
  -moz-appearance: -moz-window-button-restore;
}

#titlebar-close {
  -moz-appearance: -moz-window-button-close;
}

/* No idea why this rule exists in the def theme, but it does. */
@media not all and (-moz-windows-classic) {
  #titlebar-min {
    -moz-margin-end: 2px;
  }
}

/* TOC ::::: Main Window Titlebar Caption Buttons When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  /* These should be hidden with glass enabled. MSWindows draws its own buttons. */
  .titlebar-button {
    display: none;
  }

}

/* TOC ::::: Main Window Toolbar Drag Bindings When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  /* Make the window draggable by some toolbars when on glass (bug 555081 and successors).
   */
  #toolbar-menubar:not([autohide="true"]),
  #TabsToolbar {
    -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
  }

}

/* TOC ::::: Main Window Toolbar Drag Bindings When USING Vista Basic Only ::::: */

/* DON'T make the window draggable by toolbars when on Vista Basic (bugs 606735 and 635534).
 * The def theme does this to extend the dragging surface down to everything that looks like an extension of the titlebar,
 * similar to the way it's done for glass cases in bug 555081.  We, however, DON'T do this,
 * because with our styling our toolbars never look like they're part of the titlebar on Vista Basic.
 *
 * Just as a breadcrumb, here's the code from the Fx4 def which we're not using.
 * N.B. that this code is from browser-aero.css, meaning it applies only to Vista Basic (not glass, not XP, not classic).
 * Given that unlike the default theme we use the same browser.css on both XP and Vista/W7, if we were to use any of this code,
 * we would need to add :-moz-system-metric(windows-theme-aero) and lose the personas check.
 *
 * @media not all and (-moz-windows-compositor) {
 *   #toolbar-menubar:not([autohide=true]):not(:-moz-lwtheme):-moz-system-metric(windows-default-theme),
 *   #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme):-moz-system-metric(windows-default-theme),
 *   #navigator-toolbox[tabsontop=false] > toolbar:not(#toolbar-menubar):not(:-moz-lwtheme):-moz-system-metric(windows-default-theme) {
 *     -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
 *   }
 * }
 */

/* ----------------------------------------------------- *
 * TOC                   Toolbox                         *
 * ----------------------------------------------------- *
 */

/* TOC ::::: Toolbox When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  /* The default glass titlebar height is too tall for my taste.
   * Here we move the toolbox up into the titlebar a tiny bit just because it looks better.
   * This requires similar positioning in customization mode code elsewhere.
   */

  #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen="true"]) #navigator-toolbox {
    margin-top: -7px;
  }

}

/* ----------------------------------------------------- *
 * TOC                  Menubar                          *
 * ----------------------------------------------------- *
 */

/* TOC ::::: Menubar in Windows Other Than Active ::::: */

/* window[active] not available in fx3.7+, and should not be used because
 * it would apply even when not wanted. Fx3.7 gives us new pseudo-class
 * :-moz-window-inactive instead.
 */

menubar > menu:-moz-window-inactive {
  color: #666666;
}

/* TOC ::::: Menubar with Titlebar Hidden ::::: */

/* See explanation with related code for the #titlebar element. */

#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
/* #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar, */
  padding-bottom: 0 !important; /* Use !important to override value set by JS. */
}

/* ----------------------------------------------------- *
 * TOC                 Tabs Toolbar                      *
 * ----------------------------------------------------- *
 */

/* Correct for extra space left in titlebar after, with tabs in titlebar and
 * menubar hidden, un-hiding then rehiding the menubar with ALT.
 * This code resolves the issue for most default-desktop-setting cases
 * by increasing the min-height of the Tabs Toolbar enough to avoid the problem.
 *
 * We don't set this for Glass because the problem doesn't manifest there.
 *
 * We probably don't need both this and margin-zeroing on #titlebar and
 * #titlebar-content.
 */

/* Commenting this out but leaving it in as a placeholder.
 * Since we're zeroing the titlebar-area margins in this case,
 * we can leave the tabs at their normal height.
 * @media not all and (-moz-windows-compositor) {
 *   @media (-moz-windows-default-theme) and (-moz-windows-theme:aero) {
 *
 *     #main-window[tabsintitlebar][sizemode="normal"] #XXTabsToolbar {
 *       min-height: 28px;
 *     }
 *
 *   }
 * }
 */

/* ----------------------------------------------------- *
 * TOC         Appcontent Glass Exclusion Area           *
 * ----------------------------------------------------- *
 */

/* TOC ::::: Glass Exclusion Area When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  /* This is new for Fx6, added in bug 633282, defining the glassless rectangle in the middle of
   * the glass sheet behind the main browser window.  As an intended consequence, sets the position and size
   * of the window glaze (bright horizon reflection) along the outer part of the glass window frame, because
   * MSWindows OS internals draw the glaze relative to the position and size of the glass exclusion rectangle.
   * Should only be used with windows having the -moz-appearance values -moz-win-glass or -moz-win-borderless-glass.
   * When used with -moz-win-glass, the glassless rectangle will define the position of the inner frame border.
   *
   * This is only needed for Fx6 and up, but it's harmless when used with earlier versions, so we just
   * use it for Fx4 and up because it's simpler to implement. When used with browser versions earlier than Fx6,
   * has no effect, since the -moz-win-exclude-glass keyword was not yet defined; in those cases, the CSS
   * property/value pair will throw an error and be ignored, leaving #appcontent with -moz-appearance: none
   * as desired.  Triggering yet another error message isn't great, but we're living with it.
   */
  #appcontent {
    -moz-appearance: -moz-win-exclude-glass;
  }

}

/* ----------------------------------------------------- *
 * TOC          Private Browsing Indicator               *
 * ----------------------------------------------------- *
 */

@-moz-document url('chrome://browser/content/browser.xul') {

  /* Def theme comment: Currently, we have two places where we put private browsing indicators on
   * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
   * When tabsintitlebar is disabled, we draw the indicator at the end of the
   * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
   * want the bottom border of the image to line up with the bottom of the window
   * caption buttons. That's why there's so much special-casing going on in here.
   */

  /* For NNL, unlike with the default theme, we always show the private browsing indicator
   * in the Tabs Toolbar and never in the titlebar.  This gets around issues of the
   * indicator being hidden when in fullscreen mode, since the Tabs Toolbar is
   * revealed on bump but the titlebar isn't, and also entirely avoids the
   * issue of varying titlebar height and making sure the image has room in
   * the titlebar across all cases.
   */

  /* Establish layout for the container only.  Note that this rule alone doesn't
   * show or hide the indicator; that's done by rules targeting .private-browsing-indicator.
   */
  #private-browsing-indicator-titlebar {
    display: block;
    position: absolute;
  }

  .private-browsing-indicator {
    display: none;
    pointer-events: none;
  }

  #main-window[privatebrowsingmode=temporary] #TabsToolbar > .private-browsing-indicator {
    display: -moz-box;
  }

  #TabsToolbar > .private-browsing-indicator {
    background: url("chrome://browser/skin/privatebrowsing-mask.mainwindow.png") no-repeat center top;
    margin: 0;
    -moz-margin-start: 4px;
    /* Negative margin to cover padding at end of toolbar. */
    -moz-margin-end: -5px;
    width: 40px;
  }

  @media (-moz-windows-classic) {
    /* Def theme comment: We have to use top instead of background-position in this
     * case, otherwise the bottom of the indicator would get cut off by the bounds of the
     * private-browsing-indicator element.
     */
    #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
      top: 4px;
    }
  }

}

/* ----------------------------------------------------- *
 * TOC               Customization Mode                  *
 * ----------------------------------------------------- *
 */

/* Def theme comment: This next rule is a hack to disable subpixel anti-aliasing on all
 * labels during the customize mode transition. Subpixel anti-aliasing
 * on Windows with Direct2D layers acceleration is particularly slow to
 * paint, so this hack is how we sidestep that performance bottleneck.
 */
#main-window:-moz-any([customize-entering],[customize-exiting]) label {
  transform: perspective(0.01px);
}

@media all and (-moz-windows-compositor) {

  /* When the titlebar is hidden, we must shift the top margin from the toolbax
   * to the browser panel, keeping the resulting position of the toolbox the
   * same onscreen.
   */
  #main-window[tabsintitlebar][sizemode="normal"]:-moz-any([customize-entering],[customize-entered]) #browser-panel {
    margin-top: -7px;
  }

  #main-window[tabsintitlebar][sizemode="normal"]:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
    margin-top: 0;
  }

}
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted June 17th, 2014, 4:59 pm

Why add XP support? That OS should be shut down on browsers: no security.
Firefox: Sic transit gloria mundi.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted June 17th, 2014, 5:08 pm

XP support makes for a solid baseline for other OS's and can be used for Windows Classic and Windows Aero Basic. I think the way Mozilla does it with their whole separate /aero/ themes is ridiculously complicated.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted June 17th, 2014, 7:28 pm

@mcdavis: if we could +rep on this board, I'd +rep you a thousand times. You and frank together -- his pruning of my code and your code -- have fixed my themes.

The both of you are like gods.
Firefox: Sic transit gloria mundi.

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted June 17th, 2014, 8:02 pm

You're welcome. I'm very glad it helped.

The idea of everyone having to figure everything out for themselves, from scratch, drives me crazy. There's so much to know. Much better to pool efforts and share.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted June 17th, 2014, 8:04 pm

mcdavis wrote:You're welcome. I'm very glad it helped.

The idea of everyone having to figure everything out for themselves, from scratch, drives me crazy. There's so much to know. Much better to pool efforts and share.

To me, this is a bunch of cavemen, hunched around a pit or a pond, sharing tips on how to chip flints. If you've ever banged rocks together to make tools, you'll see the aptness of my mental metaphor.
Firefox: Sic transit gloria mundi.

LoudNoise
New Member

User avatar
 
Posts: 40048
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Post Posted June 17th, 2014, 8:08 pm

ehume wrote:To me, this is a bunch of cavemen, hunched around a pit or a pond...


But you are all good looking for your age :)
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted June 18th, 2014, 2:58 am

ehume wrote:Why add XP support? That OS should be shut down on browsers: no security.


What Patrick said, plus Firefox still runs on it so I feel like I should if I can. It turned out not to take much more effort.

(I'm running it in a VM that never goes online.) (I tried booting my old XP machine -- RDRAM FTW! -- but the primary drive refuses to spin up after two years away. I probably should have been turning it on every few months. I may have to find out if putting the drive in the freezer is a for-real solution.) (Also, the fan noise is insane. It's like sitting next to a quad-rotor drone copter. I guess you know more than most, we've come a long way since then.)
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted June 18th, 2014, 2:34 pm

We have indeed come a long way.

I got this from a reviewer:

reviewer wrote:1) There's no page scrolling arrow icon when you press the scrollwheel.
2) Responsive Design View has a white border on the left and top.
4) The 3x3 grid is messed up in about:customizing and in the hamburger menu.


1) What is that called internally and how do I code for it?
2) What is Responsive Design View?
4) What is the 3x3 grid?

I won't bore you with the other 3 items. What I find interesting is that no one noticed the black bar.
Firefox: Sic transit gloria mundi.

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted June 18th, 2014, 3:50 pm

And how do you access the Share This Page button? I don't even see it on the default theme.
Firefox: Sic transit gloria mundi.

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted June 19th, 2014, 2:15 am

ehume wrote:And how do you access the Share This Page button? I don't even see it on the default theme.


I don't know, that's still on my open questions list. It probably involves installing a social provider like the "Goal" one being promoted on about:home. Except I just tried that one and all you get is a sidebar.

I used to use Facebook Messenger but I think Facebook pulled that.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted June 19th, 2014, 2:33 am

ehume wrote:1) There's no page scrolling arrow icon when you press the scrollwheel.


I have this in global.css. That -moz-appearance may be unneeded.

Code: Select all
#autoscroller {
  height: 28px;
  width: 28px;
  border: none;
  margin: -14px;
  padding: 0;
  background-image: url("chrome://global/skin/icons/autoscroll.png");
  background-color: transparent;
  background-position: right top;
  -moz-appearance: none;
}


#autoscroller[scrolldir="NS"] {
  background-position: right center;
}

#autoscroller[scrolldir="EW"] {
  background-position: right bottom;
}
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted June 19th, 2014, 2:39 am

ehume wrote:2) Responsive Design View has a white border on the left and top.


That's one of the Firefox-built-in Developer Tools. Menubar > Tools > Web Developer > Responsive Design View. It shows in the content area where the current page's content was. Instead, it shows you a re-rendered view of that page in some alternate height/width layout.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted June 19th, 2014, 3:08 am

ehume wrote:4) What is the 3x3 grid?


He's/she's probably talking about the popup that shows from the right-most toolbarbutton in the navbar, the one with the three-bars icon, a.k.a. toolbaritem#panelUI-button and toolbarbutton#panelUI-menu-button, a.k.a. the "hamburger" button. (Or could they mean about:newtab?)

That popup is supposed to show a three-items-wide grid of toolbarbuttons/icons which can still be used when the popup is open without having to put them in the toolbar. I guess it could be an NxN grid, for anyone willing to recode it that way, but three across is probably what you want.

There's another popup, the overflow panel, which is similar but separate. The overflow panel also contains operable toolbarbuttons/icons, but it shows those that have been placed in the nav bar but which can't be shown because of the current window width. The three-across grid has nothing to do with the overflow panel.

During customization mode, I'm sure you've seen this already, there's a representation of the three-across grid that's not actually a popup, it's fixed in place during customization so you can drag things on or off of the grid.

If you're having layout issues with the grid it's almost certainly an issue of horizontal sizes. The CSS that lays that out counts every pixel and sets widths to work out for three columns. That CSS is not very tolerant of changes in horizontal size/layout. If you make a change there for anything impacting width, even borders or padding or icon size, you have to check the math to make sure it still works out. I just installed the latest Aeon from AMO and I see you have two columns, which is the same as what I had at one point. If that's what the reviewers were talking about, then it means you need to do that math for your chosen horizontal layout. If you don't want to do that, then you could go with the exact same sizes as the default theme.

I have some more information for this, I'll add it, if it sounds like I'm talking about the right issue.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted June 19th, 2014, 10:16 pm

Thank you.

I ran into an interesting problem. It took me hours to fix. Using the code I got from mcdavis, all my aeon-based themes became well-behaved. However, my scribblies based themes had the invisible borders problem again. And the invisible system appwindow controls.

Here is where Frank's pruning came back: removing the following:
Code: Select all
dialog, window, wizard {
  -moz-appearance: none !important;
  background-image: url('chrome://global/skin/background.gif'); /* no !important */
  color:  orange;
}


And converting
Code: Select all
window,
page,
dialog,
wizard,
prefwindow {
  -moz-appearance: none !important; /*window;*/
  background-color: orange; /* -moz-Dialog; */ /* need a color */
  color: black; /* -moz-DialogText; */
  font: message-box;
}
back to
Code: Select all
window,
page,
dialog,
wizard,
prefwindow {
  -moz-appearance: window;
  background-color: -moz-Dialog;
  color: -moz-DialogText;
  font: message-box;
}


fixed the problem. Again, I thank you both.

And it just goes to show you how remote code can make a problem.
Firefox: Sic transit gloria mundi.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 3 guests