Bug 1389559 - Wrap about:addons warnings to maintain narrow layouts r?rhelmer draft
authorMark Striemer <mstriemer@mozilla.com>
Wed, 30 Aug 2017 16:55:58 -0500
changeset 656237 a6794823e73ef2efaf13f6b70a294bf848ec1b66
parent 655977 02b9376bea86bd86e86d1747509e6660af545928
child 729062 935d118b2a0e3813845b09bd88dfd8f291df34e2
push id77127
push userbmo:mstriemer@mozilla.com
push dateWed, 30 Aug 2017 21:56:21 +0000
reviewersrhelmer
bugs1389559
milestone57.0a1
Bug 1389559 - Wrap about:addons warnings to maintain narrow layouts r?rhelmer MozReview-Commit-ID: 24Z8qEdROmQ
toolkit/mozapps/extensions/content/extensions.xul
toolkit/themes/shared/extensions/extensions.inc.css
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -184,24 +184,24 @@
               <label value="&loading.label;"/>
             </hbox>
             <spacer class="alert-spacer-after"/>
           </vbox>
           <vbox id="discover-error" align="center" pack="stretch" flex="1" class="alert-container">
             <spacer class="alert-spacer-before"/>
             <hbox>
               <spacer class="discover-spacer-before"/>
-              <hbox class="alert" align="center">
+              <vbox class="alert" align="center">
                 <image class="discover-logo"/>
                 <vbox flex="1" align="stretch">
                   <label class="discover-title">&discover.title;</label>
                   <description class="discover-description">&discover.description2;</description>
                   <description class="discover-footer">&discover.footer;</description>
                 </vbox>
-              </hbox>
+              </vbox>
               <spacer class="discover-spacer-after"/>
             </hbox>
             <spacer class="alert-spacer-after"/>
           </vbox>
           <browser id="discover-browser" type="content" flex="1"
                      disablehistory="true" homepage="about:blank"/>
         </deck>
 
@@ -362,35 +362,35 @@
                   &disabledUnsigned.description.start;<label class="text-link plain" id="find-alternative-addons">&disabledUnsigned.description.findAddonsLink;</label>&disabledUnsigned.description.end;
                 </description>
                 <hbox pack="start"><label class="text-link" id="signing-learn-more">&disabledUnsigned.learnMore;</label></hbox>
                 <description id="signing-dev-info">
                   &disabledUnsigned.devInfo.start;<label class="text-link plain" id="signing-dev-manual-link">&disabledUnsigned.devInfo.linkToManual;</label>&disabledUnsigned.devInfo.end;
                 </description>
               </vbox>
               <vbox id="legacy-extensions-notice" class="alert-container" hidden="true">
-                <hbox class="alert">
+                <vbox class="alert">
                   <description>&legacyWarning.description;
                     <label class="text-link plain" id="legacy-extensions-learnmore-link">&legacyWarning.showLegacy;</label>
                   </description>
-                </hbox>
+                </vbox>
               </vbox>
               <vbox id="plugindeprecation-notice" class="alert-container">
-                <hbox class="alert">
+                <vbox class="alert">
                   <description>&pluginDeprecation.description; &#160;
                     <label class="text-link plain" id="plugindeprecation-learnmore-link">&pluginDeprecation.learnMore;</label>
                   </description>
-                </hbox>
+                </vbox>
               </vbox>
               <vbox id="getthemes-container" class="alert-container">
-                <hbox class="alert">
+                <vbox class="alert">
                   <description>&getThemes.description; &#160;
                     <label class="text-link plain" id="getthemes-learnmore-link">&getThemes.learnMore;</label>
                   </description>
-                </hbox>
+                </vbox>
               </vbox>
               <hbox class="view-header global-warning-container">
                 <!-- global warnings -->
                 <hbox class="global-warning" flex="1">
                   <hbox class="global-warning-safemode" flex="1" align="center"
                         tooltiptext="&warning.safemode.label;">
                     <image class="warning-icon"/>
                     <label class="global-warning-text" flex="1" crop="end"
@@ -414,32 +414,35 @@
                   </hbox>
                   <button class="button-link global-warning-updatesecurity"
                           label="&warning.updatesecurity.enable.label;"
                           tooltiptext="&warning.updatesecurity.enable.tooltip;"
                           command="cmd_enableUpdateSecurity"/>
                   <spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
                 </hbox>
               </hbox>
-              <hbox class="view-header global-info-container experiment-info-container">
-                <hbox class="global-info" flex="1" align="center">
-                  <label value="&experiment.info.label;"/>
-                  <button id="experiments-learn-more"
-                          label="&experiment.info.learnmore;"
-                          tooltiptext="&experiment.info.learnmore;"
-                          accesskey="&experiment.info.learnmore.accesskey;"
-                          command="cmd_experimentsLearnMore"/>
-                  <button id="experiments-change-telemetry"
-                          label="&experiment.info.changetelemetry;"
-                          tooltiptext="&experiment.info.changetelemetry;"
-                          accesskey="&experiment.info.changetelemetry.accesskey;"
-                          command="cmd_experimentsOpenTelemetryPreferences"/>
-                  <spacer flex="5000"/> <!-- Necessary to allow the message to wrap. -->
-                </hbox>
-              </hbox>
+              <vbox class="alert-container experiment-info-container">
+                <vbox class="alert">
+                  <description>
+                    &experiment.info.label;
+                    <hbox>
+                      <button id="experiments-learn-more"
+                              label="&experiment.info.learnmore;"
+                              tooltiptext="&experiment.info.learnmore;"
+                              accesskey="&experiment.info.learnmore.accesskey;"
+                              command="cmd_experimentsLearnMore"/>
+                      <button id="experiments-change-telemetry"
+                              label="&experiment.info.changetelemetry;"
+                              tooltiptext="&experiment.info.changetelemetry;"
+                              accesskey="&experiment.info.changetelemetry.accesskey;"
+                              command="cmd_experimentsOpenTelemetryPreferences"/>
+                    </hbox>
+                  </description>
+                </vbox>
+              </vbox>
               <vbox id="addon-list-empty" class="alert-container"
                     flex="1" hidden="true">
                 <spacer class="alert-spacer-before"/>
                 <vbox class="alert">
                   <label value="&listEmpty.installed.label;"/>
                   <button class="discover-button"
                           id="discover-button-install"
                           label="&listEmpty.button.label;"
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -111,28 +111,33 @@
 
 .alert {
   -moz-box-align: center;
   padding: 10px;
   color: var(--in-content-text-color);
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px;
   background-color: #ebebeb;
+  text-align: center;
 }
 
 .alert .alert-title {
   font-weight: bold;
   font-size: 200%;
   margin-bottom: 15px;
 }
 
 .alert button {
   margin: 1em 2em;
 }
 
+.experiment-info-container > .alert button {
+  margin: 0 4px;
+}
+
 .loading {
   list-style-image: url("chrome://global/skin/icons/loading.png");
   padding-left: 20px;
   padding-right: 20px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .loading > image {